默認配置下，Django 的模板系統會自動找到app下面的templates文件夾中的模板文件。
`Django 模板查找機制`： Django 查找模板的過程是在每個 app 的 templates 文件夾中找（而不只是當前 app 中的代碼只在當前的 app 的 templates 文件夾中找）。各個 app 的 templates 形成一個文件夾列表，Django 遍歷這個列表，一個個文件夾進行查找，當在某一個文件夾找到的時候就停止，所有的都遍歷完了還找不到指定的模板的時候就是 `Template Not Found` （過程類似于Python找包）。這樣設計有利當然也有弊，有利是的地方是一個app可以用另一個app的模板文件，弊是有可能會找錯了。所以我們使用的時候在 templates 中建立一個 app 同名的文件夾，這樣就好了。
如下圖：
```
├── db.sqlite3
├── demo
│?? ├── __init__.py
│?? ├── settings.py
│?? ├── urls.py
│?? └── wsgi.py
├── learn
│?? ├── admin.py
│?? ├── __init__.py
│?? ├── models.py
│ ├── views.py
│?? └── tests.py
├── templates
│?? └── learn
│?? ├── base.html
│?? ├── bottom.html
│?? ├── home.html
│?? └── nav.html?
└── manage.py
```
## 模板的結構
網站模板的設計，一般的，我們做網站有一些通用的部分，比如 導航，底部，訪問統計代碼等等
```
├── templates
│?? └── learn
│?? ├── base.html
│?? ├── bottom.html
│?? ├── home.html
│?? └── nav.html
```
### 繼承母版 extends
每個頁面只能繼承一個母版，且必須位于頁面最上方。
>[danger] 何時引入JS和CSS？
可以在母版合適的位置使用相應的block進行，CSS可以在頭文件中引入，JS可以在body標簽的上一行引入。
~~~
{% extends 'learn/base.html' %}
~~~
### 引入模塊include
用于引入一些小模塊或者組件
### 渲染時模塊替換 block
* `導航欄` nav.html
```
<div>導航欄</div>
```
* `頁面底部` bottom.html
```
<div>頁面底部</div>
```
* `基礎模板` base.html
```
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}默認標題{% endblock %}</title>
{% block css %}
{% endblock %}
</head>
<body>
{% include 'learn/nav.html' %}
{% block content %}
<div>這里是默認內容，所有繼承自這個模板的，如果不覆蓋就顯示這里的默認內容。</div>
{% endblock %}
{% include 'learn/bottom.html' %}
{% block js %}
{% endblock %}
</body>
</html>
```
* `主頁` home.html
```
{% extends 'learn/base.html' %}
{% block css %}
<link rel="stylesheet" href="/static/commons.css" />
{% endblock %}
{% block title %}
Home Page
{% endblock %}
{% block content %}
<h2>This is home page.</h2>
{% endblock %}
{% block js %}
<script src="/static/jquery.js"></script>
{% endblock %}
```
