Flask 模板基础

港控/mmm° 2022-02-05 10:23 321阅读 0赞

## 知识点总结： ##

<table style="width:420pt;"> 
 <tbody> 
  <tr> 
   <td style="width:81pt;"> <p style="margin-left:0cm;">一、基本用法</p> </td> 
   <td style="width:120pt;">&nbsp;</td> 
   <td style="width:219pt;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="width:81pt;"> <p style="margin-left:0cm;">1</p> </td> 
   <td style="width:120pt;"> <p style="margin-left:0cm;">模板引擎的理解</p> </td> 
   <td style="width:219pt;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="width:81pt;"> <p style="margin-left:0cm;">2</p> </td> 
   <td style="width:120pt;"> <p style="margin-left:0cm;">定界符</p> </td> 
   <td style="width:219pt;"> <p style="margin-left:0cm;">（语句、表达式、注释、支持"."）</p> </td> 
  </tr> 
  <tr> 
   <td style="width:81pt;"> <p style="margin-left:0cm;">3</p> </td> 
   <td style="width:120pt;"> <p style="margin-left:0cm;">模板语法</p> </td> 
   <td style="width:219pt;"> <p style="margin-left:0cm;">（支持大部分Python对象）、运算符号、比较符号、逻辑符号、以及in、is、None、布尔值（Ture;False）</p> </td> 
  </tr> 
  <tr> 
   <td style="width:81pt;"> <p style="margin-left:0cm;">4</p> </td> 
   <td style="width:120pt;"> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp; if&nbsp; 语法</p> </td> 
   <td style="width:219pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td style="width:81pt;"> <p style="margin-left:0cm;">5</p> </td> 
   <td style="width:120pt;"> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp; for 语法</p> </td> 
   <td style="width:219pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td style="width:81pt;"> <p style="margin-left:0cm;">6</p> </td> 
   <td style="width:120pt;"> <p style="margin-left:0cm;">&nbsp;&nbsp; 常用特殊变量</p> </td> 
   <td style="width:219pt;"> <p style="margin-left:0cm;">loop.index、 loop.index0、loop.length&nbsp; 等</p> </td> 
  </tr> 
  <tr> 
   <td style="width:81pt;"> <p style="margin-left:0cm;">7</p> </td> 
   <td style="width:120pt;"> <p style="margin-left:0cm;">渲染模板</p> </td> 
   <td style="width:219pt;"> <p style="margin-left:0cm;">render_template（）</p> </td> 
  </tr> 
  <tr> 
   <td style="width:81pt;"> <p style="margin-left:0cm;">8</p> </td> 
   <td style="width:120pt;"> <p style="margin-left:0cm;">传入变量类型</p> </td> 
   <td style="width:219pt;"> <p style="margin-left:0cm;">可以是字符串、列表和字典，也可以是函数、类和类实例，这完全取决于你在视图函数传入的值。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:81pt;"> <p style="margin-left:0cm;">二、辅助工具</p> </td> 
   <td style="width:120pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="width:219pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td style="width:81pt;"> <p style="margin-left:0cm;">9</p> </td> 
   <td style="width:120pt;"> <p style="margin-left:0cm;">在模板中定义变量</p> </td> 
   <td style="width:219pt;"> <p style="margin-left:0cm;">使用set标签</p> </td> 
  </tr> 
  <tr> 
   <td style="width:81pt;"> <p style="margin-left:0cm;">10</p> </td> 
   <td style="width:120pt;"> <p style="margin-left:0cm;">Flask内置上下文变量</p> </td> 
   <td style="width:219pt;"> <p style="margin-left:0cm;">config、request、session、g</p> </td> 
  </tr> 
  <tr> 
   <td style="width:81pt;"> <p style="margin-left:0cm;">11</p> </td> 
   <td style="width:120pt;"> <p style="margin-left:0cm;">自定义上下文</p> </td> 
   <td style="width:219pt;"> <p style="margin-left:0cm;">Flask提供了一个app.context_processor装饰器</p> </td> 
  </tr> 
  <tr> 
   <td style="width:81pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="width:120pt;"> <p style="margin-left:0cm;">全局对象</p> </td> 
   <td style="width:219pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td style="width:81pt;"> <p style="margin-left:0cm;">12</p> </td> 
   <td style="width:120pt;"> <p style="margin-left:0cm;">内置全局对象</p> </td> 
   <td style="width:219pt;"> <p style="margin-left:0cm;">常用的三个range([start,] stop [,step])</p> <p style="margin-left:0cm;">Lipsum(n=5,html=True,min=20,max=100)</p> <p style="margin-left:0cm;">dict(**items)</p> </td> 
  </tr> 
  <tr> 
   <td style="width:81pt;"> <p style="margin-left:0cm;">13</p> </td> 
   <td style="width:120pt;"> <p style="margin-left:0cm;">自定义全局函数</p> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="width:219pt;"> <p style="margin-left:0cm;">使用app.template_global装饰器直接将函数注册为模板全局函数。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:81pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="width:120pt;"> <p style="margin-left:0cm;">过滤器</p> </td> 
   <td style="width:219pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td style="width:81pt;"> <p style="margin-left:0cm;">14</p> </td> 
   <td style="width:120pt;"> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp; 基本用法</p> </td> 
   <td style="width:219pt;"> <p style="margin-left:0cm;">&nbsp;|&nbsp; 、叠加</p> </td> 
  </tr> 
  <tr> 
   <td style="width:81pt;"> <p style="margin-left:0cm;">15</p> </td> 
   <td style="width:120pt;"> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp; 语块过滤</p> </td> 
   <td style="width:219pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td style="width:81pt;"> <p style="margin-left:0cm;">16</p> </td> 
   <td style="width:120pt;"> <p style="margin-left:0cm;">常用内置过滤器</p> </td> 
   <td style="width:219pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td style="width:81pt;"> <p style="margin-left:0cm;">17</p> </td> 
   <td style="width:120pt;"> <p style="margin-left:0cm;">tojson</p> </td> 
   <td style="width:219pt;"> <p style="margin-left:0cm;">Flask内置过滤器</p> </td> 
  </tr> 
  <tr> 
   <td style="width:81pt;"> <p style="margin-left:0cm;">18</p> </td> 
   <td style="width:120pt;"> <p style="margin-left:0cm;">自定义过滤器</p> </td> 
   <td style="width:219pt;"> <p style="margin-left:0cm;">使用app.template_filter（）装饰器</p> </td> 
  </tr> 
 </tbody> 
