目前登入，注冊和訂單頁面，都是獨立的頁面。如果想要有統一的樣式，統一的導航欄，那麼就需要對每一個頁面進行修改，非常麻煩。
可以使用模闆繼承，Django 模闆引擎中最強大（是以也是最複雜）的部分是模闆繼承。模闆繼承可以建構基本的“骨架”模闆，該模闆包含站點的所有常見元素，并定義子模闆可以覆寫的塊。在 templates 目錄下，建立公共模闆 base.html，它定義了一個 HTML 骨架文檔，将頁面分成上中下三欄。子模闆使用具體内容填充公共模闆中空白塊 block。
步驟：
- 建立公共模闆
- 建立子模版檔案
- 建立和引用靜态檔案，例如定義樣式表檔案，圖檔檔案
建立公共模闆
公共模闆包含了整個頁面的架構，一般有公共部分，例如歡迎部分，導航部分，頁腳部分，和闆塊定義。在公共 templates/base.html 中輸入以下内容：
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initital-scale=1.0">
<link rel="stylesheet" href="{% static 'css/iorder.css' %}">
<title>
{% block title %} 點餐系統 {% endblock %}
</title>
</head>
<body>
<div class="main">
{% block nevbar %}
<div class="nevbar">
<div class="flow-left"><img src="{% static 'img/order.jpg' %}" width="32px" title="點餐"></div>
<div class="flow-left">點餐</div>
<div class="flow-right">登入</div>
<div class="flow-right">注冊</div>
<div class="flow-right">退出</div>
</div>
{% endblock %}
{% block section %}
{% endblock %}
{% block footer %}
<div class="footer">
@ 版權資訊
</div>
{% endblock %}
</div>
</body>
</html> {% block 模闆塊名%}，标記所做的是告訴模闆引擎子模闆可以覆寫模闆的那些部分。這裡定義了 tilte，nevbar，section，footer 四個 block，可以在子模闆中根據需要覆寫這些 block。
此時的導航欄還都沒有添加連結。在下一節“11-更新web頁面,導航,分頁”将會詳細介紹。
建立子模版檔案
修改 templates/users/login.html 子模闆，如下：
{% extends 'base.html' %}
{% block title %}
登陸頁面
{% endblock%}
{% block section %}
<div>
<p>登入頁面</p>
<p style="color: red;">{{ error }}</p>
<div>
<form action="" method="POST">
{% csrf_token %}
<div>賬号: <input type="text" name="username"></div>
<div>密碼: <input type="password" name="password"></div>
<div><input type="submit" value="登入"></div>
</form>
</div>
<div><a href="{% url 'users:regist' %}">點選注冊</a></div>
</div>
{% endblock%}
{% extend 公共模闆 html 檔案名 %}，需要寫在子模闆中的開頭，表示繼承公共模闆。它告訴模闆引擎該模闆“擴充”了另一個模闆。模闆系統評估該模闆時，首先會找到公共模闆，也就是 base.html。
{% block 模闆塊名%}，寫在公共模闆中為可以被繼承并重寫的内容，寫在子模闆中為替換公共模闆中相同名字的模闆塊内容。
{% endblock %}，标記 block 結束的位置。
修改 templates/users/register.html 子模闆，如下：
{% extends 'base.html' %}
{% block title %}
注冊頁面
{% endblock%}
{% block section %}
<div>
<p>注冊頁面</p>
<p style="color: red;">{{ error }}</p>
<form action="" method="POST">
{% csrf_token %}
{% if username %}
<div>賬号: <input type="text" name="username" value="{{ username }}"></div>
{% else %}
<div>賬号: <input type="text" name="username"></div>
{% endif %}
<div>密碼: <input type="password" name="password"></div>
<div><input type="submit" value="送出"></div>
</form>
</div>
{% endblock%} 修改 templates/orders/index.html 子模闆，如下：
{% extends 'base.html' %}
{% block title %}
訂單頁面
{% endblock%}
{% block section %}
<div >
<h3>今日 {% now "Y-m-d" %} 訂餐訂單：</h3>
<table style="display: inline-block; ">
<tr>
<th>編号</th>
<th>姓名</th>
<th>下單時間</th>
<th>菜品</th>
<th>餐館</th>
<th>數量</th>
<th>辣味</th>
<th>吃飯時間</th>
</tr>
{% for order in order_list %}
<tr>
<td>{{ order.id }}</td>
<td>{{ order.username }}</td>
<td>{{ order.createdate }}</td>
<td>{{ order.dish }}</td>
<td>{{ order.dish.restaurant }}</td>
<td>{{ order.quantity }}</td>
<td>{{ order.get_spicy_display }}</td>
<td>{{ order.get_dinnertime_display }}</td> <!--顯示中餐/午餐的value-->
</tr>
{% endfor %}
</table>
</div>
{% endblock%} 定義樣式表檔案
之前是把樣式表定義在了 html 檔案中，甚至嵌入到了頁面元素中。推薦的做法是，引用第三方的 css 樣式表架構，或者将樣式都統一放到一個檔案中，友善管理和修改。這裡在 static/css 目錄下，建立樣式表檔案 iorder.css，将用到的樣式都放到給檔案裡，然後在公共模闆 base.html 中引用：
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initital-scale=1.0">
<link rel="stylesheet" href="{% static 'css/iorder.css' %}">
<title>
{% block title %} 點餐系統 {% endblock %}
</title>
</head> {% load static %} 加載在 setting.py 中的STATICFILES_DIRS定義的 static目錄。然後在模闆中使用load标簽來加載 static 标簽。
<link rel=“stylesheet” href={%static ‘css/iorder.css’%}> 通過 static 标簽加載相應的 css 檔案。
同樣的方法，也可以加載 Javascript 檔案，圖檔等靜态檔案。
![學生管理系統（控制台版本）[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)