? ? ?

?{% endset %}

2.1.1、內(nèi)置上下文變量

Flask在模板上下文中提供了一些內(nèi)置變量，可以在模板中直接使用：

變量說明config當(dāng)前的配置對(duì)象request當(dāng)前的請(qǐng)求對(duì)象，在已激活的請(qǐng)求環(huán)境下可用session當(dāng)前的會(huì)話對(duì)象，在已激活的請(qǐng)求環(huán)境下可用g與請(qǐng)求綁定的全局變量，在已激活的請(qǐng)求環(huán)境下可用

2.1.2、自定義上下文

如果多個(gè)模板都需要使用同一變量，設(shè)置一個(gè)模板全局變量以供使用。Flask提供了一個(gè)app.context_processor裝飾器，可以用來注冊(cè)模板上下文處理函數(shù)，完成統(tǒng)一傳入變量操作：

?@app.context_processor

?def inject_foo():

? ? ?foo = 'I am foo.'

? ? ?return dict(foo=foo)

當(dāng)我們調(diào)用render_template()函數(shù)渲染任意一個(gè)模板時(shí)，所有使用app.context_processor裝飾器注冊(cè)的模板上下文處理函數(shù)都會(huì)被執(zhí)行，這些函數(shù)的返回值會(huì)被添加到模板中，因此我們可以在模板中直接使用foo變量。

除了使用app.context_processor裝飾器，也可以直接將其作為方法調(diào)用，傳入模板上下文處理函數(shù)：

?...

?def inject_foo():

? foo = 'I am foo.'

? return dict(foo=foo)

?app.context_processor(inject_foo)

使用lambda簡(jiǎn)化為：

?app.context_processor(lambda:dict(foo='I am foo.'))

2.2、全局對(duì)象

全局對(duì)象值在所有模板中都可以直接使用的對(duì)象，包括在模板中導(dǎo)入的模板。

2.2.1、內(nèi)置全局函數(shù)

Jinja2在模板中默認(rèn)提供了一些全局函數(shù)（部分）：

函數(shù)說明range([satrt,]stop[,step])和Python中的range()用法相同lipsum(n=5,html=True,min=20,max=100)生成隨機(jī)文本，可以在測(cè)試時(shí)用來填充頁面。默認(rèn)生成5段HTML文本，每段包含20-100個(gè)單詞dict(**items)和Python中的dict()用法相同

Flask也在模板中內(nèi)置了兩個(gè)全局函數(shù)：

函數(shù)說明url_for()用于生成URL的函數(shù)get_flashed_messages()用于獲取flash消息的函數(shù)

url_for()用來獲取URL，用法和在Python腳本中相同。在實(shí)際的代碼中，這個(gè)URL使用url_for()生成，傳入index視圖的端點(diǎn)：

?← Return

2.2.2、自定義全局函數(shù)

使用app.template_global裝飾器直接將函數(shù)注冊(cè)為模板全局函數(shù)。（僅用于注冊(cè)全局函數(shù)）

?# 把bar()函數(shù)注冊(cè)為模板全局函數(shù)

?@app.template_global

?def bar():

? ? ?return 'I am bar'

默認(rèn)使用函數(shù)的原名稱傳入模板，在app.template_global()裝飾器中使用name參數(shù)可以指定一個(gè)自定義名稱。

2.3、過濾器

過濾器修改和過濾變量值的特殊函數(shù)，過濾器和變量用一個(gè)豎線（管道符號(hào)）隔開，需要參數(shù)的過濾器可以像函數(shù)一樣使用括號(hào)傳遞。

?{{ name|title }}

?# 這會(huì)將name變量的值標(biāo)題化，相當(dāng)于Python中調(diào)用name.title()。

??

?{{ movies|length }}

?# 獲取moives長(zhǎng)度，相當(dāng)于Python值調(diào)用len(moives)

另一種方法是將過濾器作用于部分模板數(shù)據(jù)，使用filter標(biāo)簽和endfilter標(biāo)簽聲明開始和結(jié)束：

?{% filter upper %}

? This text bacomes uppercase.

?{% endfilter %}

2.3.1、內(nèi)置過濾器（部分）

