Django之模板層

時間 2019-11-07

標籤 django 模板欄目 Python 简体版

原文原文鏈接

Django之模板層

一、模板簡介

在剛剛介紹完的視圖層中咱們提到，瀏覽器發送的請求信息會轉發給視圖函數進行處理，而視圖函數在通過一系列處理後必需要有返回信息給瀏覽器。若是咱們要返回html標籤、css等數據給瀏覽器進行渲染，咱們能夠在視圖函數中這麼作css

def current_datetime(request):
    now = datetime.datetime.now()
    html = "<html><body>It is now %s.</body></html>" % now
    return HttpResponse(html)

上例所示，咱們直接將HTML代碼放到視圖函數裏，而後進行返回，這可使咱們很直觀地看清楚瀏覽器從發送請求到看到前端界面內容的這個過程當中視圖函數的基本工做原理，可是這種將前端代碼與後端代碼耦合到了一塊兒開發方式，會存在如下問題html

程序的可維護性與可擴展性問題
前端界面一旦須要從新設計、修改，則必須對後端的Python代碼進行相應的修改。然而前端界面的修改每每比後端 Python 代碼的修改要頻繁得多，所以若是能夠在不進行 Python 代碼修改的狀況下變動前端界面的設計，那將會方便得多。
開發效率問題
Python 代碼編寫和 HTML 設計是兩項不一樣的工做，大多數專業的網站開發環境都將它們分配給不一樣的人員（甚至不一樣部門）來完成。專門的程序員去編寫 Python代碼、專門的設計人員去製做模板，這兩項工做同時進行，效率纔是最高的。

基於上述緣由，將前端頁面和Python的代碼分離是一種不錯的開發模式。爲此 Django專門提供了模板系統 (Template System，即模板層)來實現這種模式，這就是本章要具體討論的問題。前端

1.1 Django模板

存放於templates目錄下的html文件稱之爲模板文件，若是咱們想要返回的html頁面中的數據是動態的，那麼必須在html頁面中嵌入變量，Django的模板 = HTML + 模板語法，這便用到了django的模板語法，具體來講，django的模板語法有如下重點python

1、變量：{{ 變量名 }}
    1.1 深度查詢：句點符的應用
    1.2 過濾器
2、標籤：{% 標籤名 %}
3、自定義標籤和過濾器
4、模板的導入和繼承

下面就讓咱們來一一介紹它們 ~ ~ ~ ~jquery

二、模板語法之變量

2.1 變量的基本使用

若是html代碼中的數據不是固定死的，而是動態變化的，則必須在html中嵌入變量，爲此，模板語法提供了變量的概念，容許咱們在html代碼中嵌入變量，咱們只須要在視圖函數中用render的方法爲html文件中指定的變量賦值便可，具體用法以下git

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>

咱們須要在視圖函數中爲模板test.html的變量名msg、li、dic、obj、obj_li賦值，views.py內容以下數據庫

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})
    # 注意：
    # 一、render函數的第三個參數包含了要傳給模板的變量值，是一個字典類型，該字典中的key必須與模板文件中的變量名相對應，render函數會去templates目錄下找到模板文件，而後根據字典中的key對應到模板文件中的變量名進行賦值操做，最後將賦值後的模板文件內容返回給瀏覽器
    # 二、能夠將render函數的第三個參數簡寫爲locals(),以下
    return render(request,'test.html',locals()) #locals()會將函數test內定義的名字與值轉換爲字典中的k與v

2.2 深度查詢之句點符的使用

當視圖函數傳給模板的值中包含多個元素時，若想取出其中的單個元素，就必須使用句點符了。句點符既能夠引用容器類型的元素，也能夠引用對象的方法，以下npm

test.htmldjango

<!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>

2.3 過濾器

過濾器相似於python的內置函數，用來把視圖傳入的變量值加以修飾後再顯示，具體語法以下

{{ 變量名|過濾器名:傳給過濾器的參數 }}

經常使用內置過濾器

# 一、default
# 做用：若是一個變量值是False或者爲空，使用default後指定的默認值，不然，使用變量自己的值，若是value=" "則輸出"nothing"
{{ value|default:"nothing" }}

