Title: Django入門：第十一章、基礎模板
Author：宇宙之一粟
Time: 2019年11月8日
回顧
在上一章中，我們成功的將靜態文件設置好。已經將bootstrap-4.3.1下的css和js文件導入，也已經簡單的使用bootstrap.min.css將我們得博客變得好看一點，不過細心的讀者發現，我們使用的home.html和content.html文件中包含重複的HTML代碼，有沒有好的方式改變一下這種情況？
基礎模板
爲了展示主頁和詳細的博客文章信息，我們會複製和粘貼HTML文檔的多個部分（比如頭部信息），其實，Django爲我們提供了很好的模板繼承功能，只要我們寫好基礎模板，然後將靜態文件放在基礎模板中使用，其他模板添加你自己需要定製的部分。就能大量減少我們的代碼量，怎麼樣，是不是很激動？那我們來看一下，怎麼做：
首先在./templates文件夾中創建一個名爲base.html的文件：
{% load static %}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Django 博客{% endblock %}</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-expand" href="{% url 'home' %}">Django 博客</a>
</div>
</nav>
<div class="container">
<ol class="breadcrumb my-4">
{% block breadcrumb %}
{% endblock %}
</ol>
{% block content %}
{% endblock %}
</div>
</body>
</html>
這是我們的母模板，之後我們創建的模板都 繼承自這個特殊的模板。現在我們介紹 {% block %}標籤。它用於在模板中保留一個空間，一個“子”模板（繼承這個母模板）可以在這個部分中插入代碼和HTML。
Django提供了強大的模板語言用於控制數據渲染，由模板標籤（template tags）、模板變量（templates variables）、**模板過濾器（templates filters）**組成：
- templates tags：進行渲染控制，類似{% tag %}
- templates variables：可認爲是模板標籤的一種特殊形式，即只是一個變量，渲染的時候只替換內容，類似{{ variable }}
- templates filters：附加在模板變量上改變變量最終顯示結果，類似{{ variable|filter }}
在{% block title %}Django 博客{% endblock %}中，設置了一個默認值“Django博客”，如果子模板沒有設置{%block title%}的值，它就會被使用。
接下來，我們改寫我們之前寫過的兩個模板：home.html 和 content.html
./templates/home.html
{% extends 'base.html' %}
{% block breadcrumb %}
<li class="breadcrumb-item active" >
<a href="https://blog.csdn.net/yuzhou_1shu">歡迎來到宇宙之一粟的技術漂泊之旅</a>
</li>
{% endblock %}
{% block content %}
<table class="table">
<thead class="thead-dark">
<tr>
<th>標題</th>
<th>作者</th>
<th>發佈時間</th>
</tr>
</thead>
<tbody>
{% for blog in blogs %}
<tr>
<td>
<a href="{{ blog.id }}">{{ blog.title }} </a>
</td>
<td>
{{ blog.author }}
</td>
<td>
{{ blog.publish }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
home.html的第一行是 {%extend ‘base.html’%}。這個標籤用來告訴Django使用base.html作爲母模板，使用block來放置這個頁面獨有的部分。
./templates/content.html
{% extends 'base.html' %}
{% block title %}
{{ article.title }} - {{ article.author.username }}
{% endblock %}
{% block breadcrumb %}
<li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
<li class="breadcrumb-item active">{{ article.author.username }}</li>
{% endblock %}
{% block content %}
<div class="blog-post" >
<h2 class="blog-post-title">{{ article.title }}</h2>
<p class="blog-post-meta">
Published {{ article.publish }} by
<a href="#"> {{ article.author.username }}</a>
</p>
<p>
{{ article.body|truncatewords:30|linebreaks }}
</p>
</div>
{% endblock %}
在content.html中，我們改變了{%block title%}的默認值，然後運行整個Django，訪問到主頁，如下圖：
隨便選擇並點擊進入一篇博客，查看博客詳細信息，如下圖：
總結
我們能看到兩個界面都有了導航頁，說明母模板裏面的內容被 home.html 和 content.html 繼承下來，並各自能展示自己想要顯示的內容。
其實，如果你還想分的更細的話，一般網站可以分爲上、中、下三個部分。上部就是網站的頭部，可以放導航欄，網站圖標或商標，所以可以自己設置頭部基礎模板 header.html；中部就是你要向訪問者展示的內容，比如博客、列表、圖片，這個就是子模板該做的內容；下部就是網站底部，可以顯示網站的版權信息或者友情鏈接等一般不怎麼改變的內容，所以自己可以定義一個footer.html。
其實，關於模板，作者的審美也不是很好，所以網頁佈局也不太好看，感覺目前這個博客有點四不像，不過沒關係，我們邊寫邊學，可以參考網上好看的博客網站（偷偷學一下別人的優秀設計）。