模板繼承就是網站的多個頁面可以共享同一個頁面布局或者是頁面的某幾個部分的內容。通過這種方式你就需要在每個頁面復制粘貼同樣的代碼了。 如果你想改變頁面某個公共部分，你不需要每個頁面的去修改，只需要修改一個模板就行了，這樣最大化復用，減少了冗余，也減少了出錯的幾率，而且你敲的代碼也少了。

創建一個base模板

一個base模板就是你全站所有頁面都會繼承的最基本的網站框架模板。我們在blog/templates/blog/中創建一個base.html模板：

blog
└───templates└───blogbase.htmlpost_list.html

打開base.html，然后將post_list.html的所有內容都復制過來，現在它的內容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{% load staticfiles %}
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
<title>Django Girls Blog</title>
</head>
<body>
 ? ?<div class="page-header">
 ? ? ? ?<h1><a href="/">Django Girls Blog</a></h1>
 ? ?</div>
 ? ?<div class="content">
 ? ? ? ?<div class="row">
 ? ? ? ? ? ?<div class="col-md-8">
 ? ? ? ? ? ? ? ?{% for post in posts %}
 ? ? ? ? ? ? ? ? ? ?<div class="post">
 ? ? ? ? ? ? ? ? ? ? ? ?<h1><a href="">` post`.`title `</a></h1>
 ? ? ? ? ? ? ? ? ? ? ? ?<p>published: ` post`.`published_date `</p>
 ? ? ? ? ? ? ? ? ? ? ? ?<p>{{ post.text|linebreaks }}</p>
 ? ? ? ? ? ? ? ? ? ?</div>
 ? ? ? ? ? ? ? ?{% endfor %}
 ? ? ? ? ? ?</div>
 ? ? ? ?</div>
 ? ?</div>
</body>
</html>


在base.html中，將…塊替換成下面的：

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
 ? ?<div class="page-header">
 ? ? ? ?<h1><a href="/">Django Girls Blog</a></h1>
 ? ?</div>
 ? ?<div class="content">
 ? ? ? ?<div class="row">
 ? ? ? ? ? ?<div class="col-md-8">
 ? ? ? ? ? ?{% block content %}
 ? ? ? ? ? ?{% endblock %}
 ? ? ? ? ? ?</div>
 ? ? ? ?</div>
 ? ?</div>
</body>


我們其實就是將{% for post in posts %}{% endfor %}?替換成了{% block content %}{% endblock %}。 在base.html中我們創建了一個名字為content的block，其他頁面可以通過繼承base.html， 替換這個content塊來生成新的頁面，頁面其他內容保持不變。

保存后，再修改post_list.html頁面，只保留的內容：

1
2
3
4
5
6
7
{% for post in posts %}
 ? ?<div class="post">
 ? ? ? ?<h1><a href="">` post`.`title `</a></h1>
 ? ? ? ?<p>published: ` post`.`published_date `</p>
 ? ? ? ?<p>{{ post.text|linebreaks }}</p>
 ? ?</div>
{% endfor %}


然后添加這句到post_list.html頁面的最開始部分：

{% extends 'blog/base.html' %}


這句話的意思就是該模板繼承自blog/base.html模板

還有一步就是要將剛剛的內容放到{% block content %}和 {% endblock content %}之間，這時候整個頁面是這樣的：

1
2
3
4
5
6
7
8
9
10
{% extends 'blog/base.html' %}
{% block content %}
{% for post in posts %}
 ? ?<div class="post">
 ? ? ? ?<h1><a href="">` post`.`title `</a></h1>
 ? ? ? ?<p>published: ` post`.`published_date `</p>
 ? ? ? ?<p>{{ post.text|linebreaks }}</p>
 ? ?</div>
{% endfor %}
{% endblock content %}

保存后刷新頁面，看下是不是能正常工作：

一切都OK…