Django之模板語言
目錄
一、簡介
模版語言出現的原因:
1、對頁面設計進行的任何改變都必須對 Python 程式碼進行相應的修改。 站點設計的修改往往比底層 Python 程式碼的修改要頻繁得多,因此如果可以在不進行 Python 程式碼修改的情況下變更設計,那將會方便得多。
2、Python 程式碼編寫和 HTML 設計是兩項不同的工作,大多數專業的網站開發環境都將他們分配給不同的人員(甚至不同部門)來完成。 設計者和HTML/CSS的編碼人員不應該被要求去編輯Python的程式碼來完成他們的工作。
3、程式設計師編寫 Python程式碼和設計人員製作模板兩項工作同時進行的效率是最高的,遠勝於讓一個人等待另一個人完成對某個既包含 Python又包含 HTML 的檔案的編輯工作。
基於這些原因,將頁面的設計和Python的程式碼分離開會更乾淨簡潔更容易維護。 我們可以使用 Django的 模板系統 (Template System)來實現這種模式
語法
只需要記兩種特殊符號:
{{ }} 和 {% %}
變數相關的用{{ }},邏輯相關的用{% %}
二、模板變數
在 Django 模板中遍歷複雜資料結構的關鍵是句點字元, 語法:{{變數名}}
def template_test(request): name = 'wwl' li = ['wwl', 1, '18'] dic = {'name': 'wwl', 'age': 18} ll2 = [ {'name': 'wwl', 'age': 18}, {'name': 'wwl2', 'age': 19}, ] ll3=[] class Person: def __init__(self, name): self.nameviews.py= name def test(self): print('test函式') return 11 @classmethod def test_classmethod(cls): print('類方法') return '類方法' @staticmethod def static_method(): print('靜態方法') return '靜態方法' wwl = Person('wwl') xxx = Person('xxx') person_list = [wwl, xxx] bo = True te = test() import datetime now=datetime.datetime.now() link1='<a href="https://www.baidu.com">點我<a>' from django.utils import safestring link=safestring.mark_safe(link1) # html特殊符號對照表(http://tool.chinaz.com/Tools/htmlchar.aspx) # 這樣傳到前臺不會變成特殊字元,因為django給處理了 dot='♠' # return render(request, 'template_index.html', {'name':name,'person_list':person_list}) return render(request, 'template_index.html', locals())
<p>{{ name }}</p> <p>{{ li }}</p> <p>{{ dic }}</p> <p>{{ wwl }}</p> <p>{{ person_list }}</p> <p>{{ bo }}</p> <p>{{ te }}</p> <hr> <h3>深度查詢句點符</h3> <p>{{ li.1 }}</p> <p>{{ dic.name }}</p> <p>{{ wwl.test }}</p> <p>{{ wwl.name }}</p> <p>{{ person_list.0 }}</p> <p>{{ person_list.1.name }}</p> <hr> <h3>過濾器</h3> {#注意:冒號後面不能加空格#} <p>{{ now | date:"Y-m-d H:i:s" }}</p> {#如果變數為空,設定預設值,空資料,None,變數不存在,都適用#} <p>{{ name |default:'資料為空' }}</p> {#計算長度,只有一個引數#} <p>{{ person_list |length }}</p> {#計算檔案大小#} <p>{{ 1024 |filesizeformat }}</p> {#字串切片,前閉後開,前面取到,後面取不到#} <p>{{ 'hello world wwl' |slice:"2:-1" }}</p> <p>{{ 'hello world wwl' |slice:"2:5" }}</p> {#截斷字元,至少三個起步,因為會有三個省略號(傳負數,1,2,3都是三個省略號)#} <p>{{ '伍萬磊 world wwl' |truncatechars:"4" }}</p> {#截斷文字,以空格做區分,這個不算省略號#} <p>{{ '伍萬磊 是 大帥比 謝謝' |truncatewords:"1" }}</p> <p>{{ link1 }}</p> <p>{{ link1|safe }}</p> <p>{{ link }}</p> <p>♠</p> <p>{{ dot }}</p> {#add 可以加負數,傳數字字串都可以#} <p>{{ "10"|add:"-2" }}</p> <p>{{ li.1|add:"-2" }}</p> <p>{{ li.1|add:2 }}</p> <p>{{ li.1|add:"2" }}</p> <p>{{ li.1|add:"-2e" }}</p> {#upper#} <p>{{ name|upper }}</p> <p>{{ 'WWL'|lower }}</p> <hr> <h3>模版語法之標籤</h3> {#for 迴圈 迴圈列表,迴圈字典,迴圈列表物件#} <ui> {% for foo in dic %} {{ foo }} {% endfor %} {#也可以混用html標籤#} {% for foo in li %} <ul>foo</ul> {% endfor %} </ui> {#表格#} <table border="1"> {% for foo in ll2 %} <tr> <td>{{ foo.name }}</td> <td>{{ foo.age }}</td> </tr> {% endfor %} </table> <table border="1"> {#'parentloop': {}, 'counter0': 0, 'counter': 1, 'revcounter': 4, 'revcounter0': 3, 'first': True, 'last': False}#} {% for foo in ll2 %} <tr> <td>{{ forloop.counter }}</td> <td>{{ foo.name }}</td> <td>{{ foo.age }}</td> </tr> {% endfor %} </table> {% for foo in ll5 %} <p>foo.name</p> {% empty %} <p>空的</p> {% endfor %} <hr> <h3>if判斷</h3> {% if name %} <a href="">hi {{ name }}</a> <a href="">登出</a> {% else %} <a href="">請登入</a> <a href="">註冊</a> {% endif %} {#還有elif#} <hr> <h3>with</h3> {% with ll2.0.name as n %} {{ n }} {% endwith %} {{ n }} {% load my_tag_filter %} {{ 3|multi_filter:3 }} {#傳參必須用空格區分#} {% multi_tag 3 9 10 %} {#可以跟if連用#} {% if 3|multi_filter:3 > 9 %} <p>大於</p> {% else %} <p>小於</p> {% endif %}html
注意
{{ }} 相當於執行了print 深度查詢:如果是方法,不能加括號,不能傳引數變數渲染:{{ 變數 }}
變數深度查詢:{{ 變數.索引/key值/方法 }}
三、模板過濾器
語法
後面只能傳一個引數
{ { 變數 | 過濾器的名字:‘引數’ } }
常用過濾器:
add
給value加上一個值
{{ user.age | add:”5” }}
default
如果一個變數是false或者為空,使用給定的預設值。 否則,使用變數的值。
{{ value|default:"nothing"}}
如果value沒有傳值或者值為空的話就顯示nothing
length
返回值的長度,作用於字串和列表。
{{ value|length }}
返回value的長度,如 value=['a', 'b', 'c', 'd']的話,就顯示4.
filesizeformat
將值格式化為一個 “人類可讀的” 檔案尺寸 (例如 '13 KB'
, '4.1 MB'
, '102 bytes'
, 等等)。例如:
{{ value|filesizeformat }}
如果 value 是 123456789,輸出將會是 117.7 MB。
slice
{{value|slice:"2:-1"}} 切片
date
{{ value|date:"Y-m-d H:i:s"}} 格式化
safe 慎重,注意xss跨站指令碼攻擊
Django的模板中會對HTML標籤和JS等語法標籤進行自動轉義,原因顯而易見,這樣是為了安全。但是有的時候我們可能不希望這些HTML元素被轉義,比如我們做一個內容管理系統,後臺新增的文章中是經過修飾的,這些修飾可能是通過一個類似於FCKeditor編輯加註了HTML修飾符的文字,如果自動轉義的話顯示的就是保護HTML標籤的原始檔。為了在Django中關閉HTML的自動轉義有兩種方式,如果是一個單獨的變數我們可以通過過濾器“|safe”的方式告訴Django這段程式碼是安全的不必轉義。
比如:
value = "<a href='#'>點我</a>"
{{ value|safe}}
truncatechars
如果字串字元多於指定的字元數量,那麼會被截斷。截斷的字串將以可翻譯的省略號序列(“...”)結尾。
{{ value|truncatechars:9}} 引數:截斷的字元數
truncatewords
{{ value|truncatewords:9}} 在一定數量的字後截斷字串。
cut
{{ value|cut:' ' }} 移除value中所有的與給出的變數相同的字串
如果value為'i love you',那麼將輸出'iloveyou'.
join
使用字串連線列表,例如Python的str.join(list)
timesince
將日期格式設為自該日期起的時間(例如,“4天,6小時”)。
採用一個可選引數,它是一個包含用作比較點的日期的變數(不帶引數,比較點為現在)。 例如,如果blog_date是表示2006年6月1日午夜的日期例項,並且comment_date是2006年6月1日08:00的日期例項,則以下將返回“8小時”:
{{ blog_date|timesince:comment_date }}
分鐘是所使用的最小單位,對於相對於比較點的未來的任何日期,將返回“0分鐘”。
timeuntil
似於timesince,除了它測量從現在開始直到給定日期或日期時間的時間。 例如,如果今天是2006年6月1日,而conference_date是保留2006年6月29日的日期例項,則{{ conference_date | timeuntil }}將返回“4周”。
使用可選引數,它是一個包含用作比較點的日期(而不是現在)的變數。 如果from_date包含2006年6月22日,則以下內容將返回“1周”:
{{ conference_date|timeuntil:from_date }}
四、模板標籤
for迴圈
普通for迴圈 {% for i in 可迭代物件%}
<ul> {% for user in user_list %} <li>{{ user.name }}</li> {% endfor %} </ul>
for迴圈可用的一些引數:
for ... empty
<ul> {% for user in user_list %} <li>{{ user.name }}</li> {% empty %} <li>空空如也</li> {% endfor %} </ul>
if判斷
if,elif和
else
{% if user_list %} 使用者人數:{{ user_list|length }} {% elif black_list %} 黑名單數:{{ black_list|length }} {% else %} 沒有使用者 {% endif %}
當然也可以只有if和else
{% if user_list|length > 5 %} 七座豪華SUV {% else %} 黃包車 {% endif %}
if語句支援 and 、or、==、>、<、!=、<=、>=、in、not in、is、is not判斷。
with
定義一箇中間變數,多用於給一個複雜的變數起別名。
注意等號左右不要加空格。
{% with total=business.employees.count %} {{ total }} employee{{ total|pluralize }} {% endwith %}
或
{% with business.employees.count as total %} {{ total }} employee{{ total|pluralize }} {% endwith %}
csrf_token
這個標籤用於跨站請求偽造保護。
在頁面的form表單裡面寫上{% csrf_token %}
註釋
{# ... #}
注意事項
1. Django的模板語言不支援連續判斷,即不支援以下寫法:
{% if a > b > c %} ... {% endif %}
2. Django的模板語言中屬性的優先順序大於方法
def xx(request): d = {"a": 1, "b": 2, "c": 3, "items": "100"} return render(request, "xx.html", {"data": d})
如上,我們在使用render方法渲染一個頁面的時候,傳的字典d有一個key是items並且還有預設的 d.items() 方法,此時在模板語言中:
{{ data.items }}
預設會取d的items key的值。
五、自定義過濾器
自定義過濾器只是帶有一個或兩個引數的Python函式:
-
變數(輸入)的值 - -不一定是一個字串
-
引數的值 - 這可以有一個預設值,或完全省略
例如,在過濾器{{var | foo:'bar'}}中,過濾器foo將傳遞變數var和引數“bar”。
自定義filter程式碼檔案擺放位置:
app01/ __init__.py models.py templatetags/ # 在app01下面新建一個package package __init__.py app01_filters.py # 建一個存放自定義filter的檔案 views.py
編寫自定義filter
from django import template register = template.Library() @register.filter(name="cut") def cut(value, arg): return value.replace(arg, "") @register.filter(name="addSB") def add_sb(value): return "{} SB".format(value)
使用自定義filter
{# 先匯入我們自定義filter那個檔案 #} {% load app01_filters %} {# 使用我們自定義的filter #} {{ somevariable|cut:"0" }} {{ d.name|addSB }}
conclusion
1 確認app是否在settings中註冊 2 在app下建立templatetags的模組(名字固定) 3 在模組下建立py檔案(名字隨意)--->在模板中{% load py檔名字%} 4 在py檔案中寫過濾器 from django.template import Library register = Library() #指定了name之後,模板上使用的時候,直接用name呼叫,如果沒指定name,就用函式的名字 # 過濾器最多有兩個引數 @register.filter(name='myadd')
def my_add(a,b): print(a+b) return a+b 5 模板中使用 -1 {% load py檔名字%} -2 {{ 變數|myadd:1}}
六、自定義標籤
1 確認app是否在settings中註冊 2 在app下建立templatetags的模組(名字固定) 3 在模組下建立py檔案(名字隨意)--->在模板中{% load py檔名字%} 4 在py檔案中寫標籤 from django.template import Library register = Library() #指定了name之後,模板上使用的時候,直接用name呼叫,如果沒指定name,就用函式的名字 # 標籤可以有多個引數 @register.simple_tag(name='mytag') def my_tag(a,b,c): return a+b+c 5 模板中使用 -1 {% load py檔名字%} -2 {% mytag 引數1 引數2 引數3%}
標籤和過濾器的區別:
1 標籤可以傳多個引數,過濾器最多隻能傳2個 2 使用過濾器{{ }} 標籤使用:{% %} 3 **重點:過濾器可以放在if判斷後,標籤不能放在if判斷後
七、模版匯入和繼承
母板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> {% block page-css %} {% endblock %} </head> <body> <h1>這是母板的標題</h1> {% block page-main %} {% endblock %} <h1>母板底部內容</h1> {% block page-js %} {% endblock %} </body> </html>
注意:我們通常會在母板中定義頁面專用的CSS塊和JS塊,方便子頁面替換。
繼承母板
在子頁面中在頁面最上方使用下面的語法來繼承母板。
{% extends 'layouts.html' %}
塊(block)
通過在母板中使用{% block xxx %}
來定義"塊"。
在子頁面中通過定義母板中的block名來對應替換母板中相應的內容。
{% block page-main %} <p>上海</p> <p>北京</p> <p>深圳</p> {% endblock %}
元件
可以將常用的頁面內容如導航條,頁尾資訊等元件儲存在單獨的檔案中,然後在需要使用的地方按如下語法匯入即可。
{% include 'navbar.html' %}
如果你在模版中使用 {% extends %} 標籤,它必須是模版中的第一個標籤。其他的任何情況下,模版繼承都將無法工作。 在base模版中設定越多的 {% block %} 標籤越好。請記住,子模版不必定義全部父模版中的blocks,所以,你可以在大多數blocks中填充合理的預設內容,然後,只定義你需要的那一個。多一點鉤子總比少一點好。 如果你發現你自己在大量的模版中複製內容,那可能意味著你應該把內容移動到父模版中的一個 {% block %} 中。 If you need to get the content of the block from the parent template, the {{ block.super }} variable will do the trick. This is useful if you want to add to the contents of a parent block instead of completely overriding it. Data inserted using {{ block.super }} will not be automatically escaped (see the next section), since it was already escaped, if necessary, in the parent template. 為了更好的可讀性,你也可以給你的 {% endblock %} 標籤一個 名字 。例如: {% block content %} ... {% endblock content %} 在大型模版中,這個方法幫你清楚的看到哪一個 {% block %} 標籤被關閉了。 不能在一個模版中定義多個相同名字的 block 標籤。使用繼承的一些提升
八、靜態檔案相關
{% static %}
{% load static %} <img src="{% static "images/hi.jpg" %}" alt="Hi!" />
引用JS檔案時使用:
{% load static %} <script src="{% static "mytest.js" %}"></script>
某個檔案多處被用到可以存為一個變數
{% load static %} {% static "images/hi.jpg" as myphoto %} <img src="{{ myphoto }}"></img>
{% get_static_prefix %}
{% load static %} <img src="{% get_static_prefix %}images/hi.jpg" alt="Hi!" />
或者
{% load static %} {% get_static_prefix as STATIC_PREFIX %} <img src="{{ STATIC_PREFIX }}images/hi.jpg" alt="Hi!" /> <img src="{{ STATIC_PREFIX }}images/hi2.jpg" alt="Hello!" />
inclusion_tag
多用於返回html程式碼片段
示例:
templatetags/my_inclusion.py
from django import template register = template.Library() @register.inclusion_tag('result.html') def show_results(n): n = 1 if n < 1 else int(n) data = ["第{}項".format(i) for i in range(1, n+1)] return {"data": data}
templates/snippets/result.html
<ul> {% for choice in data %} <li>{{ choice }}</li> {% endfor %} </ul>
templates/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>inclusion_tag test</title> </head> <body> {% load inclusion_tag_test %} {% show_results 10 %} </body> </html>