模板
作為Web框架,Django提供了模板,用于編寫(xiě)html代碼,還可以嵌入模板代碼更快更方便的完成頁(yè)面開(kāi)發(fā),再通過(guò)在視圖中渲染模板,將生成最終的html字符串返回給客戶端瀏覽器。模版致力于表達(dá)外觀,而不是程序邏輯。模板的設(shè)計(jì)實(shí)現(xiàn)了業(yè)務(wù)邏輯view與顯示內(nèi)容template的分離,一個(gè)視圖可以使用任意一個(gè)模板,一個(gè)模板可以供多個(gè)視圖使用。
模板包含兩部分:
靜態(tài)部分,包含html、css、js。
動(dòng)態(tài)部分,就是模板語(yǔ)言。
Django模板語(yǔ)言,簡(jiǎn)寫(xiě)DTL,定義在django.template包中。 創(chuàng)建項(xiàng)目后,在"項(xiàng)目名稱/settings.py"文件中定義了關(guān)于模板的配置。
views.py中
from django.shortcuts import render
ef runoob(request):
# 字符串
views_name = "python教程"
# 列表
views_list = ["教程1","教程2","教程3"]
# 字典
views_dict = {"name":"教程"}
views_dict = {"name":"[教程1','教程2','教程3']"}
return render(request,"runood.html", {"name":views_name,"views_list":views_list,"views_dict":views_dict})
runood.html
<p>{{ name }}</p>
<p>{{ views_list }}</p> # 取出整個(gè)列表
<p>{{ views_list.0 }}</p> # 取出列表的第一個(gè)元素
<p>{{ views_dict }}</p>
<p>{{ views_dict.name }}</p>
過(guò)濾器
模板語(yǔ)法:
{{ 變量名 | 過(guò)濾器:可選參數(shù) }}
模板過(guò)濾器可以在變量被顯示前修改它,過(guò)濾器使用管道字符
過(guò)濾管道可以被* 套接* ,既是說(shuō),一個(gè)過(guò)濾器管道的輸出又可以作為下一個(gè)管道的輸入:
{{ my_list|first|upper }} 將第一個(gè)元素并將其轉(zhuǎn)化為大寫(xiě)。
|safe 可以將亂碼轉(zhuǎn)化為字符串進(jìn)行顯示
length
返回對(duì)象的長(zhǎng)度,適用于字符串和列表。
字典返回的是鍵值對(duì)的數(shù)量,集合返回的是去重后的長(zhǎng)度。
{{ name|length}}
filesizeformat
以更易讀的方式顯示文件的大?。?13 KB', '4.1 MB', '102 bytes'等)。
字典返回的是鍵值對(duì)的數(shù)量,集合返回的是去重后的長(zhǎng)度
from django.shortcuts import render
def runoob(request):
num=1024
return render(request, "runoob.html", {"num": num})
{{ num|filesizeformat}}
date
根據(jù)給定格式對(duì)一個(gè)日期變量進(jìn)行格式化。
格式 Y-m-d H:i:s返回 年-月-日 小時(shí):分鐘:秒 的格式時(shí)間。
**from** django.shortcuts **import** render
**def** runoob(request):
**import** datetime
now =datetime.datetime.now()
**return** render(request, "runoob.html", {"time": now})
{{ time|date:"Y-m-d" }}
模板標(biāo)簽
if/else 標(biāo)簽
基本語(yǔ)法格式如下:
{% if num1 > 20 %}
{{ num1 }}
{% else %}
no
{% endif %}
{% for list0 in list1 %}
{{ list0 }}
{% endfor %}
{% if condition %}
... display
{% endif %}
或者:
{% if condition1 %}
... display 1
{% elif condition2 %}
... display 2
{% else %}
... display 3
{% endif %}
根據(jù)條件判斷是否輸出。if/else 支持嵌套。
{% if %} 標(biāo)簽接受 and , or 或者 not 關(guān)鍵字來(lái)對(duì)多個(gè)變量做判斷 ,或者對(duì)變量取反( not ),例如:
{% if athlete_list and coach_list %}
athletes 和 coaches 變量都是可用的。
{% endif %}
HelloWorld/HelloWorld/views.py 文件代碼:
from django.shortcuts import render
def runoob(request):
views_num = 88
return render(request, "runoob.html", {"num": views_num})
HelloWorld/templates/runoob.html 文件代碼:
{%if num > 90 and num <= 100 %}
優(yōu)秀
{% elif num > 60 and num <= 90 %}
合格
{% else %}
一邊玩去~
{% endif %}
再訪問(wèn)訪問(wèn) http://127.0.0.1:8000/runoob,可以看到頁(yè)面:
for 標(biāo)簽
{% for %} 允許我們?cè)谝粋€(gè)序列上迭代。
與 Python 的 for 語(yǔ)句的情形類(lèi)似,循環(huán)語(yǔ)法是 for X in Y ,Y 是要迭代的序列而 X 是在每一個(gè)特定的循環(huán)中使用的變量名稱。
每一次循環(huán)中,模板系統(tǒng)會(huì)渲染在 {% for %} 和 {% endfor %} 之間的所有內(nèi)容。
例如,給定一個(gè)運(yùn)動(dòng)員列表 athlete_list 變量,我們可以使用下面的代碼來(lái)顯示這個(gè)列表:
<ul>
{% for athlete in athlete_list %}
<li>{{ athlete.name }}</li>
{% endfor %}
</ul>
HelloWorld/HelloWorld/views.py 文件代碼:
from django.shortcuts import render
def runoob(request):
views_list = ["教程","教程1","教程2","教程3",]
return render(request, "runoob.html", {"views_list": views_list})
HelloWorld/templates/runoob.html 文件代碼:
{% for i in views_list %}
{{ i }}
{% endfor %}
模板繼承
模板繼承和類(lèi)的繼承含義是一樣的,主要是為了提高代碼重用,減輕開(kāi)發(fā)人員的工作量。
典型應(yīng)用:網(wǎng)站的頭部、尾部信息。
3.1、父模板
如果發(fā)現(xiàn)在多個(gè)模板中某些內(nèi)容相同,那就應(yīng)該把這段內(nèi)容定義到父模板中。
標(biāo)簽block:用于在父模板中預(yù)留區(qū)域,留給子模板填充差異性的內(nèi)容,名字不能相同。 為了更好的可讀性,建議給endblock標(biāo)簽寫(xiě)上名字,這個(gè)名字與對(duì)應(yīng)的block名字相同。父模板中也可以使用上下文中傳遞過(guò)來(lái)的數(shù)據(jù)。
{%block 名稱%}
預(yù)留區(qū)域,可以編寫(xiě)默認(rèn)內(nèi)容,也可以沒(méi)有默認(rèn)內(nèi)容
{%endblock 名稱%}
3.2、子模板
標(biāo)簽extends:繼承,寫(xiě)在子模板文件的第一行。
{% extends "父模板路徑"%}
子模版不用填充父模版中的所有預(yù)留區(qū)域,如果子模版沒(méi)有填充,則使用父模版定義的默認(rèn)值。
填充父模板中指定名稱的預(yù)留區(qū)域。
{%block 名稱%}
實(shí)際填充內(nèi)容
{{block.super}}用于獲取父模板中block的內(nèi)容
{%endblock 名稱%}
實(shí)例
view.py
def temp4(request):
"模板繼承"
context = {
'title' : '模板繼承',
'temp1' : '模板1',
'temp2' : '模板2',
}
return render(request,'temp4.html',context=context)
html:
temp3.html用做父模板,temp4.html做子模板
temp3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
<h1>-----------網(wǎng)頁(yè)頭部---------</h1>
<hr>
//
{% block quyu1 %}
<p>這個(gè)是區(qū)域1 請(qǐng)?zhí)砑觾?nèi)容{{ title }}</p>
<p>這個(gè)是區(qū)域1 請(qǐng)?zhí)砑觾?nèi)容{{ temp1 }}</p>
<p>這個(gè)是區(qū)域1 請(qǐng)?zhí)砑觾?nèi)容{{ temp2 }}</p>
{% endblock quyu1 %}
<hr>
{% block quyu2 %}
<p>這個(gè)是區(qū)域2 請(qǐng)?zhí)砑觾?nèi)容</p>
{% endblock quyu2 %}
<h1>-------------------網(wǎng)頁(yè)尾部---------------------</h1>
</body>
</html>
temp4.html
{% extends 'temp3.html' %}
<!-這是繼承頁(yè)面-><!--{-->
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<title>Title</title></head>
<body>{% block quyu2%}
<!--添加預(yù)留區(qū)域的內(nèi)容--><a>你好呀</a>
{% endblock quyu2 %}
</body></html>