過濾器說明escape(s)轉(zhuǎn)義HTML，別名為efirst(seq)返回序列的第一個(gè)元素last(seq)返回序列的最后一個(gè)元素length(object)返回變量的長(zhǎng)度random(seq)返回序列中的隨機(jī)元素

在使用過濾器時(shí)，列表中過濾器函數(shù)的第一個(gè)參數(shù)表示過濾的變量值（value）或字符串（s），即豎線符號(hào)左側(cè)的值，其他的參數(shù)可以通過括號(hào)傳入。

過濾器可以疊加使用：

?# 為變量name設(shè)置默認(rèn)值，并將其標(biāo)題化

?

Hello,{{ name|default('陌生人')|title }}!

根據(jù)Flask設(shè)置，Jinja2會(huì)自動(dòng)對(duì)模板中的變量進(jìn)行轉(zhuǎn)義，因此我們不需要手動(dòng)使用escape過濾器或調(diào)用excape()函數(shù)對(duì)變量進(jìn)行轉(zhuǎn)義。若想避免轉(zhuǎn)義，將變量作為HTML解析，可以對(duì)變量使用safe過濾器或者在渲染前將變量轉(zhuǎn)換為Markup對(duì)象：（不要對(duì)用戶輸入的內(nèi)容使用safe，容易被攻擊）

?# safe過濾器

?{{ sanitied_text|safe }}

?# 轉(zhuǎn)換為markup對(duì)象

?from flask import Markup

??

?@app.route('/hello')

?def hello():

? ? ?text = Markup('

Hello,Flask!

? ? ?return render_template('index.html',text=text) # 這時(shí)可以在模板中直接使用{{ text }}

2.3.2、自定義過濾器

使用app.template_filter()裝飾器可以注冊(cè)自定義過濾器：例注冊(cè)一個(gè)musical過濾器：

?from flask import Markup

??

?@app.template_filter()

?def musical(s):

? return s + Markup(' ♫')

與注冊(cè)全局函數(shù)一樣，可以在app.template_filter()中使用name關(guān)鍵字設(shè)置過濾器的名稱，默認(rèn)使用函數(shù)名稱。用法與其他過濾器相同。

2.4、測(cè)試器

在Jinja2中，測(cè)試器（Test）是一些用來測(cè)試變量或表達(dá)式，返回布爾值的特殊函數(shù)。

?# number測(cè)試器用來判斷一個(gè)變量或表達(dá)式是否為數(shù)字，我們使用is連接變量和測(cè)試器：

?{% if age is number %}

? ? {{ age * 365 }}

?{% else %}

? ? ?無效的數(shù)字

?{% endif %}

2.4.1、內(nèi)置測(cè)試器（部分）

測(cè)試器說明callable(object)判斷對(duì)象是否可被調(diào)用defined(value)判斷變量是否已定義undefined(value)判斷變量是否未定義none(value)判斷變量是否Nonenumber(value)判斷變量是否是數(shù)字string(value)判斷變量是否字符串sequence(value)判斷變量是否是序列，比如字符串、列表、元組iterable(value)判斷變量是否可迭代mapping(value)判斷變量是否是匹配對(duì)象，比如字典sameas(value,other)判斷變量與 other是否指向相同的內(nèi)存地址

使用測(cè)試器時(shí)，is的左側(cè)是測(cè)試器函數(shù)的第一個(gè)參數(shù)（value），其他參數(shù)可以添加括號(hào)傳入，也可以在右側(cè)使用空格連接，以sameas為例：

?{% if foo is sameas(bar) %}...

?# 等同于

?{% if foo is sameas bar %}...

2.4.2、自定義測(cè)試器

使用app.template_test()裝飾器來注冊(cè)一個(gè)自定義測(cè)試器。例子：

?@app.template_test

?def baz(n):

? ? ?if n == 'baz':

? ? ? ? ?return True

? ? ?return False

同樣，可以使用關(guān)鍵字name指定名稱，默認(rèn)為函數(shù)名稱

2.5、模板環(huán)境對(duì)象

在Jinja2中，渲染行為由jinja2.Environment類控制，所有的配置選項(xiàng)、上下文變量、全局函數(shù)、過濾器和測(cè)試器都存儲(chǔ)在Environment實(shí)例上。當(dāng)與Flask結(jié)合后，我們直接使用Flask創(chuàng)建的Environment對(duì)象，它存儲(chǔ)在app.jinja_env屬性上（其可以更改Jinja2設(shè)置）

?#使用variable_start_string和variable_end_string自定義變量定界符的開始和結(jié)束

?app = Flask(__name__)

?app.jinja_env.variable_start_string = '[['

?app.jinja_env.variable_end_string = ']]'

模板環(huán)境中的全局函數(shù)、過濾器和測(cè)試器分別存儲(chǔ)在Environment對(duì)象的globals、filters和tests屬性中，都是字典對(duì)象。

2.5.1、添加自定義全局對(duì)象

和app.template_global()裝飾器不同，直接操作globals字典允許我們傳入任意Python對(duì)象，而不僅僅是函數(shù)，類似上下文處理函數(shù)的作用。

?# 添加全局函數(shù)bar和全局變量foo:

? def bar():

? ? ?return 'I am bar'

?foo = 'I am foo'

?app.jinja_env.globals['bar'] = bar

?app.jinja_env.globals['foo'] = foo

2.5.2、添加自定義過濾器

?# 添加自定義過濾器smiling

?def smiling(s):

? ? ?return s + ':)'

?app.jinja_env.filters['smiling'] = smiling

2.5.3、添加自定義測(cè)試器

?# 添加自定義測(cè)試器baz

?def baz(n):

? ? ?if n == 'baz':

? ? ? ? ?return True

? ? ?return False

?app.jinja_env.tests['baz'] = baz

三、模板組織結(jié)構(gòu)

Jinja2還提供了一些工具來在宏觀上組織模板內(nèi)容。更好實(shí)踐DRY（Don't Repeat Yourself）原則

3.1、局部模板

當(dāng)多個(gè)獨(dú)立模板都會(huì)使用同一塊HTML代碼時(shí)，我們把這部分代碼抽離出來，存儲(chǔ)到局部模板中?？梢员苊庵貜?fù)又方便統(tǒng)一管理。

