Django搭建個人博客：編寫文章詳情頁面

有了文章列表頁面後，當然還需要詳情頁面，方便用戶對某一篇感興趣的文章深入閱讀。

編寫視圖函數

打開article/views.py，增加文章詳情頁面的視圖函數article_detail()：

article/views.py

...

# 文章詳情
def article_detail(request, id):
	# 取出相應的文章
	article = ArticlePost.objects.get(id=id)
	# 需要傳遞給模板的對象
	context = { 'article': article }
	# 載入模板，並返回context對象
	return render(request, 'article/detail.html', context)

• article_detail(request, id)函數中多了id這個參數。**注意我們在寫model的時候並沒有寫叫做id的字段，**這是Django自動生成的用於索引數據表的主鍵（Primary Key，即pk）。有了它纔有辦法知道到底應該取出哪篇文章。
• ArticlePost.objects.get(id=id)意思是在所有文章中，取出id值相符合的唯一的一篇文章。

然後編寫article/urls.py，配置路由地址：

article/urls.py

...

urlpatterns = [
	...
	
    # 文章詳情
    path('article-detail/<int:id>/', views.article_detail, name='article_detail'),
]

<int:id>：Django2.0的path新語法用**尖括號<>**定義需要傳遞的參數。這裏需要傳遞名叫id的整數到視圖函數中去。

重申一下老版本的Django是沒有path語法的。

編寫模板

在templates/article/中新建detail.html文件，編寫如下代碼：

templates/article/detail.html

<!-- extends表明此頁面繼承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}

<!-- 寫入 base.html 中定義的 title -->
{% block title %}
    文章詳情
{% endblock title %}

<!-- 寫入 base.html 中定義的 content -->
{% block content %}

<!-- 文章詳情 -->
<div class="container">
	<div class="row">
		<!-- 標題及作者 -->
		<h1 class="col-12 mt-4 mb-4">{{ article.title }}</h1>
		<div class="col-12 alert alert-success">作者：{{ article.author }}</div>
		<!-- 文章正文 -->
		<div class="col-12">
			<p>{{ article.body }}</p>
		</div>
	</div>
</div>

{% endblock content %}

這裏我們用{{ article.xxx }}取出了文章標題、作者以及正文。

前面我們已經通過後臺創建了幾篇文章，這裏將取出id爲1的一篇文章測試效果。

運行開發服務器後，在瀏覽器中輸入http://127.0.0.1:8000/article/article-detail/1/：

優化網頁入口

雖然已經實現了文章詳情功能，但是通過輸入url訪問的方式實在太不友好。

改寫header.html，讓用戶可通過導航欄右側的文章鏈接返回首頁：

templates/header.html

...
<div>
    <ul class="navbar-nav">
        <li class="nav-item">
        
            <!-- 改寫了這裏的 href --> 
            <a class="nav-link" href="{% url 'article:article_list' %}">文章</a>
          
        </li>
    </ul>
</div>

...

注意看這裏href是如何改寫的：

• href定義了鏈接跳轉的地址
• {% url '...' %}是Django規定的語法，用於指明具體地址
• 關於其中的'article:article_list'的解釋：
  • 前面的article是在項目根目錄的urls.py中定義的app的名稱
  • 後面的article_list是在app中的urls.py中定義的具體的路由地址

通過這樣的方法就將鏈接跳轉的指向給配置好了，只要對應url的名稱不變，url本身無論怎麼變化，Django都可以解析到正確的地址，很靈活。

當然你也可以直接在href中寫入url的地址，但是一旦url有變化，所有相關的鏈接都會失效，降低維護性。

然後再改寫list.html，讓用戶可點擊閱讀本文按鈕進入文章詳情：

templates/article/list.html

...

<div class="card-footer">

    <!-- 同樣改寫 href -->
    <a href="{% url 'article:article_detail' article.id %}" class="btn btn-primary">閱讀本文</a>
    
</div>

...

留意文章的id是如何傳遞的：

• 在list.html中，通過href="{% url 'article:article_detail' article.id %}"，將id傳遞給article/urls.py
• 在article/urls.py中，通過<int:id>傳遞給視圖函數article_detail()
• 在視圖函數article_detail()中，通過形參id取得了文章的id值，並進行處理，最終定位了需要獲取的文章對象

現在我們可以通過鏈接訪問網站上的不同頁面了，而不需要手動輸入url。當然這也是現代網站的基礎。

總結

現在我們也擁有查看文章詳情的功能了，並且優化了網頁切換的體驗。

下一章將學習使用Markdown語法對文章正文進行排版。

• 有疑問請在杜賽的個人網站留言，我會盡快回復。
• 或Email私信我：[email protected]
• 項目完整代碼：Django_blog_tutorial

轉載請告知作者並註明出處。