之前我們建立已經(jīng)建立了最小環(huán)境的web網(wǎng)站，而且瀏覽器頁面返回Hello Guest的文本祝拯。雖然在這個頁面我們可以加上html標簽甚带，如<h3>Hello Gutst</h3>豐富頁面她肯。但如果把大量的html語言寫到同一個文件里，勢必讓文檔結構混亂不堪鹰贵。所以我們就可以用到Flask內置的jinja模板晴氨。
1、渲染模板文件
Flask通過渲染模板碉输，把數(shù)據(jù)輸入模板變量中籽前。我們?yōu)閕ndex.py增加以下內容，來渲染模板文件敷钾。
from flask import Flask,render_template #從flask模塊中導入Flask對象,導入render_template函數(shù)
app=Flask(__name__) #把Flask對象付給app變量
@app.route('/') #添加路由/
def index():
user='Michael Hu' #設定user變量
return render_template('index.html',user=user) #使用render_template渲染index.html模板枝哄，傳遞user變量
if __name__=='__main__':
app.run(debug=True) #啟動app調試模式
- 導入render_template函數(shù)，用于渲染模板文件阻荒。
- 給定一個傳入模板的user變量
- 用render_template函數(shù)指定渲染模板文件膘格，傳遞指定變量
2、定義模板文件
模板文件其實就是一個文本文件财松，通常后綴名定義成html文件瘪贱，模板文件里的變量可以接收應用傳遞來的值，并呈現(xiàn)出來辆毡。
在當前目錄下的新建templates目錄菜秦，并在該文件下新建index.html，代碼內容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Default</title>
</head>
<body>
<h3>{{user}}</h3>
</body>
</html>
如直接用瀏覽器打開這個文件舶掖，頁面僅顯示{{user}}球昨，這個就是變量，接收來自應用的數(shù)據(jù)眨攘。
瀏覽器呈現(xiàn)效果如下：
2.1 模板中的判斷
模板中可以定義條件語句,修改index.html模板文件內容如下：
<h3>{{user}}</h3>
{%else%}
<h3>Hello Guest</h3>
{%endif%}
格式：{%if%} {%elif%} {%else%} {%endif%}
當user變量為空時候主慰，模板文件顯示Hello Guest
2.2 模板中的循環(huán)
2.2.1模板可以循環(huán)顯示應用傳遞的列表變量
index.py里增加列表變量數(shù)據(jù)
ages=[23,45,33,54,65,32,12,56,76,76,76]index.html模板文件增加循環(huán)顯示
{%for age in ages|sort()%}
<li>{{age}}</li>
{%endfor%}
{{ages}}
格式
{%for * in *%} {{*}} {%endfor%}
sort()過濾器使傳入的數(shù)據(jù)排序
參見以下效果圖：
2.2模板可以循環(huán)顯示應用傳遞的字典
- index.py文件里增加字典數(shù)據(jù)
scores=[{'name':'michael','age':99},{'name':'yanyan','age':98},{'name':'tim','age':100}]
- index.html模板文件循環(huán)顯示
{%for score in scores%}
<table border="1">
<tr>
<th>Index</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>{{loop.index}}</td>
<td>{{score.name}}</td>
<td>{{score.age}}</td>
</tr>
</table>
{%endfor%}
loop.index可以在循環(huán)內迭代當前的索引，從1開始算
參見以下效果圖：
3鲫售、模板復用
網(wǎng)頁復用是網(wǎng)站設計非常重要的特性共螺，比如頁面頭部的網(wǎng)站名稱，用戶登錄信息情竹。頁面尾部的版權信息等藐不。
3.1模板繼承
- 新建一個父模板base.html,模板包含title內容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{title}}</title>
</head>
<body>
Here is Base.html<br>
basevar:{{basevar}}
<hr>
{%block body%}{%endblock%}
</body>
</html>
{%block body%} {%endblock%}兩個大括弧代表子模板從這里繼承插入，其中body名字自定義秦效。
- 新建一個子模板child.html
{%extends 'base.html'%}
{%block body%}
Here is child.html
<br>
contentvar:{{contentvar}}
{%endblock%}
子模板從哪個父模板繼承通過extends標記
子模板的內容寫在{%block body%} {%endblock%}兩個大括弧內雏蛮。
- index.py新增以下內容，增加一個新的路由(路由內容放在下節(jié)詳述)
@app.route('/child')
def child():
title='Michael Index'
basevar='base var'
contentvar='content var'
return render_template('child.html',title=title,basevar=basevar,contentvar=contentvar)
參見以下效果圖：瀏覽器訪問child頁面阱州，分割符上的內容繼承自base.html
7. 補充內容
Flask默認模板文件都位于templates目錄下挑秉，也可以通過生成app對象修改默認目錄app = Flask(__name__,template_folder='tpl')
參考內容：使用Jinjia2模板（上）,使用Jinjia2模板（中）