我們使用include標(biāo)簽插入一個(gè)局部模板，這會(huì)把局部模板的全部?jī)?nèi)容插在使用include標(biāo)簽的位置：

?{% include '_banner.html' %}

為了和普通模板區(qū)分開，局部模板命名通常以一個(gè)下劃線開始

3.2、宏

宏（macro）是Jinja2中的特性，類似Python中的函數(shù)。使用宏可以將一部分模板代碼封裝到宏里，使用傳遞的參數(shù)來構(gòu)建內(nèi)容，最后返回構(gòu)建后的內(nèi)容。

為了便于管理，通常把宏存儲(chǔ)到單獨(dú)文件中（macros.html）。

使用macro和endmacro標(biāo)簽聲明宏的開始和結(jié)束，在開始標(biāo)簽中定義宏的名稱和接收的參數(shù)：

?{% macro qux(amount=1) %}

? ? ?{% if amount ==1 %}

? ? ? ? I am qux.

? ? ?{% elif amount > 1 %}

? ? ? ? We are quxs.

? ? ?{% endif %}

?{% endmacro %}

使用時(shí)使用import語句導(dǎo)入，然后作為函數(shù)調(diào)用，傳入必要的參數(shù)：

?{% from 'macros.html' impor qux %}

?...

?{{ qux(amount=5) }}

默認(rèn)情況下包含（include）一個(gè)局部模板會(huì)傳遞當(dāng)前上下文到局部模板，但導(dǎo)入（import）不會(huì)。換句話：當(dāng)我們使用render_template()函數(shù)渲染一個(gè)foo.html模板時(shí)，這個(gè)foo.html的模板上下文中包含下列對(duì)象：

Flask使用內(nèi)置的模板上下文處理函數(shù)提供的g、session、config、request。擴(kuò)展使用內(nèi)置的模板上下文處理函數(shù)提供的變量自定義模板上下文處理器傳入的變量使用render_template()函數(shù)傳入的變量Jinja2和Flask內(nèi)置及自定義全局對(duì)象Jinja2內(nèi)置及自定義過濾器Jinja2內(nèi)置及自定義測(cè)試器

使用include標(biāo)簽插入的局部模板同樣可以使用上述。而導(dǎo)入一個(gè)并非被直接渲染的模板，這個(gè)模板僅包含下列對(duì)象：

