1、 创建视图函数，将该模板内容进行渲染返回

@app.route('/')
def index():
    return render_template('temp_demo1.html')

访问：http://127.0.0.1:5000/ 运行测试
代码中传入字符串，列表，字典到模板中

@app.route('/')
def index():
    # 往模板中传入的数据
    my_str = 'Hello'
    my_int = 10
    my_array = [3, 4, 2, 1, 7, 9]
    my_dict = {
        'name': 'xiaoming',
        'age': 18
    }
    return render_template('temp_demo1.html',
          my_str=my_str,
          my_int=my_int,
          my_array=my_array,
          my_dict=my_dict
                           )

模板中代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
我的模板html内容
<br/>{{ my_str }}
<br/>{{ my_int }}
<br/>{{ my_array }}
<br/>{{ my_dict }}

</body>
</html>

运行效果

我的模板html内容 
Hello
10 
[3, 4, 2, 1, 7, 9] 
{'name': 'xiaoming', 'age': 18}

相关运算，取值

<br/> my_int + 10 的和为：{{ my_int + 10 }}
<br/> my_int + my_array第0个值的和为：{{ my_int + my_array[0] }}
<br/> my_array 第0个值为：{{ my_array[0] }}
<br/> my_array 第1个值为：{{ my_array.1 }}  # 传入的是个list，在模板语言中可以直接通过下标方式来取，下标可以不用加中括号[]，如：lis.1
<br/> my_dict 中 name 的值为：{{ my_dict['name'] }}
<br/> my_dict 中 age 的值为：{{ my_dict.age }}  # 传入的是字典可以直接通过dict.key方式来取，可以可以不写中括号[]

结果

my_int + 10 的和为：20 
my_int + my_array第0个值的和为：13 
my_array 第0个值为：3 
my_array 第1个值为：4 
my_dict 中 name 的值为：xiaoming 
my_dict 中 age 的值为：18

2、模板语言中的过滤器。
过滤器本质上就是一个python语言定义的一个方法，但是在模板语言中不能直接调用python的方法，只能通过过滤器的方式来调用。即python中定义方法，仍后将方法加入到过滤器列表中，加入后就可以在模板语言中进行调用，而且模板语言支持链式调用，比如：{{ "hello world" | reverse | upper }}
模板语言过滤器调用格式：{{variable | filter_func_name(*args)}}
没有参数时可以将参数括号省略如：{{variable | filter_func_name}}
链式调用：{{variable | filter_func_name1 | filter_func_name2}}
常见内建过滤器
字符串操作

safe：禁用转义
<p>{{ '<em>hello</em>' | safe }}</p>

capitalize：把变量值的首字母转成大写，其余字母转小写
<p>{{ 'hello' | capitalize }}</p>

lower：把值转成小写
<p>{{ 'HELLO' | lower }}</p>

upper：把值转成大写
<p>{{ 'hello' | upper }}</p>

title：把值中的每个单词的首字母都转成大写
<p>{{ 'hello' | title }}</p>

reverse：字符串反转
<p>{{ 'olleh' | reverse }}</p>

format：格式化输出
<p>{{ '%s is %d' | format('name',17) }}</p>

striptags：渲染之前把值中所有的HTML标签都删掉
<p>{{ '<em>hello</em>' | striptags }}</p>

truncate: 字符串截断
<p>{{ 'hello every one' | truncate(9)}}</p>

列表操作

first：取第一个元素
<p>{{ [1,2,3,4,5,6] | first }}</p>

last：取最后一个元素
<p>{{ [1,2,3,4,5,6] | last }}</p>

length：获取列表长度
<p>{{ [1,2,3,4,5,6] | length }}</p>

sum：列表求和
<p>{{ [1,2,3,4,5,6] | sum }}</p>

sort：列表排序
<p>{{ [6,2,3,1,5,4] | sort }}</p>

语句块过滤
{% filter upper %}
    #一大堆文字#
{% endfilter %}

