个人站点页面搭建和侧边栏展示功能

展示个人站点页面

前端代码：和首页文章展示基本一样：

<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>&nbsp;
                            <span>发布于：{{ article.create_time|date:\'Y-m-d\' }}</span>&nbsp;
                            <span class=\"glyphicon glyphicon-thumbs-up\">点赞数：({{ article.up_num }})</span>&nbsp;
                            <span class=\"glyphicon glyphicon-comment\">评论数：({{ article.comment_num }})</span>&nbsp;
                        </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>

来源：https://www.cnblogs.com/suncolor/p/16769347.html
本站部分图文来源于网络，如有侵权请联系删除。