Jinja2和Flask內(nèi)置及自定義全局對(duì)象Jinja2內(nèi)置及自定義過濾器Jinja2內(nèi)置及自定義測(cè)試器

因此，若想在導(dǎo)入的宏中使用第一個(gè)列表中的2，3,4項(xiàng)，就需要在導(dǎo)入時(shí)顯式地使用with context聲明傳入當(dāng)前模板的上下文：

?{% from 'macros.html' impor foo with context %}

3.3、模板繼承

Jinja2的模板允許定義一個(gè)基模板，把像導(dǎo)航欄、頁腳等通用部分放在基模板中。

3.3.1、編寫基模板

基模板存儲(chǔ)程序頁面固定部分，通常被命名為base.html或layout.html。

?

?

?

? ? ?

? ? ?

? ? {% block styles %}{% endblock %}

?

?

?

?

?

?{% block scripts %}{% endblock %}

?

?

當(dāng)子模板繼承基模板后，會(huì)自動(dòng)包含基模板的內(nèi)容和結(jié)構(gòu)。在基模板定義塊（block），在子模板中可以通過定義同名的塊來執(zhí)行繼承操作。

塊的開始和結(jié)束用block和endblock標(biāo)簽聲明，可以嵌套。為了避免塊的混亂，塊的結(jié)束標(biāo)簽可以指明塊名，確保前后名稱一致。

?{% block body %}

?...

?{% endblock body %}

3.3.2、編寫子模板

在子模板中只需要對(duì)特定的塊進(jìn)行修改。

?{% extends 'base.html' %}

?{% from 'macro.html' import qux %}

??

?{% block content %}

?{% set name='baz' %}

?

Template

?

? ? ?

• Watchlist

? ? ?

• Filter:{{ foo|musical }}

? ? ?

• Global:{{ bar() }}

? ? ?

• Test:{% if name is baz %}I am baz.{% endif %}

? ? ?

• Macro:{{ qux(amount=5) }}

?

?{% endblock %}

extends標(biāo)簽聲明擴(kuò)展基模板，且必須是子模板的第一個(gè)標(biāo)簽。

我們?cè)诨０逯卸x了四個(gè)塊，在子模板中，我們可以對(duì)父模板中的塊執(zhí)行兩種操作：

（1）覆蓋內(nèi)容

在子模板創(chuàng)建同名的塊，會(huì)使用子塊的內(nèi)容覆蓋父塊的內(nèi)容。

（2）追加內(nèi)容

使用Jinja2提供的super()函數(shù)進(jìn)行聲明，這會(huì)向父塊添加內(nèi)容，例如（向基模板中的styles塊追加一行

?{% endblock %}

四、模板進(jìn)階實(shí)踐

模板在Flask程序中的常見應(yīng)用（加載靜態(tài)文件和自定義錯(cuò)誤頁面）

4.1、空白控制

在實(shí)際輸出的HTML文件中模板中的Jinja2語句、表達(dá)式和注釋會(huì)保留移除后的空行。

{% if user.bio %}

? ? ?{{ user.bio }}

?{% else %}

? ? ?This user has not provided a bio.

?{% endif %}

??

?# 實(shí)際輸出的HTML代碼：

??

?{{ user.bio }}

??

?This user has not provided a bio.

若想在渲染時(shí)自動(dòng)去掉這些空行，在定界符內(nèi)側(cè)添加減號(hào)。{%- endfor %}會(huì)移除該語句前的空白，同理，右邊可以移除該語句后面的空白

{% if user.bio -%}

? ? ?{{ user.bio }}

?{% else -%}

? ? ?This user has not provided a bio.

?{%- endif %}

??

?# 現(xiàn)在輸出的Html:

?{{ user.bio }}

?This user has not provided a bio.

除了使用減號(hào)，還可以使用模板環(huán)境對(duì)象提供的trim_blocks（刪除語句后的第一個(gè)空行）和lstrip_blocks屬性（刪除語句所在行之前的空格和制表符）設(shè)置。

?app.jinja_env.trim_blocks = True

?app.jinja_env.lstrip_blocks = True

??

?# trim_blocks值的block指的是使用{%...%}界定的代碼塊，與繼承的塊無關(guān)

宏內(nèi)的空白制作不受terim_blocks和lstrip_blocks屬性控制，我們需要手動(dòng)設(shè)置：

