上一篇教程教我们如何在Flask中设置一些路由，在这篇教程中，我们将看到页面模板在Flask中如何工作。我们创建的原始路由在访问给定的路由时向网络浏览器返回简单的字符串。字符串不足以创建一个网站，我们需要像HTML、CSS，也许还有一些JavaScript来为我们的用户创建更强大的页面。把所有这些代码放到一个长字符串中并返回是不可行的。这就是使用Flask时页面模板的作用。页面模板将允许我们把所有的HTML和相关数据存储在一个单独的HTML文件中，然后可以通过一行来加载。让我们来了解一下Flask中的Jinja页面模板。
将Flask模板放在哪里
为了在你的Flask应用程序中使用页面模板，你需要将它们存储在某个地方。这可以通过在存放app.py文件的同一目录下创建一个模板目录来实现。在我们的例子中，这是在一个名为flask-tutorial的文件夹中，所以我们现在要在这里创建这个目录。
如何制作Flask的HTML模板
在templates文件夹中，我们可以创建并存储HTML文件，这些文件将作为应用程序的模板。让我们继续，在模板目录下创建一个新的home.html文件。
我们可以在这个新的home.html文件中添加一些简单的HTML标记，像这样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Homepage</title>
</head>
<body>
<h1>Hello Home Page!</h1>
</body>
</html>
如何渲染Flask模板
现在我们有了一个实际的HTML文件，里面有一些标记，那么我们如何向网站的用户渲染或显示这个模板呢？我们可以通过修改app.py文件中的代码来使用**render_template()**函数来做到这一点。在下面的代码片段中，我们导入了所需的函数，然后在我们的主页路线中使用它。请注意，render_template()函数希望得到我们要渲染的模板的名字。在我们的例子中，这意味着我们将home.html传递给render_template()函数。
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('home.html')
@app.route('/about')
def about():
return 'This is a tutorial Flask app on serving routes'
看起来不错!
Jinja模板
这个模板是一个强大的模板引擎，是由负责Flask的人创建的。除了Flask之外，Jinja也被用于其他项目中。它相当流行，有许多不同的选项和功能，你可以用Jinja来使用。你可以查看Jinja网站，了解更多关于其功能和使用案例的细节。
传递数据到模板
在上面的例子中，我们可以看到如何使用Jinja模板和Flask通过render_template()函数加载一个静态HTML文件。在渲染过程中，我们还可以从app.py文件中传递一些数据到模板文件中。这一点很重要，因为我们可以通过它来创建动态页面，根据传入的数据来改变。让我们同时更新app.py文件和home.html文件，看看如何传递这些数据并在浏览器中显示。首先，让我们看看app.py中的变化。
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('home.html', name='Jinja')
@app.route('/about')
def about():
return 'This is a tutorial Flask app on serving routes'
注意到render_template()函数现在有一个第二个参数，即名称，传给它。在这种情况下，我们把这个值设置为 "Jinja"。
模板插值
我们怎样才能把我们指定的这个变量'name'，在模板中访问它呢？在Jinja中，你可以使用两个大括号，然后打出你的变量的名字，在这个例子中是'name'，然后是两个结束的大括号。这是一种插值的形式，所发生的是显示变量的值，而不是变量的名字。因此，这是我们更新的home.html文件，利用了Jinja中的大括号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Homepage</title>
</head>
<body>
<h1>Hello {{ name }}!</h1>
</body>
</html>
现在当主页被加载时，我们可以看到从app.py文件传递到home.html文件的'Jinja'的值被显示在屏幕上。
改变App.py中的值
为了巩固这个概念，让我们在app.py文件中为'name'变量尝试几个不同的值。我们将保留home.html文件不动，只有变量内容在这里被更新。
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('home.html', name='Flask')
@app.route('/about')
def about():
return 'This is a tutorial Flask app on serving routes'
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('home.html', name='Friend')
@app.route('/about')
def about():
return 'This is a tutorial Flask app on serving routes'
