python 全栈开发，Day80(博客系统分析,博客主页展示)
一、博客系统分析
数据库的构建
首先，我们分析一个博客系统的功能：
- 一个博客可以有多个标签（多对多）
- 一个博客可以有多条评论(一对多）
- 一个博客只可以有一个类别（多对一）
接下来，我们分析关系的属性：
博客：标题，作者，内容，发布时间，分类（外键），标签（多对多）等
标签：标签名
类别：分类名
评论：作者，博客（外键），邮箱，内容，发布时间等。
有8张表，表关系如下：
图中箭头开始的英文字母表示关联字段
按照箭头方向查询，表示正向查询，否则为反向查询
新建项目cnblog，应用名为blog
修改models.py，必须导入模块
from django.contrib.auth.models import AbstractUser
因为有一个表userinfo需要继承它。django自带的auth_user表也是继承AbstractUser
表模型如下：
from django.db import models# Create your models here.
from django.db import models
# Create your models here.
from django.contrib.auth.models import AbstractUser
class UserInfo(AbstractUser):
"""
用户信息
"""
nid = models.AutoField(primary_key=True)
telephone = models.CharField(max_length=11, null=True, unique=True)
avatar = models.FileField(upload_to='avatars/', default="avatars/default.png")
create_time = models.DateTimeField(verbose_name='创建时间', auto_now_add=True)blog </span>= models.OneToOneField(to=<span style="color: #800000;">'</span><span style="color: #800000;">Blog</span><span style="color: #800000;">'</span>, to_field=<span style="color: #800000;">'</span><span style="color: #800000;">nid</span><span style="color: #800000;">'</span>, null=True, on_delete=<span style="color: #000000;">models.CASCADE) </span><span style="color: #0000ff;">def</span> <span style="color: #800080;">__str__</span><span style="color: #000000;">(self): </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> self.usernameclass Blog(models.Model):
"""
博客信息
"""
nid = models.AutoField(primary_key=True)
title = models.CharField(verbose_name='个人博客标题', max_length=64)
site_name = models.CharField(verbose_name='站点名称', max_length=64)
theme = models.CharField(verbose_name='博客主题', max_length=32)</span><span style="color: #0000ff;">def</span> <span style="color: #800080;">__str__</span><span style="color: #000000;">(self): </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> self.titleclass Category(models.Model):
"""
博主个人文章分类表
"""
nid = models.AutoField(primary_key=True)
title = models.CharField(verbose_name='分类标题', max_length=32)
blog = models.ForeignKey(verbose_name='所属博客', to='Blog', to_field='nid', on_delete=models.CASCADE)</span><span style="color: #0000ff;">def</span> <span style="color: #800080;">__str__</span><span style="color: #000000;">(self): </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> self.titleclass Tag(models.Model):
nid = models.AutoField(primary_key=True)
title = models.CharField(verbose_name='标签名称', max_length=32)
blog = models.ForeignKey(verbose_name='所属博客', to='Blog', to_field='nid', on_delete=models.CASCADE)</span><span style="color: #0000ff;">def</span> <span style="color: #800080;">__str__</span><span style="color: #000000;">(self): </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> self.titleclass Article(models.Model):
nid </span>= models.AutoField(primary_key=<span style="color: #000000;">True) title </span>= models.CharField(max_length=50, verbose_name=<span style="color: #800000;">'</span><span style="color: #800000;">文章标题</span><span style="color: #800000;">'</span><span style="color: #000000;">) desc </span>= models.CharField(max_length=255, verbose_name=<span style="color: #800000;">'</span><span style="color: #800000;">文章描述</span><span style="color: #800000;">'</span><span style="color: #000000;">) create_time </span>= models.DateTimeField(verbose_name=<span style="color: #800000;">'</span><span style="color: #800000;">创建时间</span><span style="color: #800000;">'</span>, auto_now_add=<span style="color: #000000;">True) content </span>=<span style="color: #000000;"> models.TextField() comment_count </span>= models.IntegerField(default=<span style="color: #000000;">0) up_count </span>= models.IntegerField(default=<span style="color: #000000;">0) down_count </span>= models.IntegerField(default=<span style="color: #000000;">0) user </span>= models.ForeignKey(verbose_name=<span style="color: #800000;">'</span><span style="color: #800000;">作者</span><span style="color: #800000;">'</span>, to=<span style="color: #800000;">'</span><span style="color: #800000;">UserInfo</span><span style="color: #800000;">'</span>, to_field=<span style="color: #800000;">'</span><span style="color: #800000;">nid</span><span style="color: #800000;">'</span>, on_delete=<span style="color: #000000;">models.CASCADE) category </span>= models.ForeignKey(to=<span style="color: #800000;">'</span><span style="color: #800000;">Category</span><span style="color: #800000;">'</span>, to_field=<span style="color: #800000;">'</span><span style="color: #800000;">nid</span><span style="color: #800000;">'</span>, null=True, on_delete=<span style="color: #000000;">models.CASCADE) tags </span>=<span style="color: #000000;"> models.ManyToManyField( to</span>=<span style="color: #800000;">"</span><span style="color: #800000;">Tag</span><span style="color: #800000;">"</span><span style="color: #000000;">, </span><span style="color: #008000;">#</span><span style="color: #008000;">through参数可以指定用作中介的中间模型</span> through=<span style="color: #800000;">'</span><span style="color: #800000;">Article2Tag</span><span style="color: #800000;">'</span><span style="color: #000000;">, ) </span><span style="color: #0000ff;">def</span> <span style="color: #800080;">__str__</span><span style="color: #000000;">(self): </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> self.titleclass Article2Tag(models.Model):
nid = models.AutoField(primary_key=True)
article = models.ForeignKey(verbose_name='文章', to="Article", to_field='nid', on_delete=models.CASCADE)
tag = models.ForeignKey(verbose_name='标签', to="Tag", to_field='nid', on_delete=models.CASCADE)</span><span style="color: #0000ff;">class</span><span style="color: #000000;"> Meta: </span><span style="color: #008000;">#</span><span style="color: #008000;">组合唯一约束</span> unique_together =<span style="color: #000000;"> [ (</span><span style="color: #800000;">'</span><span style="color: #800000;">article</span><span style="color: #800000;">'</span>, <span style="color: #800000;">'</span><span style="color: #800000;">tag</span><span style="color: #800000;">'</span><span style="color: #000000;">), ] </span><span style="color: #0000ff;">def</span> <span style="color: #800080;">__str__</span><span style="color: #000000;">(self): v </span>= self.article.title + <span style="color: #800000;">"</span><span style="color: #800000;">---</span><span style="color: #800000;">"</span> +<span style="color: #000000;"> self.tag.title </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> vclass ArticleUpDown(models.Model):
"""
点赞表
"""nid </span>= models.AutoField(primary_key=<span style="color: #000000;">True) user </span>= models.ForeignKey(<span style="color: #800000;">'</span><span style="color: #800000;">UserInfo</span><span style="color: #800000;">'</span>, null=True, on_delete=<span style="color: #000000;">models.CASCADE) article </span>= models.ForeignKey(<span style="color: #800000;">"</span><span style="color: #800000;">Article</span><span style="color: #800000;">"</span>, null=True, on_delete=<span style="color: #000000;">models.CASCADE) is_up </span>= models.BooleanField(default=<span style="color: #000000;">True) </span><span style="color: #0000ff;">class</span><span style="color: #000000;"> Meta: </span><span style="color: #008000;">#</span><span style="color: #008000;"> 组合唯一约束</span> unique_together =<span style="color: #000000;"> [ (</span><span style="color: #800000;">'</span><span style="color: #800000;">article</span><span style="color: #800000;">'</span>, <span style="color: #800000;">'</span><span style="color: #800000;">user</span><span style="color: #800000;">'</span><span style="color: #000000;">), ]class Comment(models.Model):
"""评论表 </span><span style="color: #800000;">"""</span><span style="color: #000000;"> nid </span>= models.AutoField(primary_key=<span style="color: #000000;">True) article </span>= models.ForeignKey(verbose_name=<span style="color: #800000;">'</span><span style="color: #800000;">评论文章</span><span style="color: #800000;">'</span>, to=<span style="color: #800000;">'</span><span style="color: #800000;">Article</span><span style="color: #800000;">'</span>, to_field=<span style="color: #800000;">'</span><span style="color: #800000;">nid</span><span style="color: #800000;">'</span>, on_delete=<span style="color: #000000;">models.CASCADE) user </span>= models.ForeignKey(verbose_name=<span style="color: #800000;">'</span><span style="color: #800000;">评论者</span><span style="color: #800000;">'</span>, to=<span style="color: #800000;">'</span><span style="color: #800000;">UserInfo</span><span style="color: #800000;">'</span>, to_field=<span style="color: #800000;">'</span><span style="color: #800000;">nid</span><span style="color: #800000;">'</span>, on_delete=<span style="color: #000000;">models.CASCADE) content </span>= models.CharField(verbose_name=<span style="color: #800000;">'</span><span style="color: #800000;">评论内容</span><span style="color: #800000;">'</span>, max_length=255<span style="color: #000000;">) create_time </span>= models.DateTimeField(verbose_name=<span style="color: #800000;">'</span><span style="color: #800000;">创建时间</span><span style="color: #800000;">'</span>, auto_now_add=<span style="color: #000000;">True) parent_comment </span>= models.ForeignKey(<span style="color: #800000;">'</span><span style="color: #800000;">Comment</span><span style="color: #800000;">'</span>, null=True, on_delete=<span style="color: #000000;">models.CASCADE) </span><span style="color: #0000ff;">def</span> <span style="color: #800080;">__str__</span><span style="color: #000000;">(self): </span><span style="color: #0000ff;">return</span> self.content</pre>
相关参数解释：
through 表示orm，不要创建关系表。而制定一个表，这个表自己来创建！为什么呢？因为orm创建多对多关系表时，只有3个字段。那么需要关系表需要扩充字段时，就不行了！
所以设置through 字段，是为了方便添加额外的字段。使用through，那么这个表，称之为中间模型。
在Comment模型表中，有一个字段parent_comment。它关联的是本身表中的主键nid，它是一个父级评论id，用来展示谁评论谁！to='Comment'等同于to='self'
修改settings.py配置文件，覆盖默认的User模型。最后一行添加，否则执行创建表命令时会报错！
AUTH_USER_MODEL="blog.UserInfo"
Django允许你通过修改setting.py文件中的 AUTH_USER_MODEL 设置覆盖默认的User模型，其值引用一个自定义的模型。
bolg，是应用名。
使用下面2个命令，生成表
python manage.py makemigrations
python manage.py migrate
生成的表如下：
注意：django自带的auth_user表没有了，取而代之的是blog_userinfo表。
查看表字段
它在auth_user表的基础上，增加了5个字段！
登录验证
添加超级用户，密码必须是8位或者以上！
python manage.py createsuperuser
效果如下：
再创建2个用户，zhang和lisi。用来测试多个用户登录！
lisi用户
修改urls.py，增加路径
from blog import views urlpatterns = [ path('admin/', admin.site.urls), path('index/', views.index), path('login/', views.login), ]
修改views.py，增加视图函数
from django.shortcuts import render,HttpResponse,redirect from django.contrib import auth from blog.models import Article,UserInfo# Create your views here.
def login(request):</span><span style="color: #0000ff;">if</span> request.method==<span style="color: #800000;">"</span><span style="color: #800000;">POST</span><span style="color: #800000;">"</span><span style="color: #000000;">: user</span>=request.POST.get(<span style="color: #800000;">"</span><span style="color: #800000;">user</span><span style="color: #800000;">"</span><span style="color: #000000;">) pwd</span>=request.POST.get(<span style="color: #800000;">"</span><span style="color: #800000;">pwd</span><span style="color: #800000;">"</span><span style="color: #000000;">) </span><span style="color: #008000;">#</span><span style="color: #008000;"> 用户验证成功,返回user对象,否则返回None</span> user=auth.authenticate(username=user,password=<span style="color: #000000;">pwd) </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> user: </span><span style="color: #008000;">#</span><span style="color: #008000;"> 登录,注册session</span> <span style="color: #008000;">#</span><span style="color: #008000;"> 全局变量 request.user=当前登陆对象(session中)</span>auth.login(request,user)
return redirect("/index/")</span><span style="color: #0000ff;">return</span> render(request,<span style="color: #800000;">"</span><span style="color: #800000;">login.html</span><span style="color: #800000;">"</span><span style="color: #000000;">)def index(request):
return render(request,"index.html")
修改login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" method="post"> {% csrf_token %} <lable>用户名</lable><input type="text" name="user"> <lable>密码</lable><input type="password" name="pwd"> <input type="submit"> </form> </body> </html>
修改index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3>INDEX</h3> </body> </html>
访问登录页面
跳转到首页
首页修饰
修改settings.py，设置静态文件目录。最后一行添加：
STATICFILES_DIRS=[ os.path.join(BASE_DIR,"static") ]
下载bootsrtap，将压缩的包内容放到satic目录
img和js是新建的
目录如下：
修改urls.py，增加路径
urlpatterns = [ path('admin/', admin.site.urls), path('login/', views.login), path('index/', views.index), path('logout/', views.logout), path('', views.index), ]
修改views.py，增加注销
def logout(request): # 注销 auth.logout(request) return redirect("/index/")
修改index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"> <script src="/static/js/jquery.js"></script> <script src="/static/bootstrap/js/bootstrap.js"></script> <style> .desc{ text-align: justify; }.info{ margin</span>-<span style="color: #000000;">top: 10px; } </span></style></head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">博客园</a>
</div><!-- Collect the nav links, forms, <span style="color: #0000ff;">and</span> other content <span style="color: #0000ff;">for</span> toggling --> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">collapse navbar-collapse</span><span style="color: #800000;">"</span> id=<span style="color: #800000;">"</span><span style="color: #800000;">bs-example-navbar-collapse-1</span><span style="color: #800000;">"</span>> <ul <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">nav navbar-nav</span><span style="color: #800000;">"</span>> <li <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">active</span><span style="color: #800000;">"</span>><a href=<span style="color: #800000;">"</span><span style="color: #800000;">#</span><span style="color: #800000;">"</span>>新闻 <span <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">sr-only</span><span style="color: #800000;">"</span>>(current)</span></a></li> <li><a href=<span style="color: #800000;">"</span><span style="color: #800000;">#</span><span style="color: #800000;">"</span>>博问</a></li> </ul> <ul <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">nav navbar-nav navbar-right</span><span style="color: #800000;">"</span>><span style="color: #000000;"> {</span>% <span style="color: #0000ff;">if</span> request.user.username %<span style="color: #000000;">} </span><li><a href=<span style="color: #800000;">"</span><span style="color: #800000;">#</span><span style="color: #800000;">"</span>><span <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">glyphicon glyphicon-user</span><span style="color: #800000;">"</span>></span>&nbsp;{{ request.user.username }}</a> </li> <li <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">dropdown</span><span style="color: #800000;">"</span>> <a href=<span style="color: #800000;">"</span><span style="color: #800000;">#</span><span style="color: #800000;">"</span> <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">dropdown-toggle</span><span style="color: #800000;">"</span> data-toggle=<span style="color: #800000;">"</span><span style="color: #800000;">dropdown</span><span style="color: #800000;">"</span> role=<span style="color: #800000;">"</span><span style="color: #800000;">button</span><span style="color: #800000;">"</span> aria-haspopup=<span style="color: #800000;">"</span><span style="color: #800000;">true</span><span style="color: #800000;">"</span><span style="color: #000000;"> aria</span>-expanded=<span style="color: #800000;">"</span><span style="color: #800000;">false</span><span style="color: #800000;">"</span>>Dropdown <span <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">caret</span><span style="color: #800000;">"</span>></span></a> <ul <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">dropdown-menu</span><span style="color: #800000;">"</span>> <li><a href=<span style="color: #800000;">"</span><span style="color: #800000;">#</span><span style="color: #800000;">"</span>>修改密码</a></li> <li><a href=<span style="color: #800000;">"</span><span style="color: #800000;">#</span><span style="color: #800000;">"</span>>个人信息</a></li> <li><a href=<span style="color: #800000;">"</span><span style="color: #800000;">/logout/</span><span style="color: #800000;">"</span>>注销</a></li> <li role=<span style="color: #800000;">"</span><span style="color: #800000;">separator</span><span style="color: #800000;">"</span> <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">divider</span><span style="color: #800000;">"</span>></li> <li><a href=<span style="color: #800000;">"</span><span style="color: #800000;">#</span><span style="color: #800000;">"</span>>Separated link</a></li> </ul> </li><span style="color: #000000;"> {</span>% <span style="color: #0000ff;">else</span> %<span style="color: #000000;">} </span><li><a href=<span style="color: #800000;">"</span><span style="color: #800000;">/login/</span><span style="color: #800000;">"</span>>登陆</a></li> <li><a href=<span style="color: #800000;">"</span><span style="color: #800000;">#</span><span style="color: #800000;">"</span>>注册</a></li><span style="color: #000000;"> {</span>% endif %<span style="color: #000000;">} </span></ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --></nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div><div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel panel-danger</span><span style="color: #800000;">"</span>> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-heading</span><span style="color: #800000;">"</span>> <h3 <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-title</span><span style="color: #800000;">"</span>>Panel title</h3> </div> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-body</span><span style="color: #800000;">"</span>><span style="color: #000000;"> Panel content </span></div> </div> </div> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">col-md-6</span><span style="color: #800000;">"</span>> 222 </div> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">col-md-3</span><span style="color: #800000;">"</span>> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel panel-warning</span><span style="color: #800000;">"</span>> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-heading</span><span style="color: #800000;">"</span>> <h3 <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-title</span><span style="color: #800000;">"</span>>Panel title</h3> </div> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-body</span><span style="color: #800000;">"</span>><span style="color: #000000;"> Panel content </span></div> </div> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel panel-info</span><span style="color: #800000;">"</span>> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-heading</span><span style="color: #800000;">"</span>> <h3 <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-title</span><span style="color: #800000;">"</span>>Panel title</h3> </div> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-body</span><span style="color: #800000;">"</span>><span style="color: #000000;"> Panel content </span></div> </div> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel panel-success</span><span style="color: #800000;">"</span>> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-heading</span><span style="color: #800000;">"</span>> <h3 <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-title</span><span style="color: #800000;">"</span>>Panel title</h3> </div> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-body</span><span style="color: #800000;">"</span>><span style="color: #000000;"> Panel content </span></div> </div> </div> </div></div>
</body>
</html>
重新登录，效果如下：
添加内容
使用django自带的admin后台，快速添加数据。
访问后台页面，这里必须是超级用户。上面已经创建了超级用户xiao
默认是空的
操作表，必须要注册
修改views.py同级目录下的admin.py
注册所有的模型表
from django.contrib import admin# Register your models here.
from blog import models
admin.site.register(models.UserInfo)
admin.site.register(models.Blog)
admin.site.register(models.Category)
admin.site.register(models.Tag)
admin.site.register(models.Article2Tag)
admin.site.register(models.Article)
admin.site.register(models.ArticleUpDown)
admin.site.register(models.Comment)
再次刷新页面
点击Articles，添加文章
从http://www.py3study.com 上面copy一篇博客
注意内容都是html代码
添加分类
添加站点
保存
点击保存
添加成功
多添加几篇博客
首页文章展示
修改settings.py，更改时区
TIME_ZONE = 'Asia/Shanghai'
修改index视图函数
def index(request): article_list=Article.objects.all() return render(request,"index.html",{"article_list":article_list})
修改index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"> <script src="/static/js/jquery.js"></script> <script src="/static/bootstrap/js/bootstrap.js"></script> <style> .desc{ text-align: justify; }.info{ margin</span>-<span style="color: #000000;">top: 10px; } </span></style></head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">博客园</a>
</div><!-- Collect the nav links, forms, <span style="color: #0000ff;">and</span> other content <span style="color: #0000ff;">for</span> toggling --> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">collapse navbar-collapse</span><span style="color: #800000;">"</span> id=<span style="color: #800000;">"</span><span style="color: #800000;">bs-example-navbar-collapse-1</span><span style="color: #800000;">"</span>> <ul <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">nav navbar-nav</span><span style="color: #800000;">"</span>> <li <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">active</span><span style="color: #800000;">"</span>><a href=<span style="color: #800000;">"</span><span style="color: #800000;">#</span><span style="color: #800000;">"</span>>新闻 <span <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">sr-only</span><span style="color: #800000;">"</span>>(current)</span></a></li> <li><a href=<span style="color: #800000;">"</span><span style="color: #800000;">#</span><span style="color: #800000;">"</span>>博问</a></li> </ul> <ul <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">nav navbar-nav navbar-right</span><span style="color: #800000;">"</span>><span style="color: #000000;"> {</span>% <span style="color: #0000ff;">if</span> request.user.username %<span style="color: #000000;">} </span><li><a href=<span style="color: #800000;">"</span><span style="color: #800000;">#</span><span style="color: #800000;">"</span>><span <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">glyphicon glyphicon-user</span><span style="color: #800000;">"</span>></span>&nbsp;{{ request.user.username }}</a> </li> <li <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">dropdown</span><span style="color: #800000;">"</span>> <a href=<span style="color: #800000;">"</span><span style="color: #800000;">#</span><span style="color: #800000;">"</span> <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">dropdown-toggle</span><span style="color: #800000;">"</span> data-toggle=<span style="color: #800000;">"</span><span style="color: #800000;">dropdown</span><span style="color: #800000;">"</span> role=<span style="color: #800000;">"</span><span style="color: #800000;">button</span><span style="color: #800000;">"</span> aria-haspopup=<span style="color: #800000;">"</span><span style="color: #800000;">true</span><span style="color: #800000;">"</span><span style="color: #000000;"> aria</span>-expanded=<span style="color: #800000;">"</span><span style="color: #800000;">false</span><span style="color: #800000;">"</span>>Dropdown <span <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">caret</span><span style="color: #800000;">"</span>></span></a> <ul <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">dropdown-menu</span><span style="color: #800000;">"</span>> <li><a href=<span style="color: #800000;">"</span><span style="color: #800000;">#</span><span style="color: #800000;">"</span>>修改密码</a></li> <li><a href=<span style="color: #800000;">"</span><span style="color: #800000;">#</span><span style="color: #800000;">"</span>>个人信息</a></li> <li><a href=<span style="color: #800000;">"</span><span style="color: #800000;">/logout/</span><span style="color: #800000;">"</span>>注销</a></li> <li role=<span style="color: #800000;">"</span><span style="color: #800000;">separator</span><span style="color: #800000;">"</span> <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">divider</span><span style="color: #800000;">"</span>></li> <li><a href=<span style="color: #800000;">"</span><span style="color: #800000;">#</span><span style="color: #800000;">"</span>>Separated link</a></li> </ul> </li><span style="color: #000000;"> {</span>% <span style="color: #0000ff;">else</span> %<span style="color: #000000;">} </span><li><a href=<span style="color: #800000;">"</span><span style="color: #800000;">/login/</span><span style="color: #800000;">"</span>>登陆</a></li> <li><a href=<span style="color: #800000;">"</span><span style="color: #800000;">#</span><span style="color: #800000;">"</span>>注册</a></li><span style="color: #000000;"> {</span>% endif %<span style="color: #000000;">} </span></ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --></nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div><div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel panel-danger</span><span style="color: #800000;">"</span>> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-heading</span><span style="color: #800000;">"</span>> <h3 <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-title</span><span style="color: #800000;">"</span>>Panel title</h3> </div> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-body</span><span style="color: #800000;">"</span>><span style="color: #000000;"> Panel content </span></div> </div> </div> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">col-md-6</span><span style="color: #800000;">"</span>> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">article_list</span><span style="color: #800000;">"</span>><span style="color: #000000;"> {</span>% <span style="color: #0000ff;">for</span> article <span style="color: #0000ff;">in</span> article_list %<span style="color: #000000;">} </span><div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">article_item</span><span style="color: #800000;">"</span>> <h5><a href=<span style="color: #800000;">""</span>>{{ article.title }}</a></h5> <div> <span <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">media-left</span><span style="color: #800000;">"</span>><a href=<span style="color: #800000;">""</span>><img width=<span style="color: #800000;">"</span><span style="color: #800000;">60</span><span style="color: #800000;">"</span> height=<span style="color: #800000;">"</span><span style="color: #800000;">60</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1758343206,1224786249&fm=58&bpow=1024&bpoh=1536</span><span style="color: #800000;">"</span> alt=<span style="color: #800000;">""</span>></a></span> <span <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">media-right small desc </span><span style="color: #800000;">"</span>><span style="color: #000000;"> {{ article.desc }} </span></span> </div> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">info small</span><span style="color: #800000;">"</span>> <span><a href=<span style="color: #800000;">""</span>>{{ article.user.username }}</a></span> &<span style="color: #000000;">nbsp; 发布于 </span><span>{{ article.create_time|date:<span style="color: #800000;">'</span><span style="color: #800000;">Y-m-d H:i</span><span style="color: #800000;">'</span> }}</span>&nbsp;&<span style="color: #000000;">nbsp; </span><span <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">glyphicon glyphicon-comment</span><span style="color: #800000;">"</span>></span><a href=<span style="color: #800000;">""</span>>评论({{ article.comment_count }})</a>&nbsp;&<span style="color: #000000;">nbsp; </span><span <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">glyphicon glyphicon-thumbs-up</span><span style="color: #800000;">"</span>></span><a href=<span style="color: #800000;">""</span>>点赞({{ article.up_count }})</a> </div> </div> <hr><span style="color: #000000;"> {</span>% endfor %<span style="color: #000000;">} </span></div> </div> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">col-md-3</span><span style="color: #800000;">"</span>> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel panel-warning</span><span style="color: #800000;">"</span>> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-heading</span><span style="color: #800000;">"</span>> <h3 <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-title</span><span style="color: #800000;">"</span>>Panel title</h3> </div> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-body</span><span style="color: #800000;">"</span>><span style="color: #000000;"> Panel content </span></div> </div> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel panel-info</span><span style="color: #800000;">"</span>> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-heading</span><span style="color: #800000;">"</span>> <h3 <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-title</span><span style="color: #800000;">"</span>>Panel title</h3> </div> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-body</span><span style="color: #800000;">"</span>><span style="color: #000000;"> Panel content </span></div> </div> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel panel-success</span><span style="color: #800000;">"</span>> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-heading</span><span style="color: #800000;">"</span>> <h3 <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-title</span><span style="color: #800000;">"</span>>Panel title</h3> </div> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-body</span><span style="color: #800000;">"</span>><span style="color: #000000;"> Panel content </span></div> </div> </div> </div></div>
</body>
</html>
访问首页，效果如下：
个人站点展示
比如博客园范围个人站点是域名加用户名，就可以了，比如：
https://www.cnblogs.com/xiao987334176
如果用户不存在，会提示404页面
增加404页面
修改urls.py，增加路径。注意导入re_path
from django.contrib import admin from django.urls import path,re_path from blog import views urlpatterns = [ path('admin/', admin.site.urls), path('login/', views.login), path('index/', views.index), path('logout/', views.logout), path('', views.index), re_path('(?P<username>\w+)', views.homesite), ]
修改views.py，增加视图函数
def homesite(request,username): """ 查询 :param request: :param username: :return: """<span style="color: #008000;">#</span><span style="color: #008000;"> 查询当前站点的用户对象</span> user=UserInfo.objects.filter(username=<span style="color: #000000;">username).first() </span><span style="color: #0000ff;">if</span> <span style="color: #0000ff;">not</span><span style="color: #000000;"> user: </span><span style="color: #0000ff;">return</span> render(request,<span style="color: #800000;">"</span><span style="color: #800000;">not_found.html</span><span style="color: #800000;">"</span><span style="color: #000000;">) </span><span style="color: #0000ff;">return</span> render(request,<span style="color: #800000;">"</span><span style="color: #800000;">homesite.html</span><span style="color: #800000;">"</span>,{<span style="color: #800000;">"</span><span style="color: #800000;">user</span><span style="color: #800000;">"</span>:user})</pre>
在templates目录创建文件not_found.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"> </head> <body><div class="container" style="margin-top: 100px">
<div class="text-center">
<a href="http://www.cnblogs.com/"><img src="/static/img/logo_small.gif" alt="cnblogs"></a>
<p><b>404.</b> 抱歉! 您访问的资源不存在!</p>
<p class="d">请确认您输入的网址是否正确，如果问题持续存在，请发邮件至 xx@qq.com 与 <strong style="font-size: 28px">xiao</strong> 联系。</p>
<p><a href="/">返回网站首页</a></p></div></div>
</body>
</html>
创建homesite.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3>{{ user }}</h3> </body> </html>
访问网页：http://127.0.0.1:8000/xiao
访问一个不存在的用户
http://127.0.0.1:8000/123
页面提示404
展示文章列表
修改homesite视图函数
def homesite(request,username): """ 查询 :param request: :param username: :return: """<span style="color: #008000;">#</span><span style="color: #008000;"> 查询当前站点的用户对象</span> user=UserInfo.objects.filter(username=<span style="color: #000000;">username).first() </span><span style="color: #0000ff;">if</span> <span style="color: #0000ff;">not</span><span style="color: #000000;"> user: </span><span style="color: #0000ff;">return</span> render(request,<span style="color: #800000;">"</span><span style="color: #800000;">not_found.html</span><span style="color: #800000;">"</span><span style="color: #000000;">) </span><span style="color: #008000;">#</span><span style="color: #008000;"> 查询当前站点对象</span> blog=<span style="color: #000000;">user.blog </span><span style="color: #008000;">#</span><span style="color: #008000;"> 查询当前用户发布的所有文章</span> article_list=Article.objects.filter(user__username=<span style="color: #000000;">username) </span><span style="color: #0000ff;">return</span> render(request,<span style="color: #800000;">"</span><span style="color: #800000;">homesite.html</span><span style="color: #800000;">"</span>,{<span style="color: #800000;">"</span><span style="color: #800000;">blog</span><span style="color: #800000;">"</span>:blog,<span style="color: #800000;">"</span><span style="color: #800000;">article_list</span><span style="color: #800000;">"</span>:article_list})</pre>
修改homesite.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title><style> *<span style="color: #000000;">{ margin: 0; padding: 0; } .header{ width: </span>100%<span style="color: #000000;">; height: 59px; background</span>-color: <span style="color: #008000;">#</span><span style="color: #008000;">369;</span>}
.header .title{
line-height: 59px;
color: white;
font-weight: lighter;
margin-left: 20px;
font-size: 18px;
}.left_region{ margin</span>-<span style="color: #000000;">top: 10px; } .info{ margin</span>-<span style="color: #000000;">top: 10px; color: darkgray; } </span></style> <link rel=<span style="color: #800000;">"</span><span style="color: #800000;">stylesheet</span><span style="color: #800000;">"</span> href=<span style="color: #800000;">"</span><span style="color: #800000;">/static/bootstrap/css/bootstrap.css</span><span style="color: #800000;">"</span>> <script src=<span style="color: #800000;">"</span><span style="color: #800000;">/static/js/jquery.js</span><span style="color: #800000;">"</span>></script> <script src=<span style="color: #800000;">"</span><span style="color: #800000;">/static/bootstrap/js/bootstrap.js</span><span style="color: #800000;">"</span>></script></head>
<body>
<div class="header">
<p class="title">{{ blog.title }}</p>
</div><div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="left_region">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
<div class="col-md-9"><div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">article_list</span><span style="color: #800000;">"</span>><span style="color: #000000;"> {</span>% <span style="color: #0000ff;">for</span> article <span style="color: #0000ff;">in</span> article_list %<span style="color: #000000;">} </span><div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">article_item clearfix</span><span style="color: #800000;">"</span>> <h5><a href=<span style="color: #800000;">""</span>>{{ article.title }}</a></h5> <div> <span <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">small desc </span><span style="color: #800000;">"</span>><span style="color: #000000;"> {{ article.desc }} </span></span> </div> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">info small pull-right</span><span style="color: #800000;">"</span>><span style="color: #000000;"> 发布于 </span><span>{{ article.create_time|date:<span style="color: #800000;">'</span><span style="color: #800000;">Y-m-d H:i</span><span style="color: #800000;">'</span> }}</span>&nbsp;&<span style="color: #000000;">nbsp; </span><span <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">glyphicon glyphicon-comment</span><span style="color: #800000;">"</span>></span><a href=<span style="color: #800000;">""</span>>评论({{ article.comment_count }})</a>&nbsp;&<span style="color: #000000;">nbsp; </span><span <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">glyphicon glyphicon-thumbs-up</span><span style="color: #800000;">"</span>></span><a href=<span style="color: #800000;">""</span>>点赞({{ article.up_count }})</a> </div> </div> <hr><span style="color: #000000;"> {</span>% endfor %<span style="color: #000000;">} </span></div> </div> </div></div>
</body>
</html>
访问xiao的个人站点，效果如下：
这个时候发现，左上角没有显示博客标题。那是因为用户认证表的blog_id字段默认为空，需要在admin后台绑定一下
登录到后台，点击用户表，点击指定的用户xiao
拉到最下面，绑定blog，点击保存
再次刷新个人站点，发现出来了！
作业：
查询当前站点每一个分类的名称以及对应的文章数
查询当前站点每一个标签的名称以及对应的文章数
答案：
修改homesite视图函数
def homesite(request,username): """ 查询 :param request: :param username: :return: """ # 查询当前站点的用户对象 user=UserInfo.objects.filter(username=username).first() if not user: return render(request,"not_found.html") # 查询当前站点对象 blog=user.blog</span><span style="color: #008000;">#</span><span style="color: #008000;"> 查询当前用户发布的所有文章</span> article_list=Article.objects.filter(user__username=<span style="color: #000000;">username) </span><span style="color: #008000;">#</span><span style="color: #008000;"> 查询当前站点每一个分类的名称以及对应的文章数</span> cate_list = Category.objects.filter(blog=blog).annotate(c=Count(<span style="color: #800000;">"</span><span style="color: #800000;">article__title</span><span style="color: #800000;">"</span>)).values(<span style="color: #800000;">"</span><span style="color: #800000;">title</span><span style="color: #800000;">"</span>,<span style="color: #800000;">"</span><span style="color: #800000;">c</span><span style="color: #800000;">"</span><span style="color: #000000;">) </span><span style="color: #0000ff;">print</span><span style="color: #000000;">(cate_list) </span><span style="color: #008000;">#</span><span style="color: #008000;"> 查询当前站点每一个标签的名称以及对应的文章数</span> tag_list = Tag.objects.filter(blog=blog).annotate(c=Count(<span style="color: #800000;">"</span><span style="color: #800000;">article__title</span><span style="color: #800000;">"</span>)).values(<span style="color: #800000;">"</span><span style="color: #800000;">title</span><span style="color: #800000;">"</span>,<span style="color: #800000;">"</span><span style="color: #800000;">c</span><span style="color: #800000;">"</span><span style="color: #000000;">) </span><span style="color: #0000ff;">print</span><span style="color: #000000;">(tag_list) dict </span>= {<span style="color: #800000;">"</span><span style="color: #800000;">blog</span><span style="color: #800000;">"</span><span style="color: #000000;">:blog, </span><span style="color: #800000;">"</span><span style="color: #800000;">article_list</span><span style="color: #800000;">"</span><span style="color: #000000;">:article_list, </span><span style="color: #800000;">"</span><span style="color: #800000;">category_count</span><span style="color: #800000;">"</span><span style="color: #000000;">:cate_list, </span><span style="color: #800000;">"</span><span style="color: #800000;">tag_count</span><span style="color: #800000;">"</span><span style="color: #000000;">:tag_list, } </span><span style="color: #0000ff;">return</span> render(request,<span style="color: #800000;">"</span><span style="color: #800000;">homesite.html</span><span style="color: #800000;">"</span>,dict)</pre>
修改homesite.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title><style> *<span style="color: #000000;">{ margin: 0; padding: 0; } .header{ width: </span>100%<span style="color: #000000;">; height: 59px; background</span>-color: <span style="color: #008000;">#</span><span style="color: #008000;">369;</span>}
.header .title{
line-height: 59px;
color: white;
font-weight: lighter;
margin-left: 20px;
font-size: 18px;
}.left_region{ margin</span>-<span style="color: #000000;">top: 10px; } .info{ margin</span>-<span style="color: #000000;">top: 10px; color: darkgray; } h5 a { color: </span><span style="color: #008000;">#</span><span style="color: #008000;">105cb6;</span> font-<span style="color: #000000;">size: 14px; font</span>-<span style="color: #000000;">weight: bold; text</span>-<span style="color: #000000;">decoration: underline; } </span></style> <link rel=<span style="color: #800000;">"</span><span style="color: #800000;">stylesheet</span><span style="color: #800000;">"</span> href=<span style="color: #800000;">"</span><span style="color: #800000;">/static/bootstrap/css/bootstrap.css</span><span style="color: #800000;">"</span>> <script src=<span style="color: #800000;">"</span><span style="color: #800000;">/static/js/jquery.js</span><span style="color: #800000;">"</span>></script> <script src=<span style="color: #800000;">"</span><span style="color: #800000;">/static/bootstrap/js/bootstrap.js</span><span style="color: #800000;">"</span>></script></head>
<body>
<div class="header">
<p class="title">{{ blog.title }}</p>
</div><div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="left_region">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">我的标签</h3>
</div>
{% for foo in category_count %}
<div class="panel-body">
{{ foo.title }}({{ foo.c }})
</div>{</span>% endfor %<span style="color: #000000;">} </span></div> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel panel-warning</span><span style="color: #800000;">"</span>> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-heading</span><span style="color: #800000;">"</span>> <h3 <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-title</span><span style="color: #800000;">"</span>>随笔分类</h3> </div><span style="color: #000000;"> {</span>% <span style="color: #0000ff;">for</span> foo <span style="color: #0000ff;">in</span> tag_count %<span style="color: #000000;">} </span><div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-body</span><span style="color: #800000;">"</span>><span style="color: #000000;"> {{ foo.title }}({{ foo.c }}) </span></div><span style="color: #000000;"> {</span>% endfor %<span style="color: #000000;">} </span></div> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel panel-info</span><span style="color: #800000;">"</span>> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-heading</span><span style="color: #800000;">"</span>> <h3 <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-title</span><span style="color: #800000;">"</span>>随笔档案</h3> </div> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">panel-body</span><span style="color: #800000;">"</span>><span style="color: #000000;"> Panel content </span></div> </div> </div> </div> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">col-md-9</span><span style="color: #800000;">"</span>> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">article_list</span><span style="color: #800000;">"</span>><span style="color: #000000;"> {</span>% <span style="color: #0000ff;">for</span> article <span style="color: #0000ff;">in</span> article_list %<span style="color: #000000;">} </span><div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">article_item clearfix</span><span style="color: #800000;">"</span>> <h5><a href=<span style="color: #800000;">""</span>>{{ article.title }}</a></h5> <div> <span <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">small desc </span><span style="color: #800000;">"</span>><span style="color: #000000;"> {{ article.desc }} </span></span> </div> <div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">info small pull-right</span><span style="color: #800000;">"</span>><span style="color: #000000;"> 发布于 </span><span>{{ article.create_time|date:<span style="color: #800000;">'</span><span style="color: #800000;">Y-m-d H:i</span><span style="color: #800000;">'</span> }}</span>&nbsp;&<span style="color: #000000;">nbsp; </span><img src=<span style="color: #800000;">"</span><span style="color: #800000;">/static/img/icon_comment.gif</span><span style="color: #800000;">"</span> alt=<span style="color: #800000;">""</span>><a href=<span style="color: #800000;">""</span>>评论({{ article.comment_count }})</a>&nbsp;&<span style="color: #000000;">nbsp; </span><span <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">glyphicon glyphicon-thumbs-up</span><span style="color: #800000;">"</span>></span><a href=<span style="color: #800000;">""</span>>点赞({{ article.up_count }})</a> </div> </div> <hr><span style="color: #000000;"> {</span>% endfor %<span style="color: #000000;">} </span></div> </div> </div></div>
</body>
</html>
进入admin后台，添加一个tag。增加一篇文章
重新访问个人站点网页，效果如下：
参考资料：
转载声明：
作者：肖祥
出处： https://www.cnblogs.com/xiao987334176/
黑发不知勤学早
