本文参考来源The-Flask-Mega-Tutorial-zh在翻译的基础上加进了个人的部分理解，仅做个人的学习记录之用。
上一节我们使用Flask构建了自己的第一个Web应用，通过在虚拟环境运行flask run来启动，通过在浏览器中输入URL http://localhost:5000/来查看。
模板
Flask使用Jinja2作为默认模板引擎,让我们在了解此之前先使用Python字典来模拟一个用户：
user = {'username': 'Davil'}
通过模拟用户对象可以使我们来专注于主页的构建，在上一节中视图函数microblog\app\routes.py返回了Hello，World字串，这次让我们返回一完整的HTML页面。代码如下：
from app import my_app #从包app中导入实例化的my_app对象
# 装饰器语法糖，关联 index（）返回的页面与URL路径
@my_app.route('/')
@my_app.route('/index')
def index():
user = {'username': 'Devil'}#字典，使两者实现对应关系
return '''
<html>
<head>
<title>Home Page - Microblog</title>
</head>
<body>
<h1>Hello, ''' + user['username'] + '''!</h1>
</body>
</html>'''
此处使得HTML布局和应用程序的逻辑混杂在一起，不利于组织管理，在Flask中，模板为单独文件，放在microblog\templates文件夹下，让我们在此目录下新建第一个index.html模板：
<html>
<head>
<title>{{ title }} - Microblog</title>
</head>
<body>
<h1>Hello, {{ user.username }}!</h1><!--{{...}}中包含的内容是动态的，在此我把它理解为一个变量-->
</body>
</html>
由于在模板中定义了index.html，完成了页面迁移，这样就使视图函数得到简化，更新后的视图函数如下：
from flask import render_template #通过 render_template()方法渲染模板
from app import my_app
@my_app.route('/')
@my_app.route('/index')
def index():
user = {'username': 'Devil'}
return render_template('index.html', title='Home', user=user)#此函数第一个参数为模板路径文件名，后面的参数为向模板传递的键值对
将模板转换为完整的HTML页面的操作称为渲染,为了了解更多关于渲染模板及Flask的其他问题，可以访问此网站，开始提到Jinja2为Flask默认模板，Jinja2用render_template()函数传入的参数中的相应值替换{{...}}块，从index.html可知，其中包含两处动态内容，分别是<title>{{ title }} - Microblog</title>及<h1>Hello, {{ user.username }}!</h1>，通过渲染，进行了替换，若我们没有传入title=“Home”，又不想输出一个空标题，结合编程经验，我们可以通过条件语句解决这个问题。
条件语句
让我们使用条件语句更新index.html模板：
<html>
<head>
{% if title %} <!--模板内控制语句格式{%...%}-->
<title>{{ title }} - Microblog</title>
{% else %}
<title>Welcome to Microblog!</title>
{% endif %}
</head>
<body>
<h1>Hello, {{ user.username }}!</h1>
</body>
</html>
从上面代码可以看出若没有传入title参数，就会打印出Welcome to Microblog!标题
循环语句
下面使用模拟对象来创建一些模拟用户和动态
from flask import render_template
from app import app
@app.route('/')
@app.route('/index')
def index():
user = {'username': 'Devil'}
posts = [
{
'author': {'username': 'John'},
'body': 'Beautiful day in Portland!'
},
{
'author': {'username': 'Susan'},
'body': 'The Avengers movie was so cool!'
}
]
return render_template('index.html', title='Home', user=user, posts=posts)
在此处建立了一个列表，每个元素是一个字典
在模板方面，需要解决以通用的方式来渲染用户动态，通过for循环语句可以解决这个问题
<html>
<head>
{% if title %}
<title>{{ title }} - Microblog</title>
{% else %}
<title>Welcome to Microblog</title>
{% endif %}
</head>
<body>
<h1>Hi, {{ user.username }}!</h1>
{% for post in posts %}
<div><p>{{ post.author.username }} says: <b>{{ post.body }}</b></p></div>
{% endfor %}
</body>
</html>
此处可以运行起来应用，看看是不是可以看到用户动态了,本机运行如下：
模板的继承
大多Web应用在页面均有一个导航栏，就如同Wordpress搭建的网站上，有登入、登出、首页之类的，通过HTML可以轻松实现将这些功能添加进index.html里。不过，在浏览网站的过程中我们发现导航条存在于网站的每个页面中，这种会造成代码冗杂，通过模板继承可以解决这个问题，在此处想到了C++的继承，子类继承父类的方法和属性，有着异曲同工之妙。 下面进行基类模板的编写app/templates/base.html：
<html>
<head>
{% if title %}
<title>{{ title }} - Microblog</title>
{% else %}
<title>Welcome to Microblog</title>
{% endif %}
</head>
<body>
<div>Microblog: <a href="/index">Home</a></div>
<hr>
{% block Devil %}{% endblock %}
</body>
</html>
在这个基础模板中特殊的语句为{% block content %}{% endblock %}，content为定义的块名，基类中间如果包含有内容，则会被继承基类中的子项覆盖。而其为名称，我们可以对其进行重命名，在my_app中，将块名命名为Devil,则现在index.html可简化为：
{% extends "base.html" %}
<!--与模板块名对应-->
{% block Devil %}
<h1>Hi, {{ user.username }}!</h1>
{% for post in posts %}
<div><p>{{ post.author.username }} says: <b>{{ post.body }}</b></p></div>
{% endfor %}
{% endblock %}
第一句表明此模板继承于base.html,这样Jinja2就可知道将index.html嵌入基础模板当中，此种方式就减少了代码量，下面运行一下试试吧！本机的运行情况如下：