?{% macro qux(amount=1) %}

? ? {% if amount ==1 -%}

? ? ? ? I am qux.

? ? {% elif amount > 1 -%}

? ? ? ? We are quxs.

? ? {%- endif %}

?{% endmacro %}

事實(shí)上，我們沒必要嚴(yán)格控制HTML輸出，因?yàn)槎嘤嗟目瞻撞⒉挥绊憺g覽器的解析。

4.2、加載靜態(tài)文件

在Flask程序中，默認(rèn)將靜態(tài)文件存儲(chǔ)在與主腳本同級(jí)目錄的static文件夾中。

使用url_for()函數(shù)獲取靜態(tài)文件的URL在HTML模板中引用。Flask內(nèi)置了用于獲取靜態(tài)文件的視圖函數(shù)，端點(diǎn)值為static，它的默認(rèn)URL規(guī)則為/static/path:filename，URL變量filename是相對(duì)于static文件夾根目錄的文件路徑。

提示：若想使用其他文件夾來存儲(chǔ)靜態(tài)文件，可以在實(shí)例化Flask類時(shí)使用static_folder參數(shù)指定。在實(shí)例化Flask類時(shí)使用static_url_path參數(shù)則可以自定義靜態(tài)文件的URL路徑。

?

另外，我們還創(chuàng)建了一個(gè)存儲(chǔ)CSS規(guī)則的styles.css文件，加載方法：

?

4.2.1、添加Favicon

前兩章運(yùn)行的時(shí)候，會(huì)看到一條404狀態(tài)請(qǐng)求記錄，請(qǐng)求的URL是/favicon.ico

?127.0.0.1 - - [08/Feb/2024 18:30:12] "GET /Favicon.ico HTTP/1.1" 404 -

Favicon.icon文件指的是Favicon（收藏夾頭像/網(wǎng)站頭像），又稱shortcut.icon、tab icon、website.icon或是bookmark.icon。作為網(wǎng)站的特殊標(biāo)記。

將Favicon文件放在static目錄下，F(xiàn)lask中靜態(tài)文件的默認(rèn)路徑是/static/filename，為了正確返回Favicon，我們可以顯式的在HTML頁面中聲明Favicon的路徑。

?

4.2.2、使用CSS框架

自寫CSS比較麻煩，以Bootstrap為例，訪問官網(wǎng)下下載相應(yīng)的資源文件，然后分類放到static目錄下。

?{% block styles %}

? ?

?{% endblock %}

?...

?{% block scripts %}

?

?

?

?{% endblock %}

若是想簡(jiǎn)化開發(fā)過程，那么從CDN加載是更方便的做法。從CDN加載時(shí)，只需要將相應(yīng)的URL替換為CDN提供的資源URL，例：

?{% block styles %}

? ?

?{% endblock %}

4.2.3、使用宏加載靜態(tài)資源

創(chuàng)建一個(gè)專門用于加載靜態(tài)資源的宏，例如：

?{% macro static_file(type,filename_or_url,local=True) %}

? ? ?{% if local %}

? ? ? ? ?{% set filename_or_url = url_for('static',filename_or_url) %}

? ? ?{% endif %}

? ? ?{% if type == 'css' %}

? ? ? ?

? ? ?{% elif type == 'js' %}

? ? ? ?

? ? ?{% elif type == 'icon' %}

? ? ? ?

? ? ?{% endif %}

?{% endmacro %}

在模板 中導(dǎo)人宏后，只需在調(diào)用時(shí)傳入靜態(tài)資源 別和文件路徑就會(huì)獲得完整的資源加載語句

?# 使用它加載 css 文件的示例

?static_file('css','css/bootstrap.min.css')

??

?# 使用它加載CDN資源

