從0到1搭建個人部落格-Django(六)
你好，我是goldsunC
讓我們一起進步吧！
從0到1搭建個人部落格-Django(六)
在以下連結快速回顧系列文章內容
從0到1搭建個人部落格-Django(一)
從0到1搭建個人部落格-Django(二)
從0到1搭建個人部落格-Django(三)
從0到1搭建個人部落格-Django(四)
從0到1搭建個人部落格-Django(五)
編寫模板
在專案目錄下的templates下新建三個檔案：
base.html：它是整個專案的頁面基礎，所有其它的網頁都繼承它。header.html：它是網頁頂部的導航欄。footer.html：它是網頁底部的註腳。
建立完成之後template和article資料夾目錄如下所示：
templates
│ base.html
│ footer.html
│ header.html
│
└─article
list.html
然後我們開始編寫模板，首先開啟base.html，寫入以下程式碼：
<!DOCTYPE html>
<!--
載入靜態檔案
使用 Django 3 學習的讀者改為 {% load static %}
-->
{% load staticfiles %}
<!-- 網站主語言 -->
<html lang="zh-cn">
<head>
<!-- 網站採用的字元編碼 -->
<meta charset="utf-8">
<!-- 預留網站標題的位置 -->
<title>{% block title %}{% endblock %}</title>
<!-- 引入bootstrap的css檔案 -->
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
</head>
<body>
<!-- 引入導航欄 -->
{% include 'header.html' %}
<!-- 預留具體頁面的位置 -->
{% block content %}{% endblock content %}
<!-- 引入註腳 -->
{% include 'footer.html' %}
<!-- bootstrap.js 依賴 jquery.js 和popper.js，因此在這裡引入 -->
<script src="{% static 'jquery/jquery-3.3.1.js' %}"></script>
<!--
popper.js 採用 cdn 遠端引入，意思是你不需要把它下載到本地。
在實際的開發中推薦靜態檔案儘量都使用 cdn 的形式。
教學採用本地引入是為了讓讀者瞭解靜態檔案本地部署的流程。
-->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1-lts/dist/umd/popper.min.js"></script>
<!-- 引入bootstrap的js檔案 -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>
然後開啟header.html，寫入以下程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 定義導航欄 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<!-- 導航欄商標 -->
<a class="navbar-brand" href="#">我的部落格</a>
<!-- 導航入口 -->
<div>
<ul class="navbar-nav">
<!-- 條目 -->
<li class="nav-item">
<a class="nav-link" href="#">文章</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
接著開啟footer.html，寫入以下程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% load staticfiles %}
<!-- Footer -->
<div>
<br><br><br>
</div>
<footer class="py-3 bg-dark fixed-bottom">
<div class="container">
<p class="m-0 text-center text-white">Copyright © goldsunC愛程式設計 2020</p>
</div>
</footer>
</body>
</html>
最後開啟之前的list.html，寫入如下程式碼：
<!DOCTYPE html>
<!-- extends表明此頁面繼承自 base.html 檔案 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 寫入 base.html 中定義的 title -->
{% block title %}
首頁
{% endblock title %}
<!-- 寫入 base.html 中定義的 content -->
{% block content %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的部落格</title>
</head>
<body>
<!-- 定義放置文章標題的div容器 -->
<div class="container">
<div class="row mt-2">
{% for article in articles %}
<!-- 文章內容 -->
<div class="col-4 mb-4">
<!-- 卡片容器 -->
<div class="card h-100">
<!-- 標題 -->
<h4 class="card-header">{{ article.title }}</h4>
<!-- 摘要 -->
<div class="card-body">
<p class="card-text">{{ article.body|slice:'100' }}...</p>
</div>
<!-- 註腳 -->
<div class="card-footer">
<a href="#" class="btn btn-primary">閱讀本文</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock content %}
</body>
</html>
這個時候啟動伺服器，輸入網址http://127.0.0.1:8000/article/article-list/，看看出現了什麼：
一個簡單的部落格頁面就出現在我們眼前了，如何？現在你可以隨便點點試試，比如點選那個藍色的閱讀原文，點了之後並沒有發生什麼。是的，這是我們還沒有給它分配路由、分配檢視函數等操作，接下來我們增加文章詳情頁。
增加檢視函數
開啟article/views.py，增加函數article_detail()：
# 注意是是增加，不要把之前的article_list函數刪除了
# 顯示文章詳情
def article_detail(request, id):
# 取出相應文章
article = ArticlePost.objects.get(id=id)
# 需要傳遞給模板的物件
context = {'article':article}
# 載入模板，返回context物件
return render(request, 'article/detail.html',context)
這裡除了傳入request這個HTTP請求外，還有一個id，這個id並不是我們建立的模型類引數，它是Django自動生成的用於索引資料表的主鍵。不信你開啟資料庫看看，裡面有自動生成的id主鍵。
檢視函數編寫好了，然後呢？當然是給檢視設定路由地址，開啟article/urls.py，在urlpatterns中增加如下程式碼：
# 文章詳情
path('article-detail/<int:id>/', views.article_detail, name='article_detail'),
這裡的<int:id>是Django2中path的新語法，用尖括號<>定義需要傳遞的引數。這裡需要傳遞名為id的整數到檢視函數中去。
編寫文章詳情模板
在templates/article/中新建detail.html檔案，輸入如下程式碼：
<!DOCTYPE html>
<!-- extends表明此頁面繼承自 base.html 檔案 -->
{% extends "base.html" %}
{% load staticfiles %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!-- 寫入 base.html 中定義的 title -->
{% block title %}
文章詳情
{% endblock title %}
<body>
<!-- 寫入 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 %}
</body>
</html>
然後執行伺服器，輸入網址：http://127.0.0.1:8000/article/article-list/1/，出現如下介面：
注意這裡是輸入了http://127.0.0.1:8000/article/article-list/1/才存取到了這個頁面。如果你在article-list頁面點選那個藍色的閱讀本文是無法存取這個頁面的，因為我們還沒有給其增加連結。
優化網頁入口
現在我們來實現點選網頁右上角文章就能返回到http://127.0.0.1:8000/article/article-list/導向的那個文章頁面，然後在那個頁面點選藍色的閱讀本文就能導向文章的http://127.0.0.1:8000/article/article-list/1/頁面。
開啟header.html檔案，這個檔案主要就是負責網頁的頭部導航欄，開啟之後改寫程式碼：
<a class="nav-link" href="{% url 'article:article_list' %}">文章</a>
主要找到這一行哦，標籤中有個文章倆字的那一行，看到改寫的哪裡了嗎？如果你有HTML基礎就會知道href是連結的引數，改了它連結的地址就能實現返回部落格首頁URL的功能。
然後開啟article/list.html檔案，讓使用者可以點選閱讀本文藍色按鈕可以進入文章詳情：
<a href="{% url 'article:article_detail' article.id %}" class="btn btn-primary">閱讀本文</a>
也是把href的引數改變了，這樣就可以了。
這個時候開啟伺服器，輸入http:127.0.0.1:8000/article/article-list/，開啟部落格文章列表頁。去吧，點點按鈕試試看。