# 二、length
# 做用：返回值的長度。它對字符串、列表、字典等容器類型都起做用，若是value是 ['a', 'b', 'c', 'd']，那麼輸出是4
{{ value|length }}

# 三、filesizeformat
# 做用：將值的格式化爲一個"人類可讀的"文件尺寸(如13KB、4.1 MB、102bytes等等），若是 value 是 12312312321，輸出將會是 11.5 GB
{{ value|filesizeformat }}

# 四、date
# 做用：將日期按照指定的格式輸出，若是value=datetime.datetime.now(),按照格式Y-m-d則輸出2019-02-02
{{ value|date:"Y-m-d" }}　　

# 五、slice
# 做用：對輸出的字符串進行切片操做，顧頭不顧尾,若是value=「egon「，則輸出"eg"
{{ value|slice:"0:2" }}　

# 六、truncatechars
# 做用：若是字符串字符多於指定的字符數量，那麼會被截斷。截斷的字符串將以可翻譯的省略號序列（"..."）結尾，若是value="hello world egon 嘎嘎"，則輸出"hello...",注意8個字符也包含末尾的3個點
{{ value|truncatechars:8 }}

# 七、truncatewords
# 做用：同truncatechars，但truncatewords是按照單詞截斷，注意末尾的3個點不算做單詞，若是value="hello world egon 嘎嘎"，則輸出"hello world ..."
{{ value|truncatewords:2 }}

# 八、safe
# 做用：出於安全考慮，Django的模板會對HTML標籤、JS等語法標籤進行自動轉義,
例如value="<script>alert(123)</script>"，
模板變量{{ value }}會被渲染成&lt;script&gt;alert(123)&lt;/script&gt;
交給瀏覽器後會被解析成普通字符」<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轉義，好比將」<」轉換爲」&lt」
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 %}

3.1 經常使用標籤之`for`標籤

# 一、遍歷每個元素：
{% for person in person_list %}
    <p>{{ person.name }}</p>
{% endfor %}

# 二、能夠利用{% for obj in list reversed %}反向循環。

# 三、遍歷一個字典：
{% for key,val in dic.items %}
    <p>{{ key }}:{{ val }}</p>
{% endfor %}

# 四、循環序號能夠經過{{ forloop }}顯示　
forloop.counter            當前循環的索引值（從1開始）
forloop.counter0           當前循環的索引值（從0開始）
forloop.revcounter         當前循環的倒序索引值（從1開始）
forloop.revcounter0        當前循環的倒序索引值（從0開始）
forloop.first              當前循環是第一次循環則返回True，不然返回False
forloop.last               當前循環是最後一次循環則返回True，不然返回False
forloop.parentloop         本層循環的外層循環

# 五、for標籤能夠帶有一個可選的{% empty %} 從句，在變量person_list爲空或者沒有被找到時，則執行empty子句
{% for person in person_list %}
    <p>{{ person.name }}</p>

{% empty %}
    <p>sorry,no person here</p>
{% endfor %}

3.1.1 案例

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>

3.2 經常使用標籤之`if`標籤

# 一、注意：
{% if 條件 %}條件爲真時if的子句纔會生效，條件也能夠是一個變量，if會對變量進行求值，在變量值爲空、或者視圖沒有爲其傳值的狀況下均爲False

# 二、具體語法
{% if num > 100 or num < 0 %}
    <p>無效</p>
{% elif num > 80 and num < 100 %}
    <p>優秀</p>
{% else %}
    <p>湊活吧</p>
{% endif %}

#三、if語句支持 and 、or、==、>、<、!=、<=、>=、in、not in、is、is not判斷。

3.2.1 案例

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.3 經常使用標籤之`with`標籤

# with標籤用來爲一個複雜的變量名起別名,若是變量的值來自於數據庫，在起別名後只須要使用別名便可，無需每次都向數據庫發送請求來從新獲取變量的值
{% with li.1.upper as v %}
    {{ v }}
{% endwith %}

