2.2 Jinja2模板的基本元素

在前面使用Jinja2模板文件的index.html和user.html中，页面元素比较简单。其实在Jinja2模板文件中可以有更多的元素，在本节将简要介绍Jinja2模板元素的知识。

2.2.1 变量

在本章前面实例的模板文件user.html中，“｛｛name｝｝”代码部分表示一个变量，功能是告诉模板引擎这个位置的信息由业务逻辑处理渲染。Jinja2引擎的功能十分强大，可以识别出所有类型的变量，甚至是一些复杂的类型，例如列表、字典和对象等。例如下面是一些在模板中使用变量的演示代码。

开发者要想修改变量的值，可以将过滤器名添加在变量名后面，在中间使用竖线分隔。例如在下面的演示代码中，在模板文件中以首字母大写的形式显示变量name的值。

在模板Jinja2中，比较常用的过滤器如下所示。

1）safe：在渲染变量值时不进行转义。在默认情况下，出于安全方面的考虑，Jinja2会转义所有变量。例如一个变量的值为<h1>Hello</h1>，则Jinja2会将其渲染成如下形式。

浏览器能显示这个h1元素，但不会进行解释。在很多情况下需要显示变量中存储的HTML代码，这时就可使用safe过滤器。

2）capitalize：把变量值的首字母转换成大写，将其他字母转换成小写。

3）lower：把变量值全部转换为小写。

4）upper：把所有变量值转换成大写。

5）title：把所有变量值中的每个单词的首字母都转换成大写。

6）trim：删除变量值中的首、尾空格。

7）striptags：在渲染前删除变量值中所有的HTML标签。

例如在下面的实例代码中，演示了在Flask Web程序的模板中使用变量的过程。

源码路径：daima\2\2-2\untitled\

编写Python文件untitled.py，主要实现代码如下所示。

在Flask Web程序中，可以将变量理解成一种特殊的占位符，告诉模板引擎这个位置的值从渲染模板时使用的数据中获取。在Flask模板中几乎可以识别所有数据类型的变量，例如整型、浮点型、元组、列表、字典等，甚至还可以识别自定义的复杂类型。例如在上述代码中，还识别了自定义实例对象myobj。

在模板文件index.html中显示变量的值，具体实现代码如下所示。

在浏览器中输入“http://127.0.0.1:5000/”后会显示变量的值，如图2-3所示。

注意：完整的过滤器列表可以在Jinja2官方文档（http://jinja.pocoo.org/docs/templates/#builtin-filters）中查看。

2.2.2 使用控制结构

在Flask的Jinja2模块中提供了多种控制结构，通过使用这些控制结构可以改变模板的渲染流程。例如下面的代码展示了在模板中使用条件控制语句的过程。

在下面的演示代码中，展示了使用for循环在模板中渲染一组元素的过程。

另外，模块Jinja2还支持宏功能，例如下面的演示代码。

为了可以重复使用上述宏功能，可以将上述模板保存在单独的模板文件macros.html中，然后在需要使用import语句导入即可，例如下面的演示代码。

在Flask的Jinja2模块中，可以通过模板继承重复使用代码，这类似于Python语言中的类继承。例如在代码中创建了一个名为base.html的基模板文件，具体演示代码如下所示。

接下来可在子模板中修改使用标签block定义的元素，例如在下面的演示代码中定义了名为head、title和body的块，其中title包含在head中。

在上述代码中，通过指令extends声明当前模板继承自base.html，在extends指令后面重新定义了基模板中的3个块，模板引擎会将其插入适当的位置。因为在基模板中的head块内容不能为空，所以在重新定义head块后可以使用方法super()获取原来的内容。

例如在下面的实例代码中，演示了在Flask Web程序的模板中使用控制结构的过程。

源码路径：daima\2\2-2\kong\

1）编写Python程序文件2-2.py，主要实现代码如下所示。

• 变量list1：使用rang()函数生成10个整数，从大到小排列(9~0)。

• 列表my_list：在里面保存了5个字典“键-值”对。

• 方法do_listreverse：实现了一个过滤器，过滤器返回变量list1的值。

• 方法add_template_filter：将定义的过滤器方法do_listreverse添加到模板中，在模板文件中的名字为listreverse。

2）在模板文件index.html中使用列表值和过滤器的值，主要实现代码如下所示。

在浏览器中输入“http://127.0.0.1:5000/”后会显示控制结构中的值，如图2-4所示。

2.2.3 包含页和宏

1. 包含页

在一个Flask Web项目中，为了提高程序的易维护性，通常将多次用到HTML代码保存为一个单独的HTML模板，当被用到时用include指令包含进来即可。例如在下面的演示代码中，引用了includes目录下的文件head.html。

在上述代码中，引号里的内容表示被引用文件的相对路径，其中includes是模板目录templates下的一个文件夹。当然，也可以将引用文件head.html直接保存在templates目录下，此时引用代码变为如下所示。

2. 宏macro

（1）宏的定义

先举一个例子，假设在如下代码中定义了一个<input/>的函数，再将这个函数做成宏，将一些参数修改成想要的默认值，然后在调用时可以像调用函数一样来操作。

通过上述代码定义了一个名为macro的宏，接下来可以通过如下代码调用这个宏。

（2）将宏的集合做成库

在Python程序中，为了使模板主页文件的内容更加简练，并且可读性更强，可以在一个HTML中将很多宏集合在一起，在用到这些宏时可以使用import语句调用，就像调用库函数一样。假设将上面定义的宏macro放在了模板文件hong.html中，那么可以通过下面的代码载入到文件中。

在此需要注意，必须在上述加载代码中使用as引用库名，否则在引用函数时不知道是从哪里引入的函数，就像在Python程序中使用函数一样。

例如在下面的实例代码中，演示了在Flask Web程序的模板中使用宏的过程。

源码路径：daima\2\2-2\hong\

1）编写Python文件hong.py，主要实现代码如下所示。

2）模板文件index.html用于显示系统主页，在此使用了模板文件yhong.html中的宏，具体实现代码如下所示。

3）在模板文件base.html中引用文件yhead.html，具体实现代码如下所示。

4）在模板文件yhead.html中引用了CSS样式文件，具体实现代码如下所示。

5）在模板文件yhong.html中定义了宏macro，具体实现代码如下所示。

在浏览器中输入“http://127.0.0.1:5000/”后会显示主页文件index.html，此文件会引用包含文件和宏，如图2-5所示。