作者：HelloGitHub-追夢人物

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

首頁展示的是所有文章的列表，當用戶看到感興趣的文章時，他點選文章的標題或者繼續閱讀的按鈕，應該跳轉到文章的詳情頁面來閱讀文章的詳細內容。現在讓我們來開發部落格的詳情頁面，有了前面的基礎，開發流程都是一樣的了：首先配置 URL，即把相關的 URL 和檢視函式繫結在一起，然後實現檢視函式，編寫模板並讓檢視函式渲染模板。

設計文章詳情頁的 URL

回顧一下我們首頁檢視的 URL，在 blog\urls.py 檔案裡，我們寫了：

blog/urls.py

from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
]
 

首頁檢視匹配的 URL 去掉域名後其實就是一個空的字串。對文章詳情檢視而言，每篇文章對應著不同的 URL。比如我們可以把文章詳情頁面對應的檢視設計成這個樣子：當用戶訪問 <網站域名>/posts/1/ 時，顯示的是第一篇文章的內容，而當用戶訪問 <網站域名>/posts/2/ 時，顯示的是第二篇文章的內容，這裡數字代表了第幾篇文章，也就是資料庫中 Post 記錄的 id 值。下面依照這個規則來繫結 URL 和檢視：

blog/urls.py

from django.urls import path

from . import views

app_name = 'blog'
urlpatterns = [
    path('', views.index, name='index'),
    path('posts/<int:pk>/', views.detail, name='detail'),
]
 

這裡 'posts/<int:pk>/' 剛好匹配我們上面定義的 URL 規則。這條規則的含義是，以 posts/ 開頭，後跟一個整數，並且以 / 符號結尾，如 posts/1/、 posts/255/ 等都是符合規則的，此外這裡 <int:pk> 是 django 路由匹配規則的特殊寫法，其作用是從使用者訪問的 URL 裡把匹配到的數字捕獲並作為關鍵字引數傳給其對應的檢視函式 detail。比如當用戶訪問 posts/255/ 時（注意 django 並不關心域名，而只關心去掉域名後的相對 URL），<int:pk> 匹配 255，那麼這個 255 會在呼叫檢視函式 detail 時被傳遞進去，其引數名就是冒號後面指定的名字 pk，實際上檢視函式的呼叫就是這個樣子：detail(request, pk=255)

Tip:

django 的路由匹配規則有很多型別，除了這裡的 int 整數型別，還有 str 字元型別、uuid 等，可以通過官方文件瞭解：Path converters

此外我們通過 app_name='blog' 告訴 django 這個 urls.py 模組是屬於 blog 應用的，這種技術叫做檢視函式名稱空間。我們看到 blog\urls.py 目前有兩個檢視函式，並且通過 name 屬性給這些檢視函式取了個別名，分別是 index、detail。但是一個複雜的 django 專案可能不止這些檢視函式，例如一些第三方應用中也可能有叫 index、detail 的檢視函式，那麼怎麼把它們區分開來，防止衝突呢？方法就是通過 app_name 來指定名稱空間，名稱空間具體如何使用將在下面介紹。如果你忘了在 blog\urls.py 中新增這一句，接下來你可能會得到一個 NoMatchReversed 異常。

為了方便地生成上述的 URL，我們在 Post 類裡定義一個 get_absolute_url 方法，注意 Post 本身是一個 Python 類，在類中我們是可以定義任何方法的。

blog/models.py

from django.contrib.auth.models import User
from django.db import models
from django.urls import reverse
from django.utils import timezone

class Post(models.Model):
    ...

    def __str__(self):
        return self.title
    
    # 自定義 get_absolute_url 方法
    # 記得從 django.urls 中匯入 reverse 函式
    def get_absolute_url(self):
        return reverse('blog:detail', kwargs={'pk': self.pk})

注意到 URL 配置中的 path('posts/<int:pk>/', views.detail, name='detail') ，我們設定的 name='detail' 在這裡派上了用場。看到這個 reverse 函式，它的第一個引數的值是 'blog:detail'，意思是 blog 應用下的 name=detail 的函式，由於我們在上面通過 app_name = 'blog' 告訴了 django 這個 URL 模組是屬於 blog 應用的，因此 django 能夠順利地找到 blog 應用下 name 為 detail 的檢視函式，於是 reverse 函式會去解析這個檢視函式對應的 URL，我們這裡 detail 對應的規則就是 posts/<int:pk>/ int 部分會被後面傳入的引數 pk 替換，所以，如果 Post 的 id（或者 pk，這裡 pk 和 id 是等價的） 是 255 的話，那麼 get_absolute_url 函式返回的就是 /posts/255/ ，這樣 Post 自己就生成了自己的 URL。

