? ? ?

?{% endset %}

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

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

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

2.1.2、自定義上下文

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

?@app.context_processor

?def inject_foo():

? ? ?foo = 'I am foo.'

? ? ?return dict(foo=foo)

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

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

?...

?def inject_foo():

? foo = 'I am foo.'

? return dict(foo=foo)

?app.context_processor(inject_foo)

使用lambda簡化為：

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

2.2、全局對象

全局對象值在所有模板中都可以直接使用的對象，包括在模板中導入的模板。

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

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

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

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

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

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

?← Return

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

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

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

?@app.template_global

?def bar():

? ? ?return 'I am bar'

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

2.3、過濾器

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

?{{ name|title }}

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

??

?{{ movies|length }}

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

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

?{% filter upper %}

? This text bacomes uppercase.

?{% endfilter %}

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

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

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

過濾器可以疊加使用：

?# 為變量name設置默認值，并將其標題化

?

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

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

?# safe過濾器

?{{ sanitied_text|safe }}

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

?from flask import Markup

??

?@app.route('/hello')

?def hello():

? ? ?text = Markup('

Hello,Flask!

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

2.3.2、自定義過濾器

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

?from flask import Markup

??

?@app.template_filter()

?def musical(s):

? return s + Markup(' ♫')

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

2.4、測試器

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

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

?{% if age is number %}

? ? {{ age * 365 }}

?{% else %}

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

?{% endif %}

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

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

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

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

?# 等同于

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

2.4.2、自定義測試器

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

?@app.template_test

?def baz(n):

? ? ?if n == 'baz':

? ? ? ? ?return True

? ? ?return False

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

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

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

?#使用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ù)、過濾器和測試器分別存儲在Environment對象的globals、filters和tests屬性中，都是字典對象。

2.5.1、添加自定義全局對象

和app.template_global()裝飾器不同，直接操作globals字典允許我們傳入任意Python對象，而不僅僅是函數(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、添加自定義測試器

?# 添加自定義測試器baz

?def baz(n):

? ? ?if n == 'baz':

? ? ? ? ?return True

? ? ?return False

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

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

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

3.1、局部模板

當多個獨立模板都會使用同一塊HTML代碼時，我們把這部分代碼抽離出來，存儲到局部模板中?？梢员苊庵貜陀址奖憬y(tǒng)一管理。

我們使用include標簽插入一個局部模板，這會把局部模板的全部內(nèi)容插在使用include標簽的位置：

?{% include '_banner.html' %}

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

3.2、宏

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

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

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

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

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

? ? ? ? I am qux.

? ? ?{% elif amount > 1 %}

? ? ? ? We are quxs.

? ? ?{% endif %}

?{% endmacro %}

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

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

?...

?{{ qux(amount=5) }}

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

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

使用include標簽插入的局部模板同樣可以使用上述。而導入一個并非被直接渲染的模板，這個模板僅包含下列對象：

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

因此，若想在導入的宏中使用第一個列表中的2，3,4項，就需要在導入時顯式地使用with context聲明傳入當前模板的上下文：

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

3.3、模板繼承

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

3.3.1、編寫基模板

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

?

?

?

? ? ?

? ? ?

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

?

?

?

?

?

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

?

?

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

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

?{% block body %}

?...

?{% endblock body %}

3.3.2、編寫子模板

在子模板中只需要對特定的塊進行修改。

?{% 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標簽聲明擴展基模板，且必須是子模板的第一個標簽。

我們在基模板中定義了四個塊，在子模板中，我們可以對父模板中的塊執(zhí)行兩種操作：

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

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

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

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

?{% endblock %}

四、模板進階實踐

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

4.1、空白控制

在實際輸出的HTML文件中模板中的Jinja2語句、表達式和注釋會保留移除后的空行。

{% if user.bio %}

? ? ?{{ user.bio }}

?{% else %}

? ? ?This user has not provided a bio.

?{% endif %}

??

?# 實際輸出的HTML代碼：

??

?{{ user.bio }}

??

?This user has not provided a bio.

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

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

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

?app.jinja_env.trim_blocks = True

?app.jinja_env.lstrip_blocks = True

??

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

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

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

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

? ? ? ? I am qux.

? ? {% elif amount > 1 -%}

? ? ? ? We are quxs.

? ? {%- endif %}

?{% endmacro %}

事實上，我們沒必要嚴格控制HTML輸出，因為多余的空白并不影響瀏覽器的解析。

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

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

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

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

?

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

?

4.2.1、添加Favicon

前兩章運行的時候，會看到一條404狀態(tài)請求記錄，請求的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)站的特殊標記。

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

?

4.2.2、使用CSS框架

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

?{% block styles %}

? ?

?{% endblock %}

?...

?{% block scripts %}

?

?

?

?{% endblock %}

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

?{% block styles %}

? ?

?{% endblock %}

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

創(chuàng)建一個專門用于加載靜態(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 %}

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

?# 使用它加載 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)”需要顯示給用戶的信息，比如當用戶登錄成功后顯示“歡迎回來！”。

使用功能flash()函數(shù)發(fā)送的消息會存儲在session中（所有我們需要為程序設置密鑰?？梢酝ㄟ^app.secret_key屬性或配置變量SECRET_KEY設置），我們需要在模板中使用全局函數(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前綴來聲明這個字符串為Unicode字符串。同時，需要在Python文件的首行添加編碼聲明，通常是# -*- coding: utf-8 -*-，這告訴Python使用UTF-8編碼來解碼字符串。這樣做可以避免發(fā)送中文消息時出現(xiàn)編碼問題。

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

?...

?@app.route('/flash')

?def just_flash():

? ? flash(u'你好！')

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

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

?

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

4.4、自定義錯誤頁面

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

?{% extends 'base.html' %}

??

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

??

?{% block content %}

?

Page Not Found

?

You are lost...

?{% endblock %}

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

?...

?@app.errorhandler(404)

?def page_not_found(e):

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

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

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

4.5、JavaScript和CSS中的Jinja2

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

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

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

在HTML中使用

??

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

?#foo {

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

?}

?#bar {

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

?}

致謝

在此，我要對所有為知識共享做出貢獻的個人和機構表示最深切的感謝。同時也感謝每一位花時間閱讀這篇文章的讀者，如果文章中有任何錯誤，歡迎留言指正。?

學習永無止境，讓我們共同進步?。?/p>

柚子快報激活碼778899分享：算法 Flask之模板

http://yzkb.51969.com/

好文推薦