个人站点页面搭建和侧边栏展示功能
展示个人站点页面
前端代码:和首页文章展示基本一样:
<div class="col-md-8">
{% for article in article_list %}
<ul class="media-list">
<li class="media">
<a href=""><h4 class="media-heading">{{ article.title }}</h4></a>
<div class="media-left">
<a href="#">
<img class="media-object" src="/media/{{ article.blog.userinfo.avatar }}/" alt="..." width="60">
</a>
</div>
<div class="media-body">
{{ article.desc }}
</div>
<br>
<div class="pull-right">
<span><a href="">{{ article.blog.userinfo.username }}</a></span>
<span>发布于:{{ article.create_time|date:"Y-m-d" }}</span>
<span class="glyphicon glyphicon-thumbs-up">点赞数:({{ article.up_num }})</span>
<span class="glyphicon glyphicon-comment">评论数:({{ article.comment_num }})</span>
</div>
</li>
</ul>
<br>
{% endfor %}
</div>
后端代码:在url中需要手动输入不同的用户名,所以需要视图函数需要输入参数username
def site(request,username):
# 1.先查出手动输入的username对应的用户对象
user_obj = models.UserInfo.objects.filter(username=username).first()
# 2.如果输入的用户名不存在,则报错跳转404页面
if not user_obj:
return render(request,"error.html")
# 3.查询出个人用户对应的个人站点
blog = user_obj.blog
# 4.根据个人站点查出对应的文章
article_list = models.Article.objects.filter(blog=blog)
return render(request,"site.html",locals())
侧边栏展示功能
补充小知识点:个人站点样式搭建
对于不同个人站点需要不同样式时,我们可以在media文件夹下新建一个css文件夹,里面可以存放用户上传的不同css文件,再在个人站点html页面下面添加对应站点的css文件!!
<link rel="stylesheet" href="/media/css/{{ user_obj.username }}.css">
侧边栏展示了三大版块,分别是:文章分类、文章标签、日期归档!
文章分类和文章标签的书写和渲染,只要将其在后端对应查询出来,如何传入前端页面,交给模板页面渲染即可!
后端:
# 5.侧边栏数据传入
# (1)查询出当前用户所有的分类及分类下的文章数
category_list = models.Category.objects.filter(blog=blog).annotate(count_num=Count("article__pk")).values_list("name","count_num")
# print(category_list) 格式为:<QuerySet [("zhang的分类1", 2), ("zhang的分类2", 1), ("zhang的分类3", 2)]>
# (2)查询出当前用户的所有标签和标签下的文章数
tag_list = models.Tag.objects.filter(blog=blog).annotate(count_num=Count("article__pk")).values_list("name","count_num")
# print(tag_list) 格式为:<QuerySet [("zhang的标签1", 3), ("zhang的标签2", 2), ("zhang的标签3", 2)]>
前端:
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">文章分类</h3>
</div>
<div class="panel-body">
{% for category in category_list %}
<p><a href="">{{ category.0 }}({{ category.1 }})</a></p>
{% endfor %}
</div>
</div>
关于日期归档版块的渲染:
我们在创建文章的时候,create_time字段是包含年月日时分秒的,而我们进行日期归档的时候往往是按照年月进行归档的!
所有,这时候就需要用到django官方提供的一个TruncMonth模块
它的功能是能够帮您在生成一个临时的查询表,新增了一个年月的字段,如何按这个字段进行分组查询
from django.db.models.functions import TruncMonth
后端:
# (3)按照年月统计出当前用户所有的文章
data_list = models.Article.objects.filter(blog=blog).annotate(month=TruncMonth("create_time")).values("month").annotate(count_num=Count("pk")).values("month","count_num")
# print(data_list)
# 这句查询语句的意思是先查出当前用户,然后利用TruncMonth对create_time进行过滤新增一个month年月字段,然后.values按照month字段分组,统计出当前文章的个数,最后取值!
前端:
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">日期归档</h3>
</div>
<div class="panel-body">
{% for data in data_list %}
<p><a href="">{{ data.month|date:"Y年m月" }}({{ data.count_num }})</a></p>
{% endfor %}
</div>
</div>