第 15 篇：優化博客功能的細節，提升使用體驗—— HelloDjango 系列教程

• 2019 年 10 月 3 日
• 筆記

作者：HelloGitHub-追夢人物

文中涉及的示例代碼，已同步更新到 HelloGitHub-Team 倉庫

在之前的系列教程中，我們已經實現了：文章的發佈、展示、評論等功能，可能認真的小夥伴已經發現這些功能有一些地方設計的不是很好，今天我們就來優化一些體驗和操作上的細節。讓我們的博客更加完美，使用起來更加順手～

在模型中指定排序

為了讓文章（Post）按發佈時間逆序排列，讓最新發表的文章排在文章列表的最前面，我們對返回的文章列表進行了排序，即各個視圖函數中都有類似於 Post.objects.all().order_by('-created_time') 這樣的代碼，導致了很多重複。因為只要是返回的文章列表，基本都是逆序排列的，所以可以在 Post 模型中指定 Post 的自然排序方式。

django 允許我們在 models.Model 的子類里定義一個名為 Meta 的內部類，通過這個內部類指定一些屬性的值來規定這個模型類該有的一些特性，例如在這裡我們要指定 Post 的排序方式。首先看到 Post 的代碼，在 Post 模型的內部定義的 Meta 類中，指定排序屬性 ordering：

blog/models.py    class Post(models.Model):      ...      created_time = models.DateTimeField()      ...        class Meta:          verbose_name = '文章'          verbose_name_plural = verbose_name          ordering = ['-created_time']

ordering 屬性用來指定文章排序方式，['-created_time'] 指定了依據哪個屬性的值進行排序，這裡指定為按照文章發佈時間排序，且負號表示逆序排列。列表中可以有多個項，比如 ordering = ['-created_time', 'title'] 表示首先依據 created_time 排序，如果 created_time 相同，則再依據 title 排序。這樣指定以後所有返回的文章列表都會自動按照 Meta 中指定的順序排序，因此可以刪掉視圖函數中對文章列表中返回結果進行排序的代碼了。

評論的模型類（Comment）也可以添加這個屬性。

完善跳轉鏈接

導航欄有一個 Black & White 的 Logo，我們希望點擊它就能回到首頁面，只需修改一下超鏈接即可。打開 base.html，修改 Logo 處的超鏈接：

<header id="site-header">    <div class="row">        <div class="logo">          <h1><a href="{% url 'blog:index' %}"><b>Black</b> &amp; White</a></h1>        </div>    ...    </div>  </header>

另外導航欄還有一個首頁導航按鈕，也希望點擊它就能回到首頁面，修改的任務作為練習交給你了（有兩處，一處是桌面端導航，另一處是移動端導航）。

當然還有一些跳轉可以完善，比如文章標題下有分類、發佈時間、作者、評論量、閱讀量等信息，可以設置點擊分類跳轉到分類頁面；點擊閱讀量就跳轉到文章詳情頁等，這些細節部分不涉及新知識，就當做練習交給你自己完成了。

顯示正確的評論量

有兩處地方顯示的評論量（首頁文章列表和文章詳情頁），顯示評論量的方法很簡單。回顧一下我們是如何獲取某篇文章下的評論列表的？我們使用的是 post.comment_set.all()。all 方法返回該 post 關聯的評論列表。此外模型管理器（comment_set 是一個特殊的模型管理器）還有一個 count 方法，返回的是數量，即 post 下有多少條評論，我們可以直接在模板中調用這個方法：{{ post.comment_set.count }}。將評論量替換成該模板變量就可以正確顯示文章的評論數了。

跳轉評論區域

有時候文章內容長了，評論列表的內容就需要滾動很長的頁面才能看到。我們可以在評論區域增加一個錨點，2 處顯示評論量的地方超鏈接都指向這個錨點處，這樣點擊這兩個地方將直接跳轉到評論列表區域，方便用戶快速查看評論內容。

看到顯示評論的模板代碼：

<section class="comment-area" id="comment-area">      <hr>      <h3>發表評論</h3>      ...  </section>

我們已經給評論區域的標籤設置了 id，只需要在評論的鏈接後加上這個 id 的錨點即可：

blog/index.html    <div class="entry-meta">      ...      <span class="comments-link"><a href="{{ post.get_absolute_url }}#comment-area">{{ post.comment_set.count }} 評論</a></span>      <span class="views-count"><a href="#">588 閱讀</a></span>  </div>

blog/detail.html    <header class="entry-header">      <h1 class="entry-title">{{ post.title }}</h1>          ...          <span class="comments-link"><a href="#comment-area">{{ post.comment_set.count }} 評論</a></span>          <span class="views-count"><a href="#">588 閱讀</a></span>      </div>  </header>

注意這裡從 index.html 到評論區域需要跳轉頁面，因此 href 超鏈接指定為絕對 URL，而文章詳情和評論區域在一個頁面，因此僅需指定錨點即可。

結束了么

我們通過一個博客實戰項目，了解了 django 基本的開發技術。包括如何編寫模型（Model）、如何編寫視圖函數（View）、如何使用 django 內置的模板系統（Template）以及如何配置路由（URL），這四大模塊是 django 開發的核心所在，現在我們已經能夠基本掌握這些模塊的使用方法了。

但是，還沒完…

Django 提供的不僅僅是這些，我們的博客也不僅僅只有這些功能。如何對博客文章進行分頁？如何給博客提供 RSS 訂閱服務？如果實現文章搜索？如果網站需要提供用戶系統，如何實現用戶的註冊登錄？如何部署到服務器上讓他人通過公網訪問？這些需求都可以利用 django 內置的模塊或者豐富的第三方應用來實現。

另外，django 還有海量的第三方應用來提供更加豐富的功能。比如當他人評論了我的文章時，如何收到通知提醒？網站需要提供新浪微博、微信等社交賬號的登錄等等，這些都可以藉助 django 第三方應用快速完成，而我們自己只需要寫很少量的代碼就可以了。

所以，讓我們再接再厲，進入到進階篇，繼續學習更多的 django 開發技巧，為博客提供更多的功能吧！

『講解開源項目系列』——讓對開源項目感興趣的人不再畏懼、讓開源項目的發起者不再孤單。跟着我們的文章，你會發現編程的樂趣、使用和發現參與開源項目如此簡單。歡迎留言聯繫我們、加入我們，讓更多人愛上開源、貢獻開源～