自定义过滤器：
自定义过滤器有两种实现方式：
一种是通过Flask应用对象的 add_template_filter 方法
通过装饰器来实现自定义过滤器
重要：自定义的过滤器名称如果和内置的过滤器重名，会覆盖内置的过滤器。
方式一
通过调用应用程序实例的 add_template_filter 方法实现自定义过滤器。该方法第一个参数是函数名，第二个参数是自定义的过滤器名称：

def do_listreverse(li):
    # 通过原列表创建一个新列表
    temp_li = list(li)
    # 将新列表进行返转
    temp_li.reverse()
    return temp_li

app.add_template_filter(do_listreverse,'lireverse')

方式二
用装饰器来实现自定义过滤器。装饰器传入的参数是自定义的过滤器名称。

@app.template_filter('lireverse')
def do_listreverse(li):
    # 通过原列表创建一个新列表
    temp_li = list(li)
    # 将新列表进行返转
    temp_li.reverse()
    return temp_li

在 html 中使用该自定义过滤器

<br/> my_array 原内容：{{ my_array }}
<br/> my_array 反转：{{ my_array | lireverse }}

运行结果

my_array 原内容：[3, 4, 2, 1, 7, 9] 
my_array 反转：[9, 7, 1, 2, 4, 3]

4、控制代码块
控制代码块主要包含两个：

- if/else if /else / endif
- for / endfor

if语句
Jinja2 语法中的if语句跟 Python 中的 if 语句相似,后面的布尔值或返回布尔值的表达式将决定代码中的哪个流程会被执行:

{%if user.is_logged_in() %}
    <a href='/logout'>Logout</a>
{% else %}
    <a href='/login'>Login</a>
{% endif %}

过滤器可以被用在 if 语句中:

{% if comments | length > 0 %}
    There are {{ comments | length }} comments
{% else %}
    There are no comments
{% endif %}

循环
我们可以在 Jinja2 中使用循环来迭代任何列表或者生成器函数

{% for post in posts %}
    <div>
        <h1>{{ post.title }}</h1>
        <p>{{ post.text | safe }}</p>
    </div>
{% endfor %}

循环和if语句可以组合使用，以模拟 Python 循环中的 continue 功能，下面这个循环将只会渲染post.text不为None的那些post：

{% for post in posts if post.text %}
    <div>
        <h1>{{ post.title }}</h1>
        <p>{{ post.text | safe }}</p>
    </div>
{% endfor %}

在一个 for 循环块中你可以访问这些特殊的变量:
变量 描述

loop.index 当前循环迭代的次数（从 1 开始）
loop.index0 当前循环迭代的次数（从 0 开始）
loop.revindex 到循环结束需要迭代的次数（从 1 开始）
loop.revindex0 到循环结束需要迭代的次数（从 0 开始）
loop.first 如果是第一次迭代，为 True 。
loop.last 如果是最后一次迭代，为 True 。
loop.length 序列中的项目数。
loop.cycle 在一串序列间期取值的辅助函数。见下面示例程序。

在循环内部,你可以使用一个叫做loop的特殊变量来获得关于for循环的一些信息
比如：要是我们想知道当前被迭代的元素序号，并模拟Python中的enumerate函数做的事情，则可以使用loop变量的index属性,例如:

{% for post in posts%}
{{loop.index}}, {{post.title}}
{% endfor %}

会输出这样的结果

1, Post title
2, Second Post

cycle函数会在每次循环的时候,返回其参数中的下一个元素,可以拿上面的例子来说明:

{% for post in posts%}
{{loop.cycle('odd','even')}} {{post.title}}
{% endfor %}

会输出这样的结果：

odd Post Title
even Second Post

