之前我们建立已经建立了最小环境的web网站,而且浏览器页面返回Hello Guest的文本。虽然在这个页面我们可以加上html标签,如<h3>Hello Gutst</h3>丰富页面。但如果把大量的html语言写到同一个文件里,势必让文档结构混乱不堪。所以我们就可以用到Flask内置的jinja模板。
1、渲染模板文件
Flask通过渲染模板,把数据输入模板变量中。我们为index.py增加以下内容,来渲染模板文件。
from flask import Flask,render_template #从flask模块中导入Flask对象,导入render_template函数
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函数,用于渲染模板文件。
- 给定一个传入模板的user变量
- 用render_template函数指定渲染模板文件,传递指定变量
2、定义模板文件
模板文件其实就是一个文本文件,通常后缀名定义成html文件,模板文件里的变量可以接收应用传递来的值,并呈现出来。
在当前目录下的新建templates目录,并在该文件下新建index.html,代码内容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Default</title>
</head>
<body>
<h3>{{user}}</h3>
</body>
</html>
如直接用浏览器打开这个文件,页面仅显示{{user}},这个就是变量,接收来自应用的数据。
浏览器呈现效果如下:
2.1 模板中的判断
模板中可以定义条件语句,修改index.html模板文件内容如下:
<h3>{{user}}</h3>
{%else%}
<h3>Hello Guest</h3>
{%endif%}
格式:{%if%} {%elif%} {%else%} {%endif%}
当user变量为空时候,模板文件显示Hello Guest
2.2 模板中的循环
2.2.1模板可以循环显示应用传递的列表变量
index.py里增加列表变量数据
ages=[23,45,33,54,65,32,12,56,76,76,76]index.html模板文件增加循环显示
{%for age in ages|sort()%}
<li>{{age}}</li>
{%endfor%}
{{ages}}
格式
{%for * in *%} {{*}} {%endfor%}
sort()过滤器使传入的数据排序
参见以下效果图:
2.2模板可以循环显示应用传递的字典
- index.py文件里增加字典数据
scores=[{'name':'michael','age':99},{'name':'yanyan','age':98},{'name':'tim','age':100}]
- index.html模板文件循环显示
{%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可以在循环内迭代当前的索引,从1开始算
参见以下效果图:
3、模板复用
网页复用是网站设计非常重要的特性,比如页面头部的网站名称,用户登录信息。页面尾部的版权信息等。
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新增以下内容,增加一个新的路由(路由内容放在下节详述)
@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模板(中)