第一部分 模板的繼承
1、模板繼承
對於一個網站來說，會存在很多的html檔案，但是由於一些頁面中會有相同的頁面結構出現。也就導致了多個html檔案中程式碼是重複的，所以為了在html中減少重複的程式碼的出現，簡化html結構，可以將多個頁面中相同的html程式碼，單獨的抽離出來放在一個html檔案中，其他的html檔案如果想要使用這部分內容，直接繼承過去就可以了，有點類似於類的繼承關係。

繼承關係：父模板和子模板。

2、假設現在有一個網站，它的首頁、列表頁和詳情頁這些頁面，頁面頂部的導航條和頁面底部的工具條是一樣的，唯一變化的就是其中內容。畫了一個簡陋的圖，大致如下圖所示：

對於這個網站，其頁面結構%70(浮誇風(๑╹◡╹)ﾉ""")以上的內容都是相似的，如果我們每一個html檔案都寫入這些相同部分的程式碼，也是可以的，只是會造成程式碼的冗餘等。為了方便解決這個問題，減少重複程式碼的出現，模板的繼承就很好的解決了這個問題。

現在我們來實現模板的繼承。
1、建立專案和app
django-admin startproject djangotemplateinherit
cd djangotemplateinherit
python manage.py startapp teminherit
2、在專案根目錄下建立templates資料夾。

3、在urls.py檔案中編寫路由。

4、編寫業務邏輯，即檢視函式。

5、在templates資料夾下新建3個html檔案。

4、再新建一個nav.html，表示公共的導航條部分。

同時，我們在views.py檔案中更改檢視函式，渲染模板。

5、我們在nav.html中寫入如下程式碼

6、分別在index.html，list.html，detail.html中引入這個nav.html導航條模板。

模板的繼承需要使用到extends關鍵字。
extends：關鍵字表明瞭當前檔案index.html所繼承的父模板
繼承時會將此檔案(當前案例是nav.html檔案)的所有程式碼全部繼承。

在index.html檔案中寫入如下程式碼：

{% extends 'nav.html' %}

其他兩個list.html，detail.html檔案同index.html，寫入相同的內容。

7、執行檢視

此時，這三個html都使用了公共的導航條(nav.html檔案)。
8、雖然使用了公共的導航條，但是每個html檔案中，此時我們不能加入每個頁面的內容(即首頁內容，列表頁內容，詳情頁內容)，不信，你可以嘗試？此時我們在index.html中寫入一個h2標籤。

再次重新整理網頁，發現首頁上並沒有我們想要的內容。

原因是我們已經將nav.html中內容固定了，extends繼承模板時，將nav.html檔案的內容完全引入，替換掉index.html的內容，所以我們自己寫的h2標籤是不可以執行的。值得注意的是，如果把h2標籤放在{% extends ‘nav.html’ %}程式碼之前，是可以執行顯示的，，這裡不做嘗試，望讀者自行嘗試。

9、現在我們的需求是index,list,detail的模板檔案在渲染後展示不同的內容。但由於這index,list,detail三個模板檔案我們現在繼承的是nav.html的內容，直接將程式碼{% extends ‘nav.html’ %}新增在後面又不可以，放在{% extends ‘nav.html’ %}之前又失去了公共導航條的意義。那麼現在唯一剩下的解決方案就是更改nav.html，使其能夠讓我們在不同的模板檔案中實現自定義的功能。

Django為我們提供了一個block標籤。如果子模板需要在當前這個頁面的基礎上，新增一些自己頁面的內容，使用django內建的模板標籤block(程式碼塊)即可，需要給這個塊起一個名稱。可以隨意起。

{% block 名稱 %}

{% endblock %}

10、現在我們修改nav.html，預留自定義程式碼的介面。即增加{% block content %} {% endblock %}。

同時在index.html檔案中增加一個自定義的h1標籤。

再次重新整理，此時index首頁已經發生變化。多出了我們自定義的h1標籤。相應的其他兩個模板檔案的變更與index.html相同，這裡不做嘗試。

11、雖然自定義了index首頁的內容。但是細心的同學就會發現了一個小小的缺陷。

那就是開啟index首頁的選項卡上仍舊顯示的是nav.html中的title欄位。我們知道，諸如伯樂線上這個網站，每點選導航欄的一個模組，新開啟的視窗上的額標題就會發生變化。而我們現在繼承了模板，相應的title內容也就寫死了。那麼該怎麼處理呢？
12、為了方便解決這個問題，我們將nav.html的內容再次做出修改，如下圖所示：

注意：

在block中設定的標籤，就相當於是一個title的預設值。
如果子模板沒有重寫這個title塊，就使用這個預設值，如果子模板重寫了這個title塊，就使用子模板的值。

13、由於我們需要變更index首頁的title標題，所以我們需要對index.html的內容再次做出修改。通過block預留的介面，修改我們需要的title。這一點類似於類，我們可以對類進行繼承，在繼承的同時對其不符合我們需求的進行重寫。

重新整理檢視

此時，標題已經變化為首頁。其他兩個模板的修改同index，這裡不做嘗試，望讀者自行嘗試。

第二部分 靜態檔案的使用

1、靜態資源。
在專案中，我們經常會用到css、image、js等靜態資源。一般會將這些靜態資源放到一個單獨的目錄中，然後建一個統一的目錄，以方便管理。

那麼Django如何在html中引用靜態檔案？
1、在專案根目錄下或者app下，新建一個static資料夾(名字是固定的)；將所有的靜態資原始檔放進去。
2、如果static是在根目錄下建立的，需要在settings.py檔案中，配置搜尋路徑；如果是在app下建立的，不用配置。
3、在html檔案中，引入靜態資源；

2、現在我們在專案根目錄下新建一個static資料夾。

同時在裡面建立image,css,js,等資料夾(不是必須建立，需要使用哪個時建立即可)。

3、在settings.py檔案中做出配置。預設的是搜尋app下的static，由於我們是建立在專案根目錄下的，所以需要稍作修改。

#搜尋app下的static
STATIC_URL = '/static/'

#搜尋根目錄下的static
STATICFILES_DIRS=[os.path.join(BASE_DIR,'static')]

4、假設現在我們有一個需求，就是將首頁的h1標籤中的文字部分顯示為藍色。那麼我們就在static資料夾下的css檔案中新建一個index.css檔案。

5、然後編寫css樣式。

6、此時我們需要引入這個css檔案，以實現效果。這裡我們有兩個選擇。第一個就是我們可以直接在index.html的{% block content %}中引用。第二個就是因為nav.html中沒有class="h"這個類，所以我們也可以考慮在nav.html中引入，也是可以的。
現在我們就選擇第二種方案。同時附上第一種方案的程式碼：

{% block content %}
    <link rel="stylesheet" href="/static/css/index.css">
    <h1 class="h">index首頁的內容</h1>
{% endblock %}

此時我們在瀏覽器中重新整理檢視，達到我們需要的效果。

至此，模板的繼承和靜態資源的使用到此結束。