編寫 detail 檢視函式

接下來就是實現我們的 detail 檢視函數了：

blog/views.py

from django.shortcuts import render, get_object_or_404
from .models import Post

def index(request):
    # ...

def detail(request, pk):
    post = get_object_or_404(Post, pk=pk)
    return render(request, 'blog/detail.html', context={'post': post})

檢視函式很簡單，它根據我們從 URL 捕獲的文章 id（也就是 pk，這裡 pk 和 id 是等價的）獲取資料庫中文章 id 為該值的記錄，然後傳遞給模板。注意這裡我們用到了從 django.shortcuts 模組匯入的 get_object_or_404 方法，其作用就是當傳入的 pk 對應的 Post 在資料庫存在時，就返回對應的 post，如果不存在，就給使用者返回一個 404 錯誤，表明使用者請求的文章不存在。

編寫詳情頁模板

接下來就是書寫模板檔案，從下載的部落格模板（如果你還沒有下載，請 點選這裡 下載）中把 single.html 拷貝到 templates\blog 目錄下（和 index.html 在同一級目錄），然後改名為 detail.html。此時你的目錄結構應該像這個樣子：

blogproject\
    manage.py
    blogproject\
        __init__.py
        settings.py
        ...
    blog/
        __init__.py
        models.py
        ,,,
    templates\
        blog\
            index.html
            detail.html

在 index 頁面部落格文章列表的標題和繼續閱讀按鈕寫上超連結跳轉的連結，即文章 post 對應的詳情頁的 URL，讓使用者點選後可以跳轉到 detail 頁面：

templates/blog/index.html

<article class="post post-{{ post.pk }}">
  <header class="entry-header">
    <h1 class="entry-title">
      <a href="{{ post.get_absolute_url }}">{{ post.title }}</a>
    </h1>
    ...
  </header>
  <div class="entry-content clearfix">
    ...
    <div class="read-more cl-effect-14">
      <a href="{{ post.get_absolute_url }}" class="more-link">繼續閱讀 <span class="meta-nav">→</span></a>
    </div>
  </div>
</article>
{% empty %}
  <div class="no-post">暫時還沒有釋出的文章！</div>
{% endfor %}

這裡我們修改兩個地方，第一個是文章標題處：

<h1 class="entry-title">
  <a href="{{ post.get_absolute_url }}">{{ post.title }}</a>
</h1>

我們把 a 標籤的 href 屬性的值改成了 {{ post.get_absolute_url }}。回顧一下模板變數的用法，由於 get_absolute_url 這個方法（我們定義在 Post 類中的）返回的是 post 對應的 URL，因此這裡 {{ post.get_absolute_url }} 最終會被替換成該 post 自身的 URL。

同樣，第二處修改的是繼續閱讀按鈕的連結：

<a href="{{ post.get_absolute_url }}" class="more-link">繼續閱讀 <span class="meta-nav">→</span>
</a>

這樣當我們點選首頁文章的標題或者繼續閱讀按鈕後就會跳轉到該篇文章對應的詳情頁面了。然而如果你嘗試跳轉到詳情頁後，你會發現樣式是亂的。這在 部落格從“裸奔”到“有面板” 時講過，由於我們是直接複製的模板，還沒有正確地處理靜態檔案。我們可以按照介紹過的方法修改靜態檔案的引入路徑，但很快你會發現在任何頁面都是需要引入這些靜態檔案，如果每個頁面都要修改會很麻煩，而且程式碼都是重複的。下面就介紹 django 模板繼承的方法來幫我們消除這些重複操作。

模板繼承

我們看到 index.html 檔案和 detail.html 檔案除了 main 標籤包裹的部分不同外，其它地方都是相同的，我們可以把相同的部分抽取出來，放到 base.html 裡。首先在 templates 目錄下新建一個 base.html 檔案，這時候你的專案目錄應該變成了這個樣子：

blogproject\
    manage.py
    blogproject\
        __init__.py
        settings.py
        ...
    blog\
        __init__.py
        models.py
        ,,,
    templates\
        base.html
        blog\
            index.html
            detail.html

把 index.html 的內容全部拷貝到 base.html 檔案裡，然後刪掉 main 標籤包裹的內容，替換成如下的內容。

