简介
Web 程序里，访问一个地址通常会返回一个包含各类信息的 HTML 页面。其中包含变量和运算逻辑的 HTML 或其他格式的文本叫做模板，执行这些变量替换和逻辑计算工作的过程被称为渲染。Flask 模板渲染是通过 Jinja2 引擎来完成的。
默认情况下，Flask 会从模块同级的 templates 目录下寻找模版。
应用场景与价值
使用模版的优点为:
- 动态内容：Flask 模板支持将动态数据插入 HTML 页面，从而可以创建个性化和交互式的 Web 应用程序。
- 代码重用：模板允许开发人员在多个页面之间重用常见的 HTML 组件，减少冗余代码，提高可维护性。
- 一致的设计：通过使用模板，开发人员可以确保应用程序在设计和布局上保持一致，从而实现专业和统一的用户体验。
- 与其他技术的集成：Flask 模板可以轻松与其他前端技术（如 CSS 框架和 JavaScript 库）集成，实现现代化和视觉上吸引人的 Web 界面。
模版渲染
- 在项目中创建模板的目录，注意模板的目录名称为
templates。 - 在
templates目录中创建 HTML 文件，创建完成之后，目录结构为：
./
├── xx.py
└── templates
└── hogwarts.html
3.在 hogwarts.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.0" />
<title>Hogwarts</title>
</head>
<body>
<h1>霍格沃兹平台</h1>
</body>
</html>
<script type="text/javascript"></script>
4.视图函数的返回使用 render_template() 渲染对应的 HTML 文件，代码如下：
from flask import Flask, render_template
# 创建 Flask 应用程序实例
app = Flask(__name__)
@app.route("/")
def hello():
return render_template("hogwarts.html")
# 运行应用程序
if __name__ == '__main__':
app.run(port=5055, debug=True)
5.启动服务，访问默认地址，即可看到渲染的 HTML 页面。
模版语法
利用 Jinja2 模板引擎，可以将一部分的程序逻辑放到模板中处理。也就是可以在模板中使用 python 语句和表达式来操作数据的输出。但需要注意的是，Jinja2 并不支持所有 python 语法。并且出于效率和代码组织等方面的考虑，应该适度使用模板，仅把和输出控制有关的逻辑操作放到模板中。
Jinja2 允许在模板中使用大部分 python 对象，比如字符串、列表、字典、元组、整型、浮点型、布尔值。它支持基本的运算符号（+、-、\*、/等）、比较符号（比如==、!=等）、逻辑符号（and、or、not 和括号）以及 in、is、None 和布尔值（True、False）。
- 变量代码块
{{ }}: 主要用于变量的内容显示。 - 控制代码块
{% %}: 主要用于涉及到与逻辑相关的代码块展示。
传递数据
在调用 render_template() 方法的时候，可以使用关键字传参的方式，给模板数据传递数据。
- 在
hogwarts.html的 body 标签中添加如下的 html 代码，其中{{ name }}代表模版中所包含的变量信息。
<!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.0" />
<title>Hogwarts</title>
</head>
<body>
<h1>霍格沃兹平台</h1>
<h2>{{ name }}</h2>
</body>
</html>
<script type="text/javascript"></script>
- 视图函数中调用方法
render_template('hogwarts.html, name='hogwarts')的时候，通过关键字传参的方式，将变量 name 的值传入进去。
from flask import Flask, render_template
# 创建 Flask 应用程序实例
app = Flask(__name__)
@app.route("/data")
def hogwarts():
return render_template("hogwarts.html", name="hogwarts")
# 运行应用程序
if __name__ == '__main__':
app.run(port=5055, debug=True)
- 启动服务，访问
/data路由，name 变量的位置会展示的传入的值，也就是 hogwarts。
判断语法
Flask 中的 Jinja2 模板提供了多种控制结构，通过这些控制结构可以改变模板的渲染过程。以下为条件控制语句。
<!-- if 条件判断-->
{% if 条件表达式 %}
.......
{% elif 条件表达式 %}
.......
{% else %}
.......
{% endif %}
示例：
from flask import Flask, render_template
# 创建 Flask 应用程序实例
app = Flask(__name__)
@app.route("/person")
def person():
person = {
"name": "lily",
"age": 18,
"gender": "female"
}
return render_template("person.html", person=person)
# 运行应用程序
if __name__ == '__main__':
app.run(port=5055, debug=True)
templates 目录下创建 person.html 文件。
<!-- person.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.0" />
<title>Title</title>
</head>
<body>
<p>
您好,
{% if person.gender == "male" %}
{{ person.name }} 先生
{% else %}
{{ person.name }} 女士
{% endif %}
</p>
</body>
</html>
<script type="text/javascript"></script>
在模板中，Jinja2 支持使用 . 获取变量的属性，比如 person 字典中的 gender 键值通过 . 获取，即 person.gender，在效果上等同于 person['gender']。
启动服务，访问 /person 路由，可以通过判断性别来展示对应的欢迎信息。
循环语法
和 python 里一样，for 语句用来迭代一个序列。
<!-- for 循环 -->
{% for row in list_or_dict %}
{{ row }}
{% endfor %}
示例：
from flask import Flask, render_template
# 创建 Flask 应用程序实例
app = Flask(__name__)
@app.route("/people")
def people():
people = [
{
"name": "lily",
"age": 18,
"gender": "female"
},
{
"name": "tom",
"age": 19,
"gender": "male"
},
]
return render_template("people.html", people=people)
# 运行应用程序
if __name__ == '__main__':
app.run(port=5055, debug=True)
templates 目录下创建 people.html 文件。
<!-- people.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.0" />
<title>Title</title>
</head>
<body>
{% for p in people %}
<p>
Hello,
{% if p.gender == "male" %}
Mr. {{ p.name }}
{% else %}
Ms. {{ p.name }}<br />
{% endif %}
Your age is {{ p.age }}<br />
Your gender is {{ p.gender }}<br />
</p>
{% endfor %}
</body>
</html>
<script type="text/javascript"></script>
启动服务，访问 /people 路由，页面中会展示列表中所有的人员信息，并且通过判断性别来展示对应的欢迎信息。
继承语法
模板继承允许创建一个基础的骨架模板， 这个模板包含网站的通用元素，并且定义子模板可以重载的区域。
一般在前端页面中有很多页面中有很多相同的地方，比如页面顶部的导航栏，底部的页脚等部分，这时候如果每一个页面都重写一遍，会很麻烦，而且也没必要。
这时候就可以做一个模板，叫做父模板，里面放上页面中相同的部分，不同的部分先使用其他东西占位。然后在不同的页面中，继承这个父模板，不同的部分填充不同的内容。
定义父模板
<!-- 父模版中定义，子模板可以直接继承重写 -->
{% block 自定义名称 %}
{% endblock %}
标签 block 用于在父模板中预留区域，留给子模板填充差异性的内容，名字不能相同。父模板中也可以使用上下文中传递过来的数据。
子模板继承父模版
{% extends '父模版' %}
layout.html文件是父模板，也可以看成是一个骨架：
<!-- layout.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.0" />
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
<div id="footer">
{% block footer %} © Copyright 2023 by
<a href="https://ceshiren.com">测试人社区</a>. {% endblock %}
</div>
</body>
</html>
<script type="text/javascript"></script>
这个父模版可以让继承者对 title、content、footer 三个地方进行定制。
son.html文件是子模版，是用来继承父模板的：
<!-- son.html -->
{% extends "layout.html" %}
{% block title %}Son Page{% endblock %}
{% block content %}
<h1>子模版</h1>
<button>按钮</button>
{% endblock %}
子模版继承了父模板，并对 title、content 进行定制。
- 定义视图函数，返回子模版 HTML 文件：
from flask import Flask, render_template
# 创建 Flask 应用程序实例
app = Flask(__name__)
@app.route("/extend")
def extend():
return render_template("son.html")
# 运行应用程序
if __name__ == '__main__':
app.run(port=5055, debug=True)
- 访问路由后，展示页面如下所示：
模版导入
模板导入就是将另一个模板加载到当前模板中，直接渲染。模板继承和类的继承含义是一样的，主要是为了提高代码重用，减轻开发工作量。
导入语法
{% include '文件名' %}
示例
创建顶部栏页面 top.html
<a>首页</a>
<a>关于</a>
在 son.html 中导入 top.html
{% extends "layout.html" %}
{% block title %}Son Page{% endblock %}
{% include "top.html" %}
{% block content %}
<h1>子模版</h1>
<button>按钮</button>
{% endblock %}
导入 top.html，该模版直接加载并渲染到当前模块中。
导入列表
也可以导入一个模板列表，程序会按照顺序依次寻找模板文件，第一个被找到的模板将被加载和渲染，后续的忽略。
{% include ['footer.html','bottom.html','top.html'] %}
忽略报错
此时，如果都没找到，程序会报错，如果想要忽略报错，可以在后面添加 ignore missing，用来忽略 include 语句。
{% include ['footer.html','bottom.html','end.html'] ignore missing %}
