Django之模板層
目錄
模板簡介
在剛剛介紹完的視圖層中我們提到，瀏覽器發送的請求信息會轉發給視圖函數進行處理，而視圖函數在經過一系列處理后必須要有返回信息給瀏覽器。如果我們要返回html標簽、css等數據給瀏覽器進行渲染，我們可以在視圖函數中這么做
def current_datetime(request):
now = datetime.datetime.now()
html = "<html><body>It is now %s.</body></html>" % now
return HttpResponse(html)
盡管這種技術便於解釋視圖是如何工作的，但直接將HTML硬編碼到你的視圖里卻並不是一個好主意。 讓我們來看一下為什么：
1、程序的可維護性與可擴展性問題
前端界面一旦需要重新設計、修改，則必須對后端的Python代碼進行相應的修改。 然而前端界面的 修改往往比后端 Python 代碼的修改要頻繁得多，因此如果可以在不進行 Python 代碼修改的情況 下變更前端界面的設計，那將會方便得多。
2、開發效率問題
Python 代碼編寫和 HTML 設計是兩項不同的工作，大多數專業的網站開發環境都將它們分配給不 同的人員（甚至不同部門）來完成。 專門的程序員去編寫 Python代碼、專門的設計人員去制作模 板，這兩項工作同時進行，效率才是最高的。
根據這兩點內容，我們可以總結出
- 對頁面設計進行的任何改變都必須對 Python 代碼進行相應的修改。 站點設計的修改往往比底層 Python 代碼的修改要頻繁得多，因此如果可以在不進行 Python 代碼修改的情況下變更設計，那將會方便得多。
- Python 代碼編寫和 HTML 設計是兩項不同的工作，大多數專業的網站開發環境都將他們分配給不同的人員（甚至不同部門）來完成。 設計者和HTML/CSS的編碼人員不應該被要求去編輯Python的代碼來完成他們的工作。
- 程序員編寫 Python代碼和設計人員制作模板兩項工作同時進行的效率是最高的，遠勝於讓一個人等待另一個人完成對某個既包含 Python又包含 HTML 的文件的編輯工作。
基於這些原因，將頁面的設計和Python的代碼分離開會更干凈簡潔更容易維護。 我們可以使用 Django的 模板系統 (Template System)來實現這種模式，這就是本章要具體討論的問題
django的模板=HTML代碼+模板語法
def current_time(req):
# ================================原始的視圖函數
# import datetime
# now=datetime.datetime.now()
# html="<html><body>現在時刻：<h1>%s.</h1></body></html>" %now
# ================================django模板修改的視圖函數
# from django.template import Template,Context
# now=datetime.datetime.now()
# t=Template('<html><body>現在時刻是:<h1>{{current_date}}</h1></body></html>')
# #t=get_template('current_datetime.html')
# c=Context({'current_date':str(now)})
# html=t.render(c)
#
# return HttpResponse(html)
#另一種寫法(推薦)
import datetime
now=datetime.datetime.now()
return render(req, 'current_datetime.html', {'current_date':str(now)[:19]})
存放於templates目錄下的html文件稱之為模板文件，如果我們想要返回的html頁面中的數據是動態的，那么必須在html頁面中嵌入變量，這便用到了django的模板語法，具體來說，django的模板語法有以下重點
一、變量：{{ 變量名 }}
1.1 深度查詢：句點符的應用
1.2 過濾器
二、標簽：{% 標簽名 %}
三、自定義標簽和過濾器
四、模板的導入和繼承
下面就讓我們來一一介紹它們
模板語法之變量
1 變量的基本使用
如果html代碼中的數據不是固定死的，而是動態變化的，則必須在html中嵌入變量，為此，模板語法提供了變量的概念，允許我們在html代碼中嵌入變量，我們只需要在視圖函數中用render方法為html文件中指定的變量賦值即可，具體用法如下
在 Django 模板中遍歷復雜數據結構的關鍵是句點字符, 語法：｛｛變量名｝｝
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>{{ msg }}</p>
<p>{{ dic }}</p>
<p>{{ obj }}</p>
<p>{{ li }}</p>
</body>
</html>
views.py
我們需要在視圖函數中為模板test.html的變量名msg、li、dic、obj、obj_li賦值
from django.shortcuts import render
def test(request):
# 傳給模板的變量值可以是任意python類型，如下
msg='hello world'
dic={'k1':1,'k2':2}
class Person(object):
def __init__(self,name,age):
self.name=name
self.age=age
obj=Person('egon',18)
li = [1,'aaa',obj]
return render(request,'test.html',{'msg':msg,'dic':dic,'obj':obj,'li':li})
# 注意：
# 1、render函數的第三個參數包含了要傳給模板的變量值，是一個字典類型，該字典中的key必須與模板文件中的變量名相對應，render函數會去templates目錄下找到模板文件，然后根據字典中的key對應到模板文件中的變量名進行賦值操作，最后將賦值后的模板文件內容返回給瀏覽器
# 2、可以將render函數的第三個參數簡寫為locals(),如下
return render(request,'test.html',locals()) #locals()會將函數test內定義的名字與值轉換為字典中的k與v
2 深度查詢之句點符的使用
當視圖函數傳給模板的值中包含多個元素時，若想取出其中的單個元素，就必須使用句點符了。
句點符既可以引用容器類型的元素，也可以引用對象的方法，如下
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--調用字符串對象的upper方法，注意不要加括號-->
<p>{{ msg.upper }}</p>
<!--取字典中k1對應的值-->
<p>{{ dic.k1 }}</p>
<!--取對象的name屬性-->
<p>{{ obj.name }}</p>
<!--取列表的第2個元素,然后變成大寫-->
<p>{{ li.1.upper }}</p>
<!--取列表的第3個元素，並取該元素的age屬性-->
<p>{{ li.2.age }}</p>
</body>
</html>
3 過濾器
過濾器類似於python的內置函數，用來把視圖傳入的變量值加以修飾后再顯示，具體語法如下
{{ 變量名|過濾器名:傳給過濾器的參數 }}
常用內置過濾器
#1、default
#作用：如果一個變量值是False或者為空，使用default后指定的默認值，否則，使用變量本身的值，如果value=’‘則輸出“nothing”
{{ value|default:"nothing" }}
#2、length
#作用：返回值的長度。它對字符串、列表、字典等容器類型都起作用，如果value是 ['a', 'b', 'c', 'd']，那么輸出是4
{{ value|length }}
#3、filesizeformat
#作用：將值的格式化為一個"人類可讀的"文件尺寸(如13KB、4.1 MB、102bytes等等），如果 value 是 12312312321，輸出將會是 11.5 GB
{{ value|filesizeformat }}
#4、date
#作用：將日期按照指定的格式輸出，如果value=datetime.datetime.now(),按照格式Y-m-d則輸出2019-02-02
{{ value|date:"Y-m-d" }}
#5、slice
#作用：對輸出的字符串進行切片操作，顧頭不顧尾,如果value=“egon“，則輸出"eg"
{{ value|slice:"0:2" }}
#6、truncatechars
#作用：如果字符串字符多於指定的字符數量，那么會被截斷。截斷的字符串將以可翻譯的省略號序列（“...”）結尾，如果value=”hello world egon 嘎嘎“，則輸出"hello...",注意8個字符也包含末尾的3個點
{{ value|truncatechars:8 }}
#7、truncatewords
#作用：同truncatechars，但truncatewords是按照單詞截斷，注意末尾的3個點不算作單詞，如果value=”hello world egon 嘎嘎“，則輸出"hello world ..."
{{ value|truncatewords:2 }}
#8、safe
#作用：出於安全考慮，Django的模板會對HTML標簽、JS等語法標簽進行自動轉義,例如value="<script>alert(123)</script>"，模板變量{{ value }}會被渲染成<script>alert(123)</script>交給瀏覽器后會被解析成普通字符”<script>alert(123)</script>“，失去了js代碼的語法意義，但如果我們就想讓模板變量{{ value }}被渲染的結果又語法意義，那么就用到了過濾器safe，比如value='<a href="https://www.baidu.com">點我啊</a>'，在被safe過濾器處理后就成為了真正的超鏈接，不加safe過濾器則會當做普通字符顯示’<a href="https://www.baidu.com">點我啊</a>‘
{{ value|safe }}
其他過濾器（了解）
| 過濾器 | 描述 | 示例 |
|---|---|---|
| upper | 以大寫方式輸出 | {{ user.name | upper }} |
| add | 給value加上一個數值 | {{ user.age | add:”5” }} |
| addslashes | 單引號加上轉義號 | |
| capfirst | 第一個字母大寫 | {{ ‘good’| capfirst }} 返回”Good” |
| center | 輸出指定長度的字符串，把變量居中 | {{ “abcd”| center:”50” }} |
| cut | 刪除指定字符串 | {{ “You are not a Englishman” | cut:”not” }} |
| date | 格式化日期 | |
| default | 如果值不存在，則使用默認值代替 | {{ value | default:”(N/A)” }} |
| default_if_none | 如果值為None, 則使用默認值代替 | |
| dictsort | 按某字段排序，變量必須是一個dictionary | {% for moment in moments | dictsort:”id” %} |
| dictsortreversed | 按某字段倒序排序，變量必須是dictionary | |
| divisibleby | 判斷是否可以被數字整除 | {{ 224 | divisibleby:2 }} 返回 True |
| escape | 按HTML轉義，比如將”<”轉換為”<” | |
| filesizeformat | 增加數字的可讀性，轉換結果為13KB,89MB,3Bytes等 | {{ 1024 | filesizeformat }} 返回 1.0KB |
| first | 返回列表的第1個元素，變量必須是一個列表 | |
| floatformat | 轉換為指定精度的小數，默認保留1位小數 | {{ 3.1415926 | floatformat:3 }} 返回 3.142 四舍五入 |
| get_digit | 從個位數開始截取指定位置的數字 | {{ 123456 | get_digit:’1’}} |
| join | 用指定分隔符連接列表 | {{ [‘abc’,’45’] | join:’’ }} 返回 abc45 |
| length | 返回列表中元素的個數或字符串長度 | |
| length_is | 檢查列表，字符串長度是否符合指定的值 | {{ ‘hello’| length_is:’3’ }} |
| linebreaks | 用或 標簽包裹變量 | {{ “Hi\n\nDavid”|linebreaks }} 返回HiDavid |
| linebreaksbr | 用 標簽代替換行符 | |
| linenumbers | 為變量中的每一行加上行號 | |
| ljust | 輸出指定長度的字符串，變量左對齊 | {{‘ab’|ljust:5}}返回 ‘ab ’ |
| lower | 字符串變小寫 | |
| make_list | 將字符串轉換為列表 | |
| pluralize | 根據數字確定是否輸出英文復數符號 | |
| random | 返回列表的隨機一項 | |
| removetags | 刪除字符串中指定的HTML標記 | {{value | removetags: “h1 h2”}} |
| rjust | 輸出指定長度的字符串，變量右對齊 | |
| slice | 切片操作， 返回列表 | {{[3,9,1] | slice:’:2’}} 返回 [3,9] {{ 'asdikfjhihgie' | slice:':5' }} 返回 ‘asdik’ |
| slugify | 在字符串中留下減號和下划線，其它符號刪除，空格用減號替換 | {{ '5-2=3and5 2=3' | slugify }} 返回 5-23and5-23 |
| stringformat | 字符串格式化，語法同python | |
| time | 返回日期的時間部分 | |
| timesince | 以“到現在為止過了多長時間”顯示時間變量 | 結果可能為 45days, 3 hours |
| timeuntil | 以“從現在開始到時間變量”還有多長時間顯示時間變量 | |
| title | 每個單詞首字母大寫 | |
| truncatewords | 將字符串轉換為省略表達方式 | {{ 'This is a pen' | truncatewords:2 }}返回``This is ... |
| truncatewords_html | 同上，但保留其中的HTML標簽 | {{ '<p>This is a pen</p>' | truncatewords:2 }}返回``<p>This is ...</p> |
| urlencode | 將字符串中的特殊字符轉換為url兼容表達方式 | {{ ‘http://www.aaa.com/foo?a=b&b=c’ | urlencode}} |
| urlize | 將變量字符串中的url由純文本變為鏈接 | |
| wordcount | 返回變量字符串中的單詞數 | |
| yesno | 將布爾變量轉換為字符串yes, no 或maybe | {{ True | yesno }}{{ False | yesno }}{{ None | yesno }} ``返回 ``yes``no ``maybe |
模板語法之標簽
標簽是為了在模板中完成一些特殊功能,語法為{% 標簽名 %}，一些標簽還需要搭配結束標簽 {% endtag %}
1 常用標簽之for標簽
#1、遍歷每一個元素：
{% for person in person_list %}
<p>{{ person.name }}</p>
{% endfor %}
#2、可以利用{% for obj in list reversed %}反向循環。
#3、遍歷一個字典：
{% for key,val in dic.items %}
<p>{{ key }}:{{ val }}</p>
{% endfor %}
#4、循環序號可以通過{{ forloop }}顯示
forloop.counter 當前循環的索引值（從1開始）
forloop.counter0 當前循環的索引值（從0開始）
forloop.revcounter 當前循環的倒序索引值（從1開始）
forloop.revcounter0 當前循環的倒序索引值（從0開始）
forloop.first 當前循環是第一次循環則返回True，否則返回False
forloop.last 當前循環是最后一次循環則返回True，否則返回False
forloop.parentloop 本層循環的外層循環
#5、for標簽可以帶有一個可選的{% empty %} 從句，在變量person_list為空或者沒有被找到時，則執行empty子句
{% for person in person_list %}
<p>{{ person.name }}</p>
{% empty %}
<p>sorry,no person here</p>
{% endfor %}
案例
url.py
from django.urls import re_path
from app01 import views
urlpatterns = [
re_path(r'^test/',views.test)
]
view.py
def test(request):
names=['egon','kevin']
dic={'name':'egon','age':18,'sex':'male'}
list1=[]
return render(request,'test.html',locals())
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<hr>
{% for name in names %}
<p>{{ forloop.counter0 }} {{ name }}</p>
{% endfor %}
<!--
輸出結果為：
0 egon
1 kevin
-->
<hr>
{% for name in names reversed %}
<p>{{ forloop.revcounter0 }} {{ name }}</p>
{% endfor %}
<!--
輸出結果為：
1 kevin
0 egon
-->
<hr>
{% for k,v in dic.items %}
<p>{{ forloop.counter }} {{ k }} {{ v }}</p>
{% endfor %}
<!--
輸出結果為：
1 name egon
2 age 18
3 sex male
-->
<hr>
{% for item in list1 %}
<p>{{ item }}</p>
{% empty %}
<p>sorry,no value here</p>
{% endfor %}
<!--
輸出結果為：
sorry,no value here
-->
</body>
</html>
2 常用標簽之if標簽
# 1、注意：
{% if 條件 %}條件為真時if的子句才會生效，條件也可以是一個變量，if會對變量進行求值，在變量值為空、或者視圖沒有為其傳值的情況下均為False
# 2、具體語法
{% if num > 100 or num < 0 %}
<p>無效</p>
{% elif num > 80 and num < 100 %}
<p>優秀</p>
{% else %}
<p>湊活吧</p>
{% endif %}
#3、if語句支持 and 、or、==、>、<、!=、<=、>=、in、not in、is、is not判斷。
案例
urls.py
from django.urls import path,register_converter,re_path
from app01 import views
urlpatterns = [
# 輸入http://127.0.0.1:8008/或者http://127.0.0.1:8008/index/都會轉發給視圖函數index
re_path(r'^$',views.index),
re_path(r'^index/$',views.index),
re_path(r'^login/',views.login),
]
views.py
from django.shortcuts import render
def index(request):
return render(request,'index.html')
def login(request):
if request.method == 'GET':
return render(request,'login.html')
name=request.POST.get('name')
pwd=request.POST.get('pwd')
if name == 'egon' and pwd == '123':
current_user=name
return render(request,'index.html',locals())
else:
msg='賬號或密碼錯誤'
return render(request,'login.html',locals())
在templates目錄下新建模板文件index.html與login.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首頁</title>
</head>
<body>
<h3>首頁</h3>
<!--
如果用戶已經登錄，則current_user變量有值，if判斷結果為真，會打印變量current_user的值，為當前登錄的用戶名
如果用戶沒有登錄，則current_user變量無值，if判斷結果為假，會打印a標簽要求用戶先登錄
-->
{% if current_user %}
<p>當前登錄用戶為：{{ current_user }}</p>
{% else %}
<p><a href="/login/">請先登錄</a></p>
{% endif %}
</body>
</html>
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄頁面</title>
</head>
<body>
<form action="" method="POST">
{% csrf_token %}
<p>用戶名：<input type="text" name="name"></p>
<p>密碼：<input type="password" name="pwd"></p>
<p><input type="submit" value="提交"></p>
</form>
<!--輸錯賬號密碼時的提示信息-->
<p style="color: red">{{ msg }}</p>
</body>
</html>
測試
python manage.py runserver 8008 #在瀏覽器輸入http://127.0.0.1:8008/,然后點擊登錄，輸入賬號密碼進行驗證......
3 常用標簽之with標簽
# with標簽用來為一個復雜的變量名起別名,如果變量的值來自於數據庫，在起別名后只需要使用別名即可，無需每次都向數據庫發送請求來重新獲取變量的值
{% with li.1.upper as v %}
{{ v }}
{% endwith %}
4 常用標簽之csrf_token標簽
# 當用form表單提交POST請求時必須加上標簽{% csrf_token%}，該標簽用於防止跨站偽造請求
<form action="" method="POST">
{% csrf_token %}
<p>用戶名：<input type="text" name="name"></p>
<p>密碼：<input type="password" name="pwd"></p>
<p><input type="submit" value="提交"></p>
</form>
# 具體工作原理為：
# 1、在GET請求到form表單時，標簽{% csrf_token%}會被渲染成一個隱藏的input標簽，該標簽包含了由服務端生成的一串隨機字符串,如<input type="hidden" name="csrfmiddlewaretoken" value="dmje28mFo...OvnZ5">
# 2、在使用form表單提交POST請求時，會提交上述隨機字符串，服務端在接收到該POST請求時會對比該隨機字符串，對比成功則處理該POST請求，否則拒絕，以此來確定客戶端的身份
自定義過濾器和標簽
當內置的過濾器或標簽無法滿足我們需求時，我們可以自定義，具體操作步驟如下
1、在settings中的INSTALLED_APPS添加當前app的名字，不然django無法找到自定義的過濾器或標簽
settings.py
# 在settings.py中找到該列表，然后加以配置
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'app01.apps.App01Config',
'app01', # 添加當前app的名字
]
2、在文件夾app01中創建子文件夾templatetags(文件夾名只能是templatetags)
3、在templatetags新建任意.py文件，如my_tags.py，在該文件中自定義過濾器或標簽，文件內容如下
from django import template
register = template.Library() # 注意變量名必須為register,不可改變
#1、自定義過濾器
@register.filter
def my_multi_filter(v1 ,v2): # 自定義的過濾器只能定義最多兩個參數，針對{{ value1 | filter_multi:value2 }}，參數傳遞為v1=value1,v2=value2
return v1 * v2
#2、自定義標簽
@register.simple_tag
def my_multi_tag(v1, v2): # 自定義的標簽可以定義多個參數
return v1 * v2
#3、自定義標簽擴展之mark_safe
# 注釋：我們可以用內置的標簽safe來讓標簽內容有語法意義，如果我們想讓自定義標簽處理的結果也有語法意義，則不能使用內置標簽safe了，需要使用mark_safe，可以實現與內置標簽safe同樣的功能
from django.utils.safestring import mark_safe
@register.simple_tag
def my_input_tag(id, name):
res = "<input type='text' id='%s' name='%s' />" % (id, name)
return mark_safe(res)
4、自定義過濾器或標簽必須重新啟動django方可生效
5、自定義過濾器或標簽的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--必須先加載存有自定義過濾器和標簽的文件-->
{% load my_tags %}
<!--salary的值為10，經過濾器my_multi_filter的處理結果為120-->
{{ salary|my_multi_filter:12 }}
<!--結果為2-->
{% my_multi_tag 1 2 %}
<!--
結果為一個input標簽，該表的屬性id="inp1" name="username"
注意：input的屬性值均為字符串類型，所以my_input_tag后的兩個值均為字符串類型
-->
{% my_input_tag "inp1" "username" %}
</body>
</html>
對比自定義標簽與自定義過濾器
#1、自定義過濾器只能傳兩個參數，而自定義標簽卻可以傳多個參數
#2、過濾器可以用於if判斷，而標簽不能
{% if salary|my_multi_filter:12 > 200 %}
<p>優秀</p>
{% else %}
<p>垃圾</p>
{% endif %}
模板的導入和繼承
在實際開發中，模板文件彼此之間可能會有大量冗余代碼，為此django提供了專門的語法來解決這個問題,主要圍繞三種標簽的使用：include標簽、extends標簽、block標簽，詳解如下
模板的導入之include標簽
#作用：在一個模板文件中，引入/重用另外一個模板文件的內容，
{% include '模版名稱' %}
案例：
可以把廣告欄寫到專門的文件里advertise.html
<div class="adv">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
然后在base.html文件中用include標簽引入advertise.html文件的內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
* {
margin: 0;
padding: 0;
}
.header {
height: 50px;
width: 100%;
background-color: black;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="row">
<div class="col-md-3">
<!--在base.html引入advertise.html文件的內容-->
{% include "advertise.html" %}
</div>
<div class="col-md-9"></div>
</div>
</div>
</body>
</html>
模板的繼承\派生之extends標簽、block標簽
#作用：在一個模板文件中，引入/重用另外一個模板文件的內容
{% extends "模版名稱" %}
# 也就是說include有的功能extends全都有，但是extends可以搭配一個block標簽，用於在繼承的基礎上定制新的內容
案例
Django模版引擎中最復雜且最強大的部分就是模版繼承了。我們以先創建一個基本的“骨架”模版，它包含我們站點中的全部元素，並且可以定義多處blocks ，例如我們創建base.html內容如下
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
{% block title %}自定義title名{% endblock %}
</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
* {
margin: 0;
padding: 0;
}
.header {
height: 50px;
width: 100%;
background-color: #919191;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="list-group">
{% block sidebar %}
<a href="#" class="list-group-item active">服裝城</a>
<a href="#" class="list-group-item">美妝館</a>
<a href="#" class="list-group-item">超市</a>
<a href="#" class="list-group-item">全球購</a>
<a href="#" class="list-group-item">閃購</a>
<a href="#" class="list-group-item">團購</a>
{% endblock %}
</div>
</div>
<div class="col-md-9">
{% block content %}
base.html頁面內容
{% endblock %}
</div>
</div>
</div>
</body>
</html>
模板base.html 定義了一個可以用於兩列排版頁面的簡單HTML骨架。我們新建子模板index.html的主要工作就是繼承base.html然后填充/覆蓋其內部的blocks。
index.html
{% extends "base.html" %}
<!--用新內容完全覆蓋了父模板內容-->
{% block title %}
index頁面
{% endblock %}
{% block sidebar %}
<!--該變量會將父模板中sidebar中原來的內容繼承過來，然后我們可以在此基礎上新增，否則就是純粹地覆蓋-->
{{ block.super }}
<!--在繼承父模板內容的基礎上新增的標簽-->
<a href="#" class="list-group-item">拍賣</a>
<a href="#" class="list-group-item">金融</a>
{% endblock %}
{% block content %}
<!--用新內容完全覆蓋了父模板內容-->
<p>index頁面內容</p>
{% endblock %}
我們通過django訪問index.html看到內容如下(block標簽的內容都完成了替換或更新)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
index頁面
</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
* {
margin: 0;
padding: 0;
}
.header {
height: 50px;
width: 100%;
background-color: #919191;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="list-group">
<!--該變量會將父模板中sidebar中原來的內容繼承過來，然后我們可以在此基礎上新增，否則就是純粹地覆蓋-->
<a href="#" class="list-group-item active">服裝城</a>
<a href="#" class="list-group-item">美妝館</a>
<a href="#" class="list-group-item">超市</a>
<a href="#" class="list-group-item">全球購</a>
<a href="#" class="list-group-item">閃購</a>
<a href="#" class="list-group-item">團購</a>
<!--在繼承父模板內容的基礎上新增的標簽-->
<a href="#" class="list-group-item">拍賣</a>
<a href="#" class="list-group-item">金融</a>
</div>
</div>
<div class="col-md-9">
<!--用新內容完全覆蓋了父模板內容-->
<p>index頁面內容</p>
</div>
</div>
</div>
</body>
</html>
總結與注意
#1、標簽extends必須放在首行，base.html中block越多可定制性越強
#2、include僅僅只是完全引用其他模板文件，而extends卻可以搭配block在引用的基礎上進行擴寫
#3、變量{{ block.super }} 可以重用父類的內容，然后在父類基礎上增加新內容，而不是完全覆蓋
#4、為了提升可讀性，我們可以給標簽{% endblock %} 起一個名字 。例如：
{% block content %}
...
{% endblock content %}
#5、在一個模版中不能出現重名的block標簽。
靜態文件配置
我們在編寫模板文件時，需要大量引用css、js、圖片等靜態文件，如果我們將這些文件在服務端存放的路徑都固定寫死那么將非常不利於后期的擴展，我們可以這么做
1、settings.py
STATIC_URL = '/static/' # 找到這一行，然后新增下述代碼
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'statics'),# 獲取靜態文件在服務端的絕對路徑
]
#STATIC_URL = '/static/'就是為靜態文件的絕對路徑起了一個別名，以后我們只需要用路徑/static/即可
2、在項目根目錄下新增文件夾statics，為了更便於管理，可以在statics下新建子文件夾css、js、img等
3、新建模板文件index.html,在該文件中對靜態文件的引用如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/css/my.css">
</head>
<body>
<h4>我是紅色的，點我就綠</h4>
<img src="/static/img/rb.jpeg" alt="">
<script src="/static/js/jquery-3.3.1.min.js"></script>
<script src="/static/js/my.js"></script>
</body>
</html>
綜上，在配置完settings.py后，所有的靜態文件路徑都可以采用別名/static/作為起始，這在一定程度上會有利於程序的擴展性，但如果我們在項目后期維護時，連/static/這個值也需要修改，那意味着所有模板文件中也都需要跟着改了，擴展性依然很差，為此，django在一個名為static.py的文件中定義了標簽static、get_static_prefix，二者都可以解決該問題
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--注意：必須先加載文件static.py-->
{% load static %}
<!--注意：此處的static是一個定義在static.py中的一個標簽，名字與文件名一樣而已，不要搞混-->
<link rel="stylesheet" href="{% static 'css/my.css' %}">
</head>
<body>
<h4>我是紅色的，點我就綠</h4>
<img src="{% static 'img/rb.jpeg' %}" alt="">
{% load static %}
<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'js/my.js' %}"></script>
</body>
</html>
標簽static會接收傳入的參數，然后這根據settings.py中變量STATIC_URL的值拼接出一個完整的路徑，如果STATIC_URL = '/static/'，那么href="{% static 'css/my.css' %}"會被渲染成href="/static/css/my.css"，如果STATIC_URL = '/static123/'，那么href="{% static 'css/my.css' %}"會被渲染成href="/static123/css/my.css"。
標簽get_static_prefix也可以完成同樣的效果，只不過用法不同。我們不能為標簽get_static_prefix傳參，因為標簽get_static_prefix代表的只是settings.py中STATIC_URL的值，所以我們需要做的是在get_static_prefix的基礎上自行拼接路徑，如下
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--注意：同樣需要先加載文件static.py-->
{% load static %}
<!--使用標簽get_static_prefix拼接路徑-->
<link rel="stylesheet" href="{% get_static_prefix %}css/my.css">
</head>
<body>
<h4>我是紅色的，點我就綠</h4>
<img src="{% get_static_prefix %}img/rb.jpeg" alt="">
{% load static %}
<script src="{% get_static_prefix %}js/jquery-3.3.1.min.js"></script>
<script src="{% get_static_prefix %}js/my.js"></script>
</body>
</html>
如果STATIC_URL = '/static/'，那么href="{% get_static_prefix %}css/my.css"會被渲染成href="/static/css/my.css"，其它同理