5、模板复用
总共有三种方式宏，继承，包含
宏(Macro)、继承(Block)、包含(include)均能实现代码的复用。
继承(Block)的本质是代码替换，一般用来实现多个页面中重复不变的区域。
宏(Macro)的功能类似函数，可以传入参数，需要定义、调用。
包含(include)是直接将目标模板文件整个渲染出来。

  1. 宏
    对宏(macro)的理解：
    把它看作 Jinja2 中的一个函数，它会返回一个模板或者 HTML 字符串
    为了避免反复地编写同样的模板代码，出现代码冗余，可以把他们写成函数以进行重用
    需要在多处重复使用的模板代码片段可以写入单独的文件，再包含在所有模板中，以避免重复
    使用
    定义宏

 {% macro input(name,value='',type='text') %}
       <input type="{{type}}" name="{{name}}"
              value="{{value}}" class="form-control">
   {% endmacro %}

调用宏

{{ input('name' value='zs')}}

这会输出

<input type="text" name="name"
    value="zs" class="form-control">

把宏单独抽取出来，封装成html文件，其它模板中导入使用，文件名可以自定义macro.html

{% macro function(type='text', name='', value='') %}
<input type="{{type}}" name="{{name}}"
value="{{value}}" class="form-control">

{% endmacro %}

在其它模板文件中先导入，再调用

{% import 'macro.html' as func %}
{% func.function() %}

代码演练
使用宏之前代码

<form>
    <label>用户名：</label><input type="text" name="username"><br/>
    <label>身份证号：</label><input type="text" name="idcard"><br/>
    <label>密码：</label><input type="password" name="password"><br/>
    <label>确认密码：</label><input type="password" name="password2"><br/>
    <input type="submit" value="注册">
</form>

定义宏
{#定义宏，相当于定义一个函数，在使用的时候直接调用该宏，传入不同的参数就可以了#}

{% macro input(label="", type="text", name="", value="") %}
<label>{{ label }}</label><input type="{{ type }}" name="{{ name }}" value="{{ value }}">
{% endmacro %}

使用宏

<form>
    {{ input("用户名：", name="username") }}<br/>
    {{ input("身份证号：", name="idcard") }}<br/>
    {{ input("密码：", type="password", name="password") }}<br/>
    {{ input("确认密码：", type="password", name="password2") }}<br/>
    {{ input(type="submit", value="注册") }}
</form>

2.继承
模板继承
模板继承是为了重用模板中的公共内容。一般Web开发中，继承主要使用在网站的顶部菜单、底部。这些内容可以定义在父模板中，子模板直接继承，而不需要重复书写。
标签定义的内容

{% block top %} {% endblock %}

相当于在父模板中挖个坑，当子模板继承父模板时，可以进行填充。
子模板使用 extends 指令声明这个模板继承自哪个模板
父模板中定义的块在子模板中被重新定义，在子模板中调用父模板的内容可以使用super()
父模板

base.html
{% block top %}
  顶部菜单
{% endblock top %}

{% block content %}
{% endblock content %}

{% block bottom %}
  底部
{% endblock bottom %}

子模板
extends指令声明这个模板继承自哪

{% extends 'base.html' %}
{% block content %}

需要填充的内容

{% endblock content %}

模板继承使用时注意点：
不支持多继承
为了便于阅读，在子模板中使用extends时，尽量写在模板的第一行。
不能在一个模板文件中定义多个相同名字的block标签。
当在页面中使用多个block标签时，建议给结束标签起个名字，当多个block嵌套时，阅读性更好。

3.包含
Jinja2模板中，除了宏和继承，还支持一种代码重用的功能，叫包含(Include)。它的功能是将另一个模板整个加载到当前模板中，并直接渲染。
include的使用

{% include 'hello.html' %}

包含在使用时，如果包含的模板文件不存在时，程序会抛出TemplateNotFound异常，可以加上 ignore missing 关键字。如果包含的模板文件不存在，会忽略这条include语句。
include 的使用加上关键字ignore missing

{% include 'hello.html' ignore missing %}

更多推荐

render_template模板渲染