3.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>
# 具體工做原理爲：
# 一、在GET請求到form表單時，標籤{% csrf_token%}會被渲染成一個隱藏的input標籤，該標籤包含了由服務端生成的一串隨機字符串,如<input type="hidden" name="csrfmiddlewaretoken" value="dmje28mFo...OvnZ5">
# 二、在使用form表單提交POST請求時，會提交上述隨機字符串，服務端在接收到該POST請求時會對比該隨機字符串，對比成功則處理該POST請求，不然拒絕，以此來肯定客戶端的身份

四、自定義過濾器和標籤

當內置的過濾器或標籤沒法知足咱們需求時，咱們能夠自定義，具體操做步驟以下

在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的名字
]

在文件夾app01中建立子文件夾templatetags(文件夾名只能是templatetags)
在templatetags新建任意.py文件，如my_tags.py，在該文件中自定義過濾器或標籤，文件內容以下

from django import template
register = template.Library() # 注意變量名必須爲register,不可改變

#一、自定義過濾器
@register.filter
def my_multi_filter(v1 ,v2): # 自定義的過濾器只能定義最多兩個參數，針對{{ value1 | filter_multi:value2 }}，參數傳遞爲v1=value1,v2=value2
    return  v1 * v2

#二、自定義標籤
@register.simple_tag
def my_multi_tag(v1, v2): # 自定義的標籤能夠定義多個參數
    return v1 * v2


#三、自定義標籤擴展之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)

自定義過濾器或標籤必須從新啓動django方可生效
自定義過濾器或標籤的使用

<!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>

對比自定義標籤與自定義過濾器

#一、自定義過濾器只能傳兩個參數，而自定義標籤卻能夠傳多個參數

#二、過濾器能夠用於if判斷，而標籤不能
{% if salary|my_multi_filter:12 > 200 %}
    <p>優秀</p>
{% else %}
    <p>垃圾</p>
{% endif %}

五、模板的導入和繼承

在實際開發中，模板文件彼此之間可能會有大量冗餘代碼，爲此django提供了專門的語法來解決這個問題,主要圍繞三種標籤的使用：include標籤、extends標籤、block標籤，詳解以下

5.1 模板的導入之include標籤

# 做用：在一個模板文件中，引入/重用另一個模板文件的內容，
{% include '模版名稱' %}

5.1.1 案例：

能夠把廣告欄寫到專門的文件裏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>

5.2 模板的繼承\派生之`extends`標籤、`block`標籤

#做用：在一個模板文件中，引入/重用另一個模板文件的內容
{% extends "模版名稱" %}
#  也就是說include有的功能extends全都有，可是extends能夠搭配一個block標籤，用於在繼承的基礎上定製新的內容

5.2.1 案例

Django模版引擎中最複雜且最強大的部分就是模版繼承了。咱們以先建立一個基本的「骨架」模版，它包含咱們站點中的所有元素，而且能夠定義多處blocks，例如咱們建立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。

{% 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>

六、總結與注意

#一、標籤extends必須放在首行，base.html中block越多可定製性越強

#二、include僅僅只是徹底引用其餘模板文件，而extends卻能夠搭配block在引用的基礎上進行擴寫

#三、變量{{ block.super }} 能夠重用父類的內容，而後在父類基礎上增長新內容，而不是徹底覆蓋

#四、爲了提高可讀性，咱們能夠給標籤{% endblock %} 起一個名字 。例如：
    {% block content %}
    ...
    {% endblock content %}　　
#五、在一個模版中不能出現重名的block標籤。

6.1 靜態文件配置

咱們在編寫模板文件時，須要大量引用css、js、圖片等靜態文件，若是咱們將這些文件在服務端存放的路徑都固定寫死那麼將很是不利於後期的擴展，咱們能夠這麼作

`settings.py

STATIC_URL = '/static/' # 找到這一行，而後新增下述代碼
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'statics'),# 獲取靜態文件在服務端的絕對路徑
]
#STATIC_URL = '/static/'就是爲靜態文件的絕對路徑起了一個別名，之後咱們只須要用路徑/static/便可

在項目根目錄下新增文件夾statics，爲了更便於管理，能夠在statics下新建子文件夾css、js、img等

新建模板文件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"，其它同理