本教程內容已過時，更新版教程請訪問： Django 博客開發(fā)入門教程。

這是 Django 博客教程的第 9 篇，在閱讀此篇教程以前，請確保你已閱讀 Django 博客教程的前 8 篇：
1. Django 博客教程：前言
2. 搭建開發(fā)環(huán)境
3. 建立我們的 django 博客應用
4. 創(chuàng)建 django 博客的數據庫模型
5. 讓 django 完成翻譯——遷移數據庫模型
6. django 博客首頁視圖
7. 真正的 django 博客首頁視圖
8. 在 django admin 后臺發(fā)布我們的文章

首頁展示的是所有文章的列表，當用戶看到感興趣的文章時，他點擊文章的標題或者繼續(xù)閱讀的按鈕，應該跳轉到文章的詳情頁面來閱讀文章的詳細內容。本節(jié)我們來開發(fā)博客的詳情頁面，有了前面的基礎，套路都是一樣的了：首先把相關的 url 和視圖函數綁定在一起，然后實現視圖函數，編寫響應的模板讓視圖函數渲染模板。

回顧一下我們首頁視圖的 url，在 blog/urls.py 文件里，我們寫了：

from django.conf.urls import url

from . import views

urlpatterns = [
    url(r'^$', views.index, name='index'),
]

首頁視圖匹配的 url 去掉域名后其實就是一個空的字符串。對文章詳情視圖而言，每篇文章對應著不同的 url。比如我們可以把文章詳情頁面對應的視圖設計成這個樣子：當用戶訪問 <網站域名>/post/1/ 時，顯示的是第一篇文章的內容，而當用戶訪問 <網站域名>/post/2/ 時，顯示的是第二篇文章的內容，這里數字代表了第幾篇文章，也就是數據庫中 Post 記錄的 id。下面依照這個規(guī)則來綁定 url 和視圖：

from django.conf.urls import url

from . import views

app_name = 'blog'
urlpatterns = [
    url(r'^$', views.index, name='index'),
    url(r'^post/(?P<pk>[0-9]+)/$', views.detail, name='detail'),
]

django 使用正則表達式來匹配對應的域名。這里 r'^post/[0-9]+/$' 整個正則表達式剛好匹配我們上面定義的 url 規(guī)則。這條正則表達式的含義是，以 post/ 開頭，后跟一個至少一位數的數字，并且以 / 符號結尾，如 /post/1/、 /post/255/ 等都是符合規(guī)則的，[0-9]+ 表示數字 0 到 9 重復至少一次的數字。此外我們這里 (?P<pk>[0-9]+) 表示命名捕獲組，其作用是從用戶訪問的 url 里把括號內匹配的字符串捕獲并作為關鍵字參數傳給視圖函數 detail。比如當用戶訪問 /post/255/ 時（注意 django 并不關心域名，而只關心去掉域名后的相對 url），被括起來的部分 (?P<pk>[0-9]+) 匹配 255，那么這個 255 會在調用視圖函數 detail 時被傳遞進去，實際上視圖函數的調用就是這個樣子：detail(request, pk=255)。我們這里必須從 url 里捕獲文章的 id，因為只有這樣我們才能知道用戶訪問的是那篇文章。

此外我們通過 app_name='blog' 告訴 django 這個 urls.py 模塊是屬于 blog 應用的，其具體作用會在下面介紹。

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

blog/models.py

from django.db import models
from django.utils.six import python_2_unicode_compatible

# 導入 reverse 函數
from django.urls import reverse

@python_2_unicode_compatible
class Category(models.Model):
    ...


@python_2_unicode_compatible
class Tag(models.Model):
    ...


@python_2_unicode_compatible
class Post(models.Model):
    ...

    def __str__(self):
        return self.title
    
    # 自定義 get_absolute_url 方法
    def get_absolute_url(self):
        return reverse('blog:detail', kwargs={'pk': self.pk})