?static_file ('css','https://maxcdn.../css/bootstrap.min.css’,local=False)

4.3、消息閃現(xiàn)

Flask提供的flash()函數(shù)用來“閃現(xiàn)”需要顯示給用戶的信息，比如當(dāng)用戶登錄成功后顯示“歡迎回來！”。

使用功能flash()函數(shù)發(fā)送的消息會(huì)存儲(chǔ)在session中（所有我們需要為程序設(shè)置密鑰。可以通過app.secret_key屬性或配置變量SECRET_KEY設(shè)置），我們需要在模板中使用全局函數(shù)get_flashed_messages()獲取消息并將其顯示出來。

?from flask import Flask, render_template, flash, redirect, url_for

??

?app = Flask(__name__)

?app.secret_key = 'secret string'

??

?@app.route('/flash')

?def just_flash():

? ? ?flash('I am flash, who is looking for me?')

? ? ?return redirect(url_for('index'))

在Python 2.x版本中，如果字符串包含中文或任何非ASCII字符，需要使用u前綴來聲明這個(gè)字符串為Unicode字符串。同時(shí)，需要在Python文件的首行添加編碼聲明，通常是# -*- coding: utf-8 -*-，這告訴Python使用UTF-8編碼來解碼字符串。這樣做可以避免發(fā)送中文消息時(shí)出現(xiàn)編碼問題。

?# -*- coding: UTF-8 -*-

?...

?@app.route('/flash')

?def just_flash():

? ? flash(u'你好！')

? ? return redirect(url_for('index'))

使用get_flashed_messages()函數(shù)渲染flash消息：

?

當(dāng)get_flashed_messages()函數(shù)被調(diào)用時(shí)，session中存儲(chǔ)的所有消息都會(huì)被移除。發(fā)現(xiàn)，重載后的頁面不再出現(xiàn)這條消息。

4.4、自定義錯(cuò)誤頁面

首先創(chuàng)建錯(cuò)誤頁面的模板文件，可在templates里面創(chuàng)建一個(gè)errors子文件夾，最常見的有404和500錯(cuò)誤的模板文件。下面是一個(gè)404.html模板示例

?{% extends 'base.html' %}

??

?{% block title %}404 - Page Not Found{% endblock %}

??

?{% block content %}

?

Page Not Found

?

You are lost...

?{% endblock %}

錯(cuò)誤處理函數(shù)需要附加app.errorhandler()裝飾器，并傳入錯(cuò)誤狀態(tài)碼作為參數(shù)。錯(cuò)誤處理函數(shù)本身則需要接收異常類作為參數(shù)，并在返回值中注明對(duì)應(yīng)的HTTP狀態(tài)碼。當(dāng)發(fā)生錯(cuò)誤時(shí)，對(duì)應(yīng)的錯(cuò)誤處理函數(shù)會(huì)被調(diào)用，它的返回值會(huì)作為錯(cuò)誤響應(yīng)的主體。

?...

?@app.errorhandler(404)

?def page_not_found(e):

? ? ?return render_template('errors/404.html'),404

Werkzeug內(nèi)置的HTTP異常類的常用屬性

屬性說明code狀態(tài)碼name原因短語description錯(cuò)誤描述，另外使用get_description()方法還可以獲取HTML格式的錯(cuò)誤描述代碼

4.5、JavaScript和CSS中的Jinja2

程序變大時(shí)，有時(shí)我們需要在JavaScript和CSS代碼中使用Jinja2提供的變量值，甚至是控制語句。比如通過傳入模板的theme_color變量來為頁面設(shè)置主題色彩，或是根據(jù)用戶是否登錄來決定是否執(zhí)行某個(gè)JavaScript函數(shù)

只有使用remder_template()傳入的模板文件才會(huì)被渲染，若把Jinja2代碼寫在單獨(dú)的JavaScript或是CSS文件中，盡管在HTML中引用了它們，也不會(huì)被執(zhí)行，以下是以下Tips：

4.5.1、行內(nèi)/嵌入式JavaScript/CSS

在HTML中使用

??

?# 在CSS文件中使用var()函數(shù)傳入變量名即可獲取對(duì)應(yīng)的變量值

?#foo {

? ? color: var(--theme-color);

?}

?#bar {

? ? background: var(--background-url);

?}

致謝

在此，我要對(duì)所有為知識(shí)共享做出貢獻(xiàn)的個(gè)人和機(jī)構(gòu)表示最深切的感謝。同時(shí)也感謝每一位花時(shí)間閱讀這篇文章的讀者，如果文章中有任何錯(cuò)誤，歡迎留言指正。?

學(xué)習(xí)永無止境，讓我們共同進(jìn)步??！

柚子快報(bào)激活碼778899分享：算法 Flask之模板

http://yzkb.51969.com/

好文推薦