templates/base.html

...
<main class="col-md-8">
    {% block main %}
    {% endblock main %}
</main>
<aside class="col-md-4">
  {% block toc %}
  {% endblock toc %}
  ...
</aside>
...

這裡 block 也是一個模板標籤，其作用是佔位。比如這裡的 {% block main %}{% endblock main %} 是一個佔位框，main 是我們給這個 block 取的名字。下面我們會看到 block 標籤的作用。同時我們也在 aside 標籤下加了一個 {% block toc %}{% endblock toc %} 佔位框，因為 detail.html 中 aside 標籤下會多一個目錄欄。當 {% block toc %}{% endblock toc %} 中沒有任何內容時，{% block toc %}{% endblock toc %} 在模板中不會顯示。但當其中有內容是，模板就會顯示 block 中的內容。

在 index.html 裡，我們在檔案最頂部使用 {% extends 'base.html' %} 繼承 base.html，這樣就把 base.html 裡的程式碼繼承了過來，另外在 {% block main %}{% endblock main %} 包裹的地方填上 index 頁面應該顯示的內容：

templates/blog/index.html

{% extends 'base.html' %}

{% block main %}
    {% for post in post_list %}
        <article class="post post-1">
          ...
        </article>
    {% empty %}
        <div class="no-post">暫時還沒有釋出的文章！</div>
    {% endfor %}
    <!-- 簡單分頁效果
    <div class="pagination-simple">
        <a href="#">上一頁</a>
        <span class="current">第 6 頁 / 共 11 頁</span>
        <a href="#">下一頁</a>
    </div>
    -->
    <div class="pagination">
      ...
    </div>
{% endblock main %}

這樣 base.html 裡的程式碼加上 {% block main %}{% endblock main %} 裡的程式碼就和最開始 index.html 裡的程式碼一樣了。這就是模板繼承的作用，公共部分的程式碼放在 base.html 裡，而其它頁面不同的部分通過替換 {% block main %}{% endblock main %} 佔位標籤裡的內容即可。

如果你對這種模板繼承還是有點糊塗，可以把這種繼承和 Python 中類的繼承類比。base.html 就是父類，index.html 就是子類。index.html 繼承了 base.html 中的全部內容，同時它自身還有一些內容，這些內容就通過 “覆寫” {% block main %}{% endblock main %}（把 block 看做是父類的屬性）的內容新增即可。

detail 頁面處理起來就簡單了，同樣繼承 base.html ，在 {% block main %}{% endblock main %} 裡填充 detail.html 頁面應該顯示的內容，以及在 {% block toc %}{% endblock toc %} 中填寫 base.html 中沒有的目錄部分的內容。不過目前的目錄只是佔位資料，我們在以後會實現如何從文章中自動摘取目錄。

templates/blog/detail.html

{% extends 'base.html' %}

{% block main %}
    <article class="post post-1">
      ...
    </article>
    <section class="comment-area">
      ...
    </section>
{% endblock main %}
{% block toc %}
    <div class="widget widget-content">
        <h3 class="widget-title">文章目錄</h3>
        <ul>
            <li>
                <a href="#">教程特點</a>
            </li>
            <li>
                <a href="#">誰適合這個教程</a>
            </li>
            <li>
                <a href="#">線上預覽</a>
            </li>
            <li>
                <a href="#">資源列表</a>
            </li>
            <li>
                <a href="#">獲取幫助</a>
            </li>
        </ul>
    </div>
{% endblock toc %}

修改 article 標籤下的一些內容，讓其顯示文章的實際資料：

<article class="post post-{{ post.pk }}">
  <header class="entry-header">
    <h1 class="entry-title">{{ post.title }}</h1>
    <div class="entry-meta">
      <span class="post-category"><a href="#">{{ post.category.name }}</a></span>
      <span class="post-date"><a href="#"><time class="entry-date"
                                                datetime="{{ post.created_time }}">{{ post.created_time }}</time></a></span>
      <span class="post-author"><a href="#">{{ post.author }}</a></span>
      <span class="comments-link"><a href="#">4 評論</a></span>
      <span class="views-count"><a href="#">588 閱讀</a></span>
    </div>
  </header>
  <div class="entry-content clearfix">
    {{ post.body }}
  </div>
</article>

再次從首頁點選一篇文章的標題或者繼續閱讀按鈕跳轉到詳情頁面，可以看到預期效果了！

歡迎關注 HelloGitHub 公眾號，獲取更多開源專案的資料和內容<