注意到 URL 配置中 url(r'^post/(?P<pk>[0-9]+)/$', views.detail, name='detail') ，我們設定、的 name='detail'，這里派上了用場。看到這個 reverse 函數，它的第一個參數的值是 'blog:detail'，意思是 blog 應用下的 name=detail 函數，由于我們在上面通過 app_name = 'blog' 告訴了 django 這個 URL 模塊是屬于 blog 應用的，因此 django 能夠順利地找到 blog 應用下 name 為 detail 的視圖函數，于是 django 會去解析這個視圖函數對應的 url，我們這里 detail 對應的規(guī)則就是 post/(?P<pk>[0-9]+)/ 這個正則表達式規(guī)則，而正則表達式部分會被后面?zhèn)魅氲膮?pk 替換，所以，如果 post 的 id 是 255 的話，那么 get_absolute_url 函數返回的就是 /post/255/ ，這樣 Post 自己就生成了自己的 url。

接下來就是實現我們的 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）獲取我們的 post，然后傳遞給模板。注意這里我們用到了從 django.shortcuts 模塊導入的 get_object_or_404 方法，其作用就是當傳入的 pk 對應的 Post 在數據庫存在時，就返回找到的 post，如果不存在，就給用戶返回一個 404 錯誤，表明用戶請求的文章不存在。

接下來就是書寫模板文件，從文件夾中把 single.html 拷貝到 template/blog 的目錄下（和 index.html 在同一級目錄），然后改名為 detail.html。在 index 頁面博客文章列表的標題和繼續(xù)閱讀按鈕填上鏈接，讓用戶點擊后可以跳轉到 detail 頁面：

templates/index.html

<article class="post post-1">
  <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">繼續(xù)閱讀 <span class="meta-nav">→</span></a>
    </div>
  </div>
</article>
{% empty %}
<div class="no-post">暫時還沒有發(fā)布的文章！</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。

同樣，第二處修改的是繼續(xù)閱讀按鈕的鏈接：

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

這樣當我們點擊首頁文章的標題或者繼續(xù)閱讀按鈕后就會跳轉到該篇文章對應的詳情頁面了。然而如果你嘗試跳轉到詳情頁后，你會發(fā)現樣式是亂的。這在[寫首頁視圖函數][]時講過，由于我們直接復制的模板，還沒有正確地處理靜態(tài)文件。我們可以按照那一節(jié)的方法修改靜態(tài)文件的引入路徑，但是很麻煩。你會發(fā)現在任何頁面都是需要引入這些靜態(tài)文件的，如果每個頁面都要修改會很麻煩，而且代碼都是重復的。下面就介紹 django 模板繼承的方法來幫我們消除這些重復操作。

我們看到 index.html 文件和 detail.html 文件除了 main 包裹的部分不同外，其他地方都是相同的，我們可以把相同的部分抽取出來，放到 base.html 里。首先在 templates 目錄下新建一個 base.html 文件，把 index.html 的內容全部拷貝過來，然后刪掉 main 標簽包裹的內容，替換成如下的內容。

templates/base.html

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

這里 {% block main %}{% endblock main %} 是一個占位框，下面我們會看到它的作用。、

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

{% extends 'base.html' %}

{% block main %}
    {% for post in post_list %}
        <article class="post post-1">
          ...
        </article>
    {% empty %}
        <div class="no-post">暫時還沒有發(fā)布的文章！</div>
    {% endfor %}
{% endblock main %}

這樣 base.html 里的代碼加上 {% block main %}{% endblock main %} 里的代碼就和最開始 index.html 里的代碼一樣了。這就是模板繼承的作用，公共部分的代碼放在 base.html 里，不同部分的代碼通過替換 {% block main %}{% endblock main %} 占位框里的內容即可。

detail 頁面處理起來就簡單了，同樣繼承 base.html ，在 {% block main %}{% endblock main %} 里填充 detail.html 頁面應該顯示的內容。

blog/detail.html

{% extends 'base.html' %}

{% block main %}
    <article class="post post-1">
      ...
    </article>
{% endblock main %}

修改 article 標簽下的一些內容，讓其顯示文章的實際數據。

<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 Comments</a></span>
  </div>
</header>
<div class="entry-content clearfix">
  {{ post.body }}
</div>

再次從首頁點擊一篇文章的標題跳轉到詳情頁面，可以看到預期效果了！