個人站點頁面搭建和側邊欄展示功能

展示個人站點頁面

前端代碼：和首頁文章展示基本一樣：

<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>