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

展示個人站點頁面

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

<div >
            {% for article in article_list %}
                <ul >
                    <li >
                        <a href=""><h4 >{{ article.title }}</h4></a>
                        <div >
                            <a href="https://www.cnblogs.com/suncolor/archive/2022/10/08/#">
                                <img  src="https://www.cnblogs.com/media/{{ article.blog.userinfo.avatar }}/" alt="..." >
                            </a>
                        </div>
                        <div >
                            {{ article.desc }}
                        </div>
                        <br>
                        <div >
                            <span><a href="">{{ article.blog.userinfo.username }}</a></span>&nbsp;
                            <span>發布于：{{ article.create_time|date:'Y-m-d' }}</span>&nbsp;
                            <span >點贊數：({{ article.up_num }})</span>&nbsp;
                            <span >評論數：({{ 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="https://www.cnblogs.com/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 >
                <div >
                    <h3 >文章分類</h3>
                </div>
                <div >
                    {% 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 >
                <div >
                    <h3 >日期歸檔</h3>
                </div>
                <div >
                    {% for data in data_list %}
                        <p><a href="">{{ data.month|date:'Y年m月' }}({{ data.count_num }})</a></p>
                    {% endfor %}
                </div>
            </div>

標籤：其他

上一篇：下班在家沒事干？教大家用Python做一個任何視頻都能看的軟體， 當然，只能看正經的！

下一篇：BinaryBombs（二進制炸彈實驗）