</table>

## 一、：基本用法 ##

1、模板引擎：

模板引擎的作用就是读取并执行模板中的特殊语法标记，并根据传入的数据将变量替换为实际值，输出最终的HTML页面，这个过程被称为渲染（rendering）。Flask默认使用的模板引擎是Jinja2。

2、定界符

(1)语句       比如if判断、for循环等： \{%  ...  %\}

(2)表达式     比如字符串、变量、函数调用等 \{ \{   …  \}\}

(3)注释       \{\#...\#\}

(4)支持使用“.” 获取变量的属性。如user.username等同于 user\[‘username’\]

3、模板语法

(1)Jinja2允许你在模板中使用大部分Python对象，比如字符串、列表、字典、元组、整型、浮点型、布尔值。它支持基本的运算符号（+、-、\*、/等）、比较符号（比如==、！=等）、逻辑符号（and、or、not和括号）以及in、is、None和布尔值（True、False）。

(2) if 语法

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">{% if user.bio %}</p> <p style="margin-left:0cm;">&lt;i&gt;{ { user.bio }}&lt;/i&gt;</p> <p style="margin-left:0cm;">{% else %}</p> <p style="margin-left:0cm;">&lt;i&gt;This user has not provided a bio.&lt;/i&gt;</p> <p style="margin-left:0cm;">{% endif %}</p> </td> 
  </tr> 
 </tbody> 
</table>

（3）for语法

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">&lt;h1&gt;Members&lt;/h1&gt;</p> <p style="margin-left:0cm;">&lt;ul&gt;</p> <p style="margin-left:0cm;">{% for user in users %}</p> <p style="margin-left:0cm;">&nbsp; &lt;li&gt;{ { user.username|e }}&lt;/li&gt;</p> <p style="margin-left:0cm;">{% endfor %}</p> <p style="margin-left:0cm;">&lt;/ul&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">&lt;dl&gt;</p> <p style="margin-left:0cm;">{% <strong>for</strong> <span style="color:#FF0000;">key, value</span><strong> in</strong> my_dict.iteritems() %}</p> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp; &lt;dt&gt;{ { key|e }}&lt;/dt&gt;</p> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp; &lt;dd&gt;{ { value|e }}&lt;/dd&gt;</p> <p style="margin-left:0cm;">{% endfor %}</p> <p style="margin-left:0cm;">&lt;/dl&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

常用的Jinja2 for循环特殊变量

[http://jinja.pocoo.org/docs/2.10/templates/\#for][http_jinja.pocoo.org_docs_2.10_templates_for]

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:127.35pt;"> <p style="margin-left:0cm;">loop.index</p> </td> 
   <td style="vertical-align:top;width:287.45pt;"> <p style="margin-left:0cm;">循环迭代计数（从1开始）</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:127.35pt;"> <p style="margin-left:0cm;">loop.index0</p> </td> 
   <td style="vertical-align:top;width:287.45pt;"> <p style="margin-left:0cm;">循环迭代计数（从0开始）</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:127.35pt;"> <p style="margin-left:0cm;">loop.revindex</p> </td> 
   <td style="vertical-align:top;width:287.45pt;"> <p style="margin-left:0cm;">循环迭代倒序计数（从len开始，到1结束）</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:127.35pt;"> <p style="margin-left:0cm;">loop.revindex0</p> </td> 
   <td style="vertical-align:top;width:287.45pt;"> <p style="margin-left:0cm;">循环迭代倒序计数（从len－1开始，到0结束）</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:127.35pt;"> <p style="margin-left:0cm;">loop.first</p> </td> 
   <td style="vertical-align:top;width:287.45pt;"> <p style="margin-left:0cm;">是否为循环的第一个元素</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:127.35pt;"> <p style="margin-left:0cm;">loop.last&nbsp;</p> </td> 
   <td style="vertical-align:top;width:287.45pt;"> <p style="margin-left:0cm;">是否为循环的最后一个元素</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:127.35pt;"> <p style="margin-left:0cm;">loop.length&nbsp;&nbsp;&nbsp;</p> </td> 
   <td style="vertical-align:top;width:287.45pt;"> <p style="margin-left:0cm;">循环序列中元素的个数</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:127.35pt;"> <p style="margin-left:0cm;">loop.cycle&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p> </td> 
   <td style="vertical-align:top;width:287.45pt;"> <p style="margin-left:0cm;">在给定的序列中轮循，如上例在”odd”和”even”两个值间轮循</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:127.35pt;"> <p style="margin-left:0cm;">loop.depth&nbsp;&nbsp;&nbsp;&nbsp;</p> </td> 
   <td style="vertical-align:top;width:287.45pt;"> <p style="margin-left:0cm;">当前循环在递归中的层级（从1开始）</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:127.35pt;"> <p style="margin-left:0cm;">loop.depth0&nbsp;&nbsp;</p> </td> 
   <td style="vertical-align:top;width:287.45pt;"> <p style="margin-left:0cm;">当前循环在递归中的层级（从0开始）</p> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">{% for row in rows %}</p> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp; &lt;li class="{ { <strong>loop.cycle</strong>('odd', 'even') }}"&gt;{ { row }}&lt;/li&gt;</p> <p style="margin-left:0cm;">{% endfor %}</p> </td> 
  </tr> 
 </tbody> 
</table>

4、渲染模板

使用Flask提供的渲染函数**render\_template（）**

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">from flask import Flask, render_template</p> <p style="margin-left:0cm;">...</p> <p style="margin-left:0cm;">@app.route('/watchlist')</p> <p style="margin-left:0cm;">def watchlist():</p> <p style="margin-left:0cm;">return<strong> render_template</strong>('watchlist.html', user=user, movies=movies)</p> </td> 
  </tr> 
 </tbody> 
</table>

5、传入变量类型

传入Jinja2中的变量值可以是字符串、列表和字典，也可以是函数、类和类实例，这完全取决于你在视图函数传入的值。下面是一些示例：

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">&lt;p&gt;这是列表my_list的第一个元素：{ { my_list[0] }}&lt;/p&gt;</p> <p style="margin-left:0cm;">&lt;p&gt;这是元组my_tuple的第一个元素：{ { my_tuple[0] }}&lt;/p&gt;</p> <p style="margin-left:0cm;">&lt;p&gt;这是字典my_dict的键为name的值：{ { my_dict['name'] }}&lt;/p&gt;</p> <p style="margin-left:0cm;">&lt;p&gt;这是函数my_func的返回值：{ { my_func() }}&lt;/p&gt;</p> <p style="margin-left:0cm;">&lt;p&gt;这是对象my_object调用某方法的返回值：{ { my_object.name() }}&lt;/p&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

## 二、：模板辅助工具 ##

1、在模板中定义变量：使用set标签

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">{% <span style="color:#FF0000;">set </span>navigation = [('/', 'Home'), ('/about', 'About')] %}</p> </td> 
  </tr> 
 </tbody> 
</table>

你也可以将一部分模板数据定义为变量，使用set和endset标签声明开始和结束：

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;"><strong>{% set navigation %}</strong></p> <p style="margin-left:0cm;">&lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;</p> <p style="margin-left:0cm;">&lt;li&gt;&lt;a href="/about"&gt;About&lt;/a&gt;</p> <p style="margin-left:0cm;"><strong>{% endset %}</strong></p> </td> 
  </tr> 
 </tbody> 
</table>

2、内置上下文变量

Flask在模板上下文中提供了一些内置变量，可以在模板中直接使用。

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:106.1pt;"> <p style="margin-left:0cm;"><strong>config</strong></p> </td> 
   <td style="vertical-align:top;width:308.7pt;"> <p style="margin-left:0cm;">当前的配置对象</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:106.1pt;"> <p style="margin-left:0cm;"><strong>request</strong></p> </td> 
   <td style="vertical-align:top;width:308.7pt;"> <p style="margin-left:0cm;">当前的请求对象，在已激活的请求环境下可用</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:106.1pt;"> <p style="margin-left:0cm;"><strong>Session</strong></p> </td> 
   <td style="vertical-align:top;width:308.7pt;"> <p style="margin-left:0cm;">当前的会话对象，在已激活的请求环境下可用</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:106.1pt;"> <p style="margin-left:0cm;"><strong>g</strong></p> </td> 
   <td style="vertical-align:top;width:308.7pt;"> <p style="margin-left:0cm;">与请求绑定的全局变量，在已激活的请求环境下可用</p> </td> 
  </tr> 
 </tbody> 
</table>

3、自定义上下文

Flask提供了一个app.context\_processor装饰器，当调用render\_template（）函数渲染任意一个模板时，所有使用app.context\_processor装饰器注册的模板上下文处理函数（包括Flask内置的上下文处理函数）都会被执行，这些函数的返回值会被添加到模板中。

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;"><strong>@app.context_processor</strong></p> <p style="margin-left:0cm;">def inject_foo():</p> <p style="margin-left:0cm;">foo = 'I am foo.'</p> <p style="margin-left:0cm;">return dict(foo=foo) # 等同于return {'foo': foo}</p> </td> 
  </tr> 
 </tbody> 
</table>

可以在模板中直接使用foo变量。

除了使用app.context\_processor装饰器，也可以直接将其作为方法调用，传入模板上下文处理函数：

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">…</p> <p style="margin-left:0cm;">def inject_foo():</p> <p style="margin-left:0cm;">foo = 'I am foo.'</p> <p style="margin-left:0cm;">return dict(foo=foo)</p> <p style="margin-left:0cm;">app.context_processor(inject_foo)</p> </td> 
  </tr> 
 </tbody> 
</table>

使用lambda可以简化为：

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">app.context_processor(lambda: dict(foo='I am foo.'))</p> </td> 
  </tr> 
 </tbody> 
</table>

4、全局对象

（1）内置全局对象

jinja2在模板中默认提供了一些全局函数，常用的三个函数：

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:207.4pt;"> <p style="margin-left:0cm;"><strong>range([start,] stop [,step])</strong></p> </td> 
   <td style="vertical-align:top;width:207.4pt;"> <p style="margin-left:0cm;">与python 的range()用法相同</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:207.4pt;"> <p style="margin-left:0cm;">Lipsum(n=5,html=True,min=20,max=100)</p> </td> 
   <td style="vertical-align:top;width:207.4pt;"> <p style="margin-left:0cm;">生成随机文本，可在测试时用来填充页面。默认生成5段HTML文本，每段包含20-100个单词。</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:207.4pt;"> <p style="margin-left:0cm;"><strong>dict(**items)</strong></p> </td> 
   <td style="vertical-align:top;width:207.4pt;"> <p style="margin-left:0cm;">和Python 的 dict()用法相同</p> </td> 
  </tr> 
 </tbody> 
</table>

除了jinja2内置的全局函数，flask也在模板中内置了两个全局函数

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:207.4pt;"> <p style="margin-left:0cm;">url_for()</p> </td> 
   <td style="vertical-align:top;width:207.4pt;"> <p style="margin-left:0cm;">用于生成URL的函数</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:207.4pt;"> <p style="margin-left:0cm;">Get_flashed_message()</p> </td> 
   <td style="vertical-align:top;width:207.4pt;"> <p style="margin-left:0cm;">用于获取flash消息的函数</p> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">&lt;a href="{ { url_for('index') }}"&gt;&amp;larr; Return&lt;/a&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

（2）自定义全局函数

除了使用app.context\_processor注册模板上下文处理函数来传入函数，我们也可以使用app.template\_global装饰器直接将函数注册为模板全局函数。

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">@<strong>app.template_global()</strong></p> <p style="margin-left:0cm;">def bar():</p> <p style="margin-left:0cm;">return 'I am bar.'</p> </td> 
  </tr> 
 </tbody> 
</table>

你可以直接使用app.add\_template\_global（）方法注册自定义全局函数，传入函数对象和可选的自定义名称（name），比如app.add\_template\_global（your\_global\_function）。

5、过滤器

（1）基本用法

在Jinja2中，过滤器（filter）是一些可以用来修改和过滤变量值的特殊函数，过滤器和变量用一个竖线（管道符号）隔开，需要参数的过滤器可以像函数一样使用括号传递。

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:176.95pt;"> <p style="margin-left:0cm;">{ { name|title }}</p> </td> 
   <td style="vertical-align:top;width:237.85pt;"> <p style="margin-left:0cm;">这会将name变量的值标题化，相当于在Python里调用name.title（）</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:176.95pt;"> <p style="margin-left:0cm;">{ { movies|length }}</p> </td> 
   <td style="vertical-align:top;width:237.85pt;"> <p style="margin-left:0cm;">用length获取movies列表的长度</p> </td> 
  </tr> 
 </tbody> 
</table>

过滤器可以叠加使用:

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">&lt;h1&gt;Hello, { { name|default('陌生人')|title }}!&lt;/h1&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

（2）语块过滤：将过滤器作用于一部分模板数据，使用filter标签和endfilter标签声明开始和结束。下面使用upper过滤器将一段文字转换为大写：

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">{% filter upper %}</p> <p style="margin-left:0cm;">This text becomes uppercase.</p> <p style="margin-left:0cm;">{% endfilter %}</p> </td> 
  </tr> 
 </tbody> 
</table>

（3）常用内置过滤器

A字符串操作：

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">{# 当变量未定义时，显示默认字符串，可以缩写为d #}</p> <p style="margin-left:0cm;">&lt;p&gt;{ { name | default('No name', true) }}&lt;/p&gt;</p> <p style="margin-left:0cm;">&nbsp;{# 单词首字母大写 #}</p> <p style="margin-left:0cm;">&lt;p&gt;{ { 'hello' | capitalize }}&lt;/p&gt;</p> <p style="margin-left:0cm;">&nbsp;{# 单词全小写 #}</p> <p style="margin-left:0cm;">&lt;p&gt;{ { 'XML' | lower }}&lt;/p&gt;</p> <p style="margin-left:0cm;">&nbsp;{# 去除字符串前后的空白字符 #}</p> <p style="margin-left:0cm;">&lt;p&gt;{ { '&nbsp; hello&nbsp; ' | trim }}&lt;/p&gt;</p> <p style="margin-left:0cm;">&nbsp;{# 字符串反转，返回"olleh" #}</p> <p style="margin-left:0cm;">&lt;p&gt;{ { 'hello' | reverse }}&lt;/p&gt;</p> <p style="margin-left:0cm;">&nbsp;{# 格式化输出，返回"Number is 2" #}</p> <p style="margin-left:0cm;">&lt;p&gt;{ { '%s is %d' | format("Number", 2) }}&lt;/p&gt;</p> <p style="margin-left:0cm;">&nbsp;{# 关闭HTML自动转义在确保变量值安全的情况下，如果你想避免转义，将变量作为HTML解析，可以对变量使用safe过滤器：#}</p> <p style="margin-left:0cm;">&lt;p&gt;{ { '&lt;em&gt;name&lt;/em&gt;' | safe }}&lt;/p&gt;</p> <p style="margin-left:0cm;">{ { santitized_text|safe }}</p> <p style="margin-left:0cm;">{% autoescape false %}</p> <p style="margin-left:0cm;">{# HTML转义，即使autoescape关了也转义，可以缩写为e #}</p> <p style="margin-left:0cm;">&lt;p&gt;{ { '&lt;em&gt;name&lt;/em&gt;' | escape }}&lt;/p&gt;</p> <p style="margin-left:0cm;">{% endautoescape %}</p> </td> 
  </tr> 
 </tbody> 
</table>

B 数值操作

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">{# 四舍五入取整，返回13.0 #}</p> <p style="margin-left:0cm;">&lt;p&gt;{ { 12.8888 | round }}&lt;/p&gt;</p> <p style="margin-left:0cm;">&nbsp;{# 向下截取到小数点后2位，返回12.88 #}</p> <p style="margin-left:0cm;">&lt;p&gt;{ { 12.8888 | round(2, 'floor') }}&lt;/p&gt;</p> <p style="margin-left:0cm;">&nbsp;{# 绝对值，返回12 #}</p> <p style="margin-left:0cm;">&lt;p&gt;{ { -12 | abs }}&lt;/p&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

C 列表操作

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">{# 取第一个元素 #}</p> <p style="margin-left:0cm;">&lt;p&gt;{ { [1,2,3,4,5] | first }}&lt;/p&gt;</p> <p style="margin-left:0cm;">&nbsp;</p> <p style="margin-left:0cm;">{# 取最后一个元素 #}</p> <p style="margin-left:0cm;">&lt;p&gt;{ { [1,2,3,4,5] | last }}&lt;/p&gt;</p> <p style="margin-left:0cm;">&nbsp;</p> <p style="margin-left:0cm;">{# 返回列表长度，可以写为count #}</p> <p style="margin-left:0cm;">&lt;p&gt;{ { [1,2,3,4,5] | length }}&lt;/p&gt;</p> <p style="margin-left:0cm;">&nbsp;</p> <p style="margin-left:0cm;">{# 列表求和 #}</p> <p style="margin-left:0cm;">&lt;p&gt;{ { [1,2,3,4,5] | sum }}&lt;/p&gt;</p> <p style="margin-left:0cm;">&nbsp;</p> <p style="margin-left:0cm;">{# 列表排序，默认为升序 #}</p> <p style="margin-left:0cm;">&lt;p&gt;{ { [3,2,1,5,4] | sort }}&lt;/p&gt;</p> <p style="margin-left:0cm;">&nbsp;</p> <p style="margin-left:0cm;">{# 合并为字符串，返回"1 | 2 | 3 | 4 | 5" #}</p> <p style="margin-left:0cm;">&lt;p&gt;{ { [1,2,3,4,5] | join(' | ') }}&lt;/p&gt;</p> <p style="margin-left:0cm;">&nbsp;</p> <p style="margin-left:0cm;">{# 列表中所有元素都全大写。这里可以用upper,lower，但capitalize无效 #}</p> <p style="margin-left:0cm;">&lt;p&gt;{ { ['tom','bob','ada'] | upper }}&lt;/p&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

D 字典列表操作

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">{% set users=[{'name':'Tom','gender':'M','age':20},</p> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {'name':'John','gender':'M','age':18},</p> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {'name':'Mary','gender':'F','age':24},</p> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {'name':'Bob','gender':'M','age':31},</p> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {'name':'Lisa','gender':'F','age':19}]</p> <p style="margin-left:0cm;">%}</p> <p style="margin-left:0cm;">&nbsp;&nbsp;</p> <p style="margin-left:0cm;">{# 按指定字段排序，这里设reverse为true使其按降序排 #}</p> <p style="margin-left:0cm;">&lt;ul&gt;</p> <p style="margin-left:0cm;">{% for user in users | sort(attribute='age', reverse=true) %}</p> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;{ { user.name }}, { { user.age }}&lt;/li&gt;</p> <p style="margin-left:0cm;">{% endfor %}</p> <p style="margin-left:0cm;">&lt;/ul&gt;</p> <p style="margin-left:0cm;">&nbsp;</p> <p style="margin-left:0cm;">{# 列表分组，每组是一个子列表，组名就是分组项的值 #}</p> <p style="margin-left:0cm;">&lt;ul&gt;</p> <p style="margin-left:0cm;">{% for group in users|groupby('gender') %}</p> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp; &lt;li&gt;{ { group.grouper }}&lt;ul&gt;</p> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp; {% for user in group.list %}</p> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;{ { user.name }}&lt;/li&gt;</p> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp; {% endfor %}&lt;/ul&gt;&lt;/li&gt;</p> <p style="margin-left:0cm;">{% endfor %}</p> <p style="margin-left:0cm;">&lt;/ul&gt;</p> <p style="margin-left:0cm;">&nbsp;</p> <p style="margin-left:0cm;">{# 取字典中的某一项组成列表，再将其连接起来 #}</p> <p style="margin-left:0cm;">&lt;p&gt;{ { users | map(attribute='name') | join(', ') }}&lt;/p&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

详细的查看官方文档

[http://jinja.pocoo.org/docs/dev/templates/\#builtin-filters][http_jinja.pocoo.org_docs_dev_templates_builtin-filters]

（4）Flask内置过滤器 tojson

Flask提供了一个内置过滤器”tojson”，它的作用是将变量输出为JSON字符串。这个在配合Javascript使用时非常有用。我们延用上节字典列表操作中定义的”users”变量.

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">&lt;script type="text/javascript"&gt;</p> <p style="margin-left:0cm;">var users = { { users | tojson | safe }};</p> <p style="margin-left:0cm;">console.log(users[0].name);</p> <p style="margin-left:0cm;">&lt;/script&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

延用D 字典列表操作中定义的users变量。

（5）自定义过滤器

使用app.template\_filter（）装饰器可以注册自定义过滤器。

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">from flask import Markup</p> <p style="margin-left:0cm;">@app.template_filter()</p> <p style="margin-left:0cm;">def musical(s):</p> <p style="margin-left:0cm;">return s + Markup(' &amp;#9835;')</p> </td> 
  </tr> 
 </tbody> 
</table>

模板中使用：

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">{ { name|musical }}</p> </td> 
  </tr> 
 </tbody> 
</table>

也可以直接使用app.add\_template\_filter（）方法注册自定义过滤器，传入函数对象和可选的自定义名称（name），比如app.add\_template\_filter（your\_filter\_function）。

[http_jinja.pocoo.org_docs_2.10_templates_for]: http://jinja.pocoo.org/docs/2.10/templates/#for
[http_jinja.pocoo.org_docs_dev_templates_builtin-filters]: http://jinja.pocoo.org/docs/dev/templates/#builtin-filters