如何在 Flask 应用程序中使用模板

作者选择了自由和开源基金作为写给捐款计划的一部分接受捐款。

介绍

Flask是一个轻量级的Python网络框架,提供用于在Python语言中创建Web应用程序的有用的工具和功能。

在开发 Web 应用程序时,重要的是将 business logic 与 presentation logic 分开。 business logic 是处理用户请求和对数据库进行对话的方式,以构建合适的响应方式。 presentation logic 是如何向用户呈现数据,通常使用 HTML 文件来构建响应 Web 页面的基本结构,以及 CSS 风格来设计 HTML 组件。例如,在社交媒体应用中,您可能只有在用户未登录时才能显示用户名域和密码域。如果用户登录,您会显示登录按钮,而不是登录按钮。这是演示逻辑。如果用户在其用户名和密码中的类型,您可以使用 Flask 执行业务逻辑:您可以从请求中提取数据(用户名和密码

在 Flask 中,您可以使用 Jinja 模板语言来渲染 HTML 模板。一个 template 是一个可以包含固定和动态内容的文件。当用户从您的应用程序(如索引页面或登录页面)中请求某些内容时,Jinja 允许您使用一个 HTML 模板来响应,在那里您可以使用许多在标准 HTML 中不可用的功能,如变量、if 陈述、for 循环、过滤器和模板继承等。

在本教程中,您将构建一个小型的Web应用程序,该应用程序可渲染多个HTML文件。您将使用变量将数据从服务器传输到模板。模板继承将帮助您避免重复。您将使用逻辑在模板中,如条件和循环,使用过滤器来修改文本,并使用Bootstrap工具包(https://getbootstrap.com/)来设计您的应用程序。

前提条件

在本教程中,我们将称呼我们的项目目录flask_app

Flask 安装在您的编程环境中,如《如何使用 Flask 和 Python 创建您的第一个 Web 应用程序》(How to Create Your First Web Application Using Flask and Python)(https://andsky.com/tech/tutorials/how-to-create-your-first-web-application-using-flask-and-python-3)。
了解基本的 Flask 概念,如路线和视图功能。如果您不熟悉 Flask,请参阅 [如何使用 Flask 和 Python 创建您的第一个 Web 应用程序》(INKL1))。了解基本的 HTML 概念。您可以查看我们的 How To Build A Website with HTML] 背景教程系列知识。( K

步骤 1 – 渲染模板并使用变量

确保您已激活您的环境并安装了 Flask,然后您可以开始构建您的应用程序。第一步是在索引页面上显示欢迎访客的消息。您将使用 Flask 的 render_template() 辅助函数为 HTML 模板提供响应。

首先,在您的flask_app目录中,打开名为app.py的文件进行编辑,使用nano或您最喜欢的文本编辑器:

1nano app.py

将下列代码添加到app.py文件中:

1[label flask_app/app.py]
2
3from flask import Flask, render_template
4
5app = Flask(__name__)
6
7@app.route('/')
8def hello():
9    return render_template('index.html')

保存并关闭文件。

在这个代码块中,您从flask包中导入Flask类和render_template()函数(https://flask.palletsprojects.com/en/2.0.x/api/#flask.render_template)。您使用Flask类创建您的app的Flask应用实例,然后使用app.route()装饰器定义一个名为hello()的 _view 函数(即返回 HTTP 响应的 Python 函数),将一个常规函数转换为视图函数。

接下来,您需要在您的flask_app目录中创建一个名为templates的目录中创建index.html模板文件,Flask 会搜索在templates目录中,这个目录被称为templates,所以这个名字很重要。

1mkdir templates

接下来,在模板目录中打开名为index.html的文件以进行编辑.这里的名称index.html不是标准要求的名称;您可以将其称为home.html或homepage.html或任何其他内容,如果您想要的话:

1nano templates/index.html

将以下 HTML 代码添加到 index.html 文件中:

 1[label flask_app/templates/index.html]
 2
 3<!DOCTYPE html>
 4<html lang="en">
 5<head>
 6    <meta charset="UTF-8">
 7    <title>FlaskApp</title>
 8</head>
 9<body>
10    <h1>Hello World!</h1>
11    <h2>Welcome to FlaskApp!</h2>
12</body>
13</html>

在这里,您设置了一个标题,添加了一个Hello World!消息作为一个H1标题,并创建了一个欢迎到FlaskApp!消息作为一个H2标题。

保存并关闭文件。

在您的flask_app目录中,您的虚拟环境已启用,请使用FLASK_APP环境变量告诉Flask关于应用程序(app.py在您的情况下),并将FLASK_ENV环境变量设置为开发,以便在开发模式下运行应用程序并访问调试程序。

1export FLASK_APP=app
2export FLASK_ENV=development

然后,使用flask run命令运行应用程序:

1flask run

当开发服务器运行时,请使用您的浏览器访问以下URL:

1http://127.0.0.1:5000/

你会看到页面的标题设置为FlaskApp,两个标题是HTML。

在 Web 应用程序中,您通常需要将应用程序的 Python 文件中的数据传输到您的 HTML 模板中,以便在本应用程序中展示如何做到这一点,您将将包含当前 UTC 日期和时间的变量传输到索引模板中,并显示模板中的变量值。

离开服务器运行,并打开您的app.py文件以在新终端中进行编辑:

1nano app.py

从 Python 标准库中导入 datetime模块并编辑 index() 函数,使文件看起来如下:

1[label flask_app/app.py]
2import datetime
3from flask import Flask, render_template
4
5app = Flask(__name__)
6
7@app.route('/')
8def hello():
9    return render_template('index.html', utc_dt=datetime.datetime.utcnow())

保存并关闭文件。

在这里,您导入了datetime模块,并将名为utc_dt的变量传输到index.html模板中,其值为datetime.datetime.utcnow(),即当前UTC日期和时间。

接下来,要在索引页面上显示变量的值,请打开index.html文件进行编辑:

1nano templates/index.html

编辑文件以显示如下:

 1[label flask_app/templates/index.html]
 2<!DOCTYPE html>
 3<html lang="en">
 4<head>
 5    <meta charset="UTF-8">
 6    <title>FlaskApp</title>
 7</head>
 8<body>
 9    <h1>Hello World!</h1>
10    <h2>Welcome to FlaskApp!</h2>
11    <h3>{{ utc_dt }}</h3>
12</body>
13</html>

保存并关闭文件。

您添加了一个 H3 标题,使用特殊的 {{... }} 划界器来打印 utc_dt 变量的值。

打开您的浏览器并访问索引页面:

1http://127.0.0.1:5000/

你会看到一个类似于下面的图像的页面:

The Index Page

您现在已经在您的 Flask 应用程序中创建了具有 HTML 模板的索引页面,渲染了模板,并通过并显示了变量值。

步骤 2 – 使用模板继承

在此步骤中,您将创建一个可与其他模板共享的内容的基板模板. 您将编辑索引模板以继承基板模板. 然后,您将创建一个新页面,该页面将作为您的应用程序的关于页面,用户可以找到有关您的应用程序的更多信息。

一个 _base 模板包含 HTML 组件,这些组件通常在所有其他模板之间共享,例如应用程序的标题、导航栏和脚印。

首先,打开一个名为base.html的新文件,在您的模板目录中进行编辑:

1nano templates/base.html

请在您的 base.html 文件中写下以下代码:

 1[label flask_app/templates/base.html]
 2
 3<!DOCTYPE html>
 4<html lang="en">
 5<head>
 6    <meta charset="UTF-8">
 7    <title>{% block title %} {% endblock %} - FlaskApp</title>
 8    <style>
 9        nav a {
10            color: #d64161;
11            font-size: 3em;
12            margin-left: 50px;
13            text-decoration: none;
14        }
15    </style>
16</head>
17<body>
18    <nav>
19        <a href="#">FlaskApp</a>
20        <a href="#">About</a>
21    </nav>
22    <hr>
23    <div class="content">
24        {% block content %} {% endblock %}
25    </div>
26</body>
27</html>

保存并关闭文件。

这个文件中的大部分代码是标准的HTML,一个标题,一些导航链接的样式,一个带有两个链接的导航栏,一个用于索引页面和一个尚未创建的关于页面,以及一个<div>页面内容。

但是,以下突出部分是Jinja模板引擎的特征:

{% block title %} {% endblock %}: 一个作为标题的位置持有者的区块(https://jinja.palletsprojects.com/en/3.0.x/templates/#base-template):您将后来在其他模板中使用它来为您的应用程序中的每个页面提供自定义标题,而无需每次重写整个 <head> 部分
{% block content %} {% endblock %}: 另一个区块将取代内容,取决于 child template(继承于 base.html 的模板)将取代它。

现在你有一个基础模板,你可以利用继承来利用它。

1nano templates/index.html

然后将其内容替换为如下:

1[label flask_app/templates/index.html]
2{% extends 'base.html' %}
3
4{% block content %}
5    <h1>{% block title %} Index {% endblock %}</h1>
6    <h1>Hello World!</h1>
7    <h2>Welcome to FlaskApp!</h2>
8    <h3>{{ utc_dt }}</h3>
9{% endblock %}

在这里,您使用{% extends %}标签来继承从base.html模板中。

此内容块包含一个<h1>标签,标题块内的文本Index,这反过来会用文本Index代替base.html模板中的原始标题块,使完整的标题变成Index - FlaskApp。

然后你还有几个标题:一个<h1>标题与文本Hello World!、一个<h2>标题和一个含有utc_dt变量值的<h3>标题。

模板继承允许您在其他模板中重复使用HTML代码(在这种情况下是base.html),而无需每次重复使用。

保存和关闭文件,并更新您的浏览器上的索引页面。

The Index Page After Inheritance

接下来,您将创建关于页面. 打开app.py文件以添加新的路线:

1nano app.py

添加下列路径到文件的末尾:

1[label flask_app/app.py]
2
3# ...
4@app.route('/about/')
5def about():
6    return render_template('about.html')

在这里,您使用app.route()装饰器创建一个名为about()的视图函数,在其中,您将返回调用render_template()函数的结果,以about.html模板文件名为参数。

保存并关闭文件。

打开一个名为about.html的模板文件来编辑:

1nano templates/about.html

将以下代码添加到文件中:

1[label flask_app/templates/about.html]
2
3{% extends 'base.html' %}
4
5{% block content %}
6    <h1>{% block title %} About {% endblock %}</h1>
7    <h3>FlaskApp is a Flask web application written in Python.</h3>
8{% endblock %}

在这里,您可以使用扩展标签继承从基础模板,用<h1>标签代替基础模板的内容块,该标签也作为页面的标题,并添加<h3>标签,其中包含一些关于应用程序的信息。

保存并关闭文件。

当开发服务器运行时,请使用您的浏览器访问以下URL:

1http://127.0.0.1:5000/about

你会看到一个类似于以下的页面:

About Page

注意导航栏和标题的一部分是如何从基础模板中继承的。

您现在已经创建了一个基础模板,并在索引页面和关于页面中使用它,以避免代码重复。导航栏中的链接此时没有任何作用。

步骤 3 – 页面之间的链接

在此步骤中,您将学习如何使用 url_for() 帮助函数在模板中的页面之间链接,您将添加两个链接到基板模板中的导航栏,一个用于索引页面,一个用于关于页面。

首先打开您的编辑基础模板:

1nano templates/base.html

编辑文件以显示如下:

 1[label flask_app/templates/base.html]
 2<!DOCTYPE html>
 3<html lang="en">
 4<head>
 5    <meta charset="UTF-8">
 6    <title>{% block title %} {% endblock %} - FlaskApp</title>
 7    <style>
 8        nav a {
 9            color: #d64161;
10            font-size: 3em;
11            margin-left: 50px;
12            text-decoration: none;
13        }
14    </style>
15</head>
16<body>
17    <nav>
18        <a href="{{ url_for('hello') }}">FlaskApp</a>
19        <a href="{{ url_for('about') }}">About</a>
20    </nav>
21    <hr>
22    <div class="content">
23        {% block content %} {% endblock %}
24    </div>
25</body>
26</html>

在这里,您使用特殊的 url_for()函数,该函数将返回您提供的视图函数的 URL。第一个链接链接到 hello() 视图函数(即索引页)的路线。第二个链接链接到 about() 视图函数的路线。

使用url_for()函数来构建URL,可以帮助您更好地管理URL。如果您使用硬代码的URL,如果您编辑路线,您的链接将被破坏。使用url_for(),您可以编辑路线,并确保链接仍然按预期工作。

保存并关闭文件。

现在转到索引页面并尝试导航栏中的链接,你会看到它们按预期工作。

您已经学会了如何使用url_for()函数链接到您的模板中的其他路径,接下来,您将添加一些条件陈述来控制您的模板中所显示的内容,取决于您设置的条件,并使用模板中的for循环来显示列表项目。

步骤 4 – 使用条件和循环

在此步骤中,您将使用模板中的如果陈述来控制要根据某些条件显示的内容。您还将使用为循环来浏览Python列表并显示列表中的每个项目。

首先,你会为评论页面创建一条路线. 打开你的 app.py 文件进行编辑:

1nano app.py

添加下列路径到文件的末尾:

 1[label flask_app/app.py]
 2
 3# ...
 4
 5@app.route('/comments/')
 6def comments():
 7    comments = ['This is the first comment.',
 8                'This is the second comment.',
 9                'This is the third comment.',
10                'This is the fourth comment.'
11                ]
12
13    return render_template('comments.html', comments=comments)

在上面的路径中,你有一个名为评论的Python列表,其中包含四个项目(这些评论通常来自真实情况下的数据库,而不是像你在这里一样硬编码)。

保存并关闭文件。

接下来,在模板目录中打开一个新的comments.html文件来编辑:

1nano templates/comments.html

将以下代码添加到文件中:

 1[label flask_app/templates/comments.html]
 2{% extends 'base.html' %}
 3
 4{% block content %}
 5    <h1>{% block title %} Comments {% endblock %}</h1>
 6    <div style="width: 50%; margin: auto">
 7        {% for comment in comments %}
 8        <div style="padding: 10px; background-color: #EEE; margin: 20px">
 9            <p style="font-size: 24px">{{ comment }}</p>
10        </div>
11        {% endfor %}
12    </div>
13{% endblock %}

在这里,您扩展了base.html模板并取代了内容块的内容,首先,您使用一个<h1>标题,它也作为页面的标题。

您在字段中使用 Jinja for 循环 {% for comment in comments %} 来浏览评论列表中的每个评论(将其存储在评论变量中)。您在<p style="font-size: 24px">{{ comment }}</p> 标签中显示评论,就像您在 Jinja 中通常会显示变量一样。

保存并关闭文件。

随着开发服务器运行,打开您的浏览器并访问评论页面:

1http://127.0.0.1:5000/comments

你会看到一个类似于以下的页面:

Comments Page

现在,您将在模板中使用如果条件语句,通过显示具有灰色背景的异常索引号的评论,以及具有蓝色背景的均匀索引号的评论。

打开您的comments.html模板文件来编辑:

1nano templates/comments.html

编辑它看起来如下:

 1[label flask_app/templates/comments.html]
 2{% extends 'base.html' %}
 3
 4{% block content %}
 5    <h1>{% block title %} Comments {% endblock %}</h1>
 6    <div style="width: 50%; margin: auto">
 7        {% for comment in comments %}
 8            {% if loop.index % 2 == 0 %}
 9                {% set bg_color = '#e6f9ff' %}
10            {% else %}
11                {% set bg_color = '#eee' %}
12            {% endif %}
13
14            <div style="padding: 10px; background-color: {{ bg_color }}; margin: 20px">
15                <p>#{{ loop.index }}</p>
16                <p style="font-size: 24px">{{ comment }}</p>
17            </div>
18        {% endfor %}
19    </div>
20{% endblock %}

通过此新编辑,您在行中添加了if语句{% if loop.index % 2 == 0 %}。 ‘loop’变量是一个特殊的Jinja变量,为您提供有关当前循环的信息。

这里的如果声明检查指数是否甚至使用%运算符。它检查指数数的剩余部分以2分割;如果剩余的指数是0,则意味着指数数是平的,否则指数数是奇怪的。您使用{% set %}标签来声明名为bg_color的变量。如果指数号是平的,则将其设置为蓝色色,否则,如果指数号是奇怪的,则将bg_color变量设置为灰色。

保存并关闭文件。

打开您的浏览器并访问评论页面:

1http://127.0.0.1:5000/comments

你会看到你的新评论页面:

Comments Page With Alternating Background Colors

这是一个演示如何使用如果语句,但你也可以通过使用特殊的loop.cycle()Jinja助手来实现同样的效果。

1nano templates/comments.html

编辑它看起来如下:

 1[label flask_app/templates/comments.html]
 2
 3{% extends 'base.html' %}
 4
 5{% block content %}
 6    <h1>{% block title %} Comments {% endblock %}</h1>
 7    <div style="width: 50%; margin: auto">
 8        {% for comment in comments %}
 9            <div style="padding: 10px;
10                        background-color: {{ loop.cycle('#EEE', '#e6f9ff') }};
11                        margin: 20px">
12                <p>#{{ loop.index }}</p>
13                <p style="font-size: 24px">{{ comment }}</p>
14            </div>
15        {% endfor %}
16    </div>
17{% endblock %}

在这里,您删除了if/else语句,并使用loop.cycle(#EEE)、#e6f9ff)`辅助器来循环两种颜色之间。

保存并关闭文件。

在浏览器中打开评论页面,更新它,你会看到这与如果语句具有相同的效果。

您可以使用如果语句用于多个目的,包括控制页面上显示的内容,例如,要显示除第二个语句外的所有评论,您可以使用如果语句,条件为loop.index!= 2来过滤第二个评论。

打开评论模板:

1nano templates/comments.html

然后编辑它看起来如下:

 1[label flask_app/templates/comments.html]
 2{% extends 'base.html' %}
 3
 4{% block content %}
 5    <h1>{% block title %} Comments {% endblock %}</h1>
 6    <div style="width: 50%; margin: auto">
 7        {% for comment in comments %}
 8            {% if loop.index != 2 %}
 9                <div style="padding: 10px;
10                            background-color: #EEE;
11                            margin: 20px">
12                    <p>#{{ loop.index }}</p>
13                    <p style="font-size: 24px">{{ comment }}</p>
14                </div>
15            {% endif %}
16        {% endfor %}
17    </div>
18{% endblock %}

在这里,您只使用{% if loop.index!= 2 %}显示没有索引2的评论,这意味着除了第二个评论之外的所有评论。

保存并关闭文件。

更新评论页面,你会看到第二条评论没有显示。

现在您需要添加一个链接,将用户带到导航栏中的评论页面。

1nano templates/base.html

通过添加一个新的<a>链接来编辑<nav>标签的内容:

 1[label flask_app/templates/base.html]
 2<!DOCTYPE html>
 3<html lang="en">
 4<head>
 5    <meta charset="UTF-8">
 6    <title>{% block title %} {% endblock %} - FlaskApp</title>
 7    <style>
 8        nav a {
 9            color: #d64161;
10            font-size: 3em;
11            margin-left: 50px;
12            text-decoration: none;
13        }
14    </style>
15</head>
16<body>
17    <nav>
18        <a href="{{ url_for('hello') }}">FlaskApp</a>
19        <a href="{{ url_for('comments') }}">Comments</a>
20        <a href="{{ url_for('about') }}">About</a>
21    </nav>
22    <hr>
23    <div class="content">
24        {% block content %} {% endblock %}
25    </div>
26</body>
27</html>

在这里,您使用url_for()助手链接到comments()视图函数。

保存并关闭文件。

导航栏现在将有一个新的链接,链接到评论页面。

你在模板中使用如果语句来控制要根据某些条件显示的内容;你使用为循环来浏览Python列表并显示列表中的每个项目,你了解了Jinja中的特殊循环变量;接下来,你会使用Jinja过滤器来控制变量数据的显示方式。

步骤五:使用过滤器

在此步骤中,您将学习如何在模板中使用 Jinja 过滤器. 您将使用上方过滤器来转换您在上一步中添加的评论,您将使用加入过滤器将字符串连接到一个字符串中,并且您将学习如何使用安全过滤器来渲染可信的 HTML 代码而不逃避它。

首先,你会将评论页面的评论转换为 uppercase. 打开 comments.html 模板进行编辑:

1nano templates/comments.html

编辑它看起来如下:

 1[label flask_app/templates/comments.html]
 2{% extends 'base.html' %}
 3
 4{% block content %}
 5    <h1>{% block title %} Comments {% endblock %}</h1>
 6    <div style="width: 50%; margin: auto">
 7        {% for comment in comments %}
 8            {% if loop.index != 2 %}
 9                <div style="padding: 10px;
10                            background-color: #EEE;
11                            margin: 20px">
12                    <p>#{{ loop.index }}</p>
13                    <p style="font-size: 24px">{{ comment | upper }}</p>
14                </div>
15            {% endif %}
16        {% endfor %}
17    </div>
18{% endblock %}

在这里,您使用管道符号(‘███’)添加了‘上方’ 过滤器。

保存并关闭文件。

随着开发服务器运行,请使用您的浏览器打开评论页面:

1http://127.0.0.1:5000/comments

您可以看到评论在应用过滤器后全部出现。

过滤器还可以将参数列为列表。要证明这一点,您将使用加入过滤器加入评论列表中的所有评论。

打开评论模板:

1nano templates/comments.html

编辑它看起来如下:

 1[label flask_app/templates/comments.html]
 2{% extends 'base.html' %}
 3
 4{% block content %}
 5    <h1>{% block title %} Comments {% endblock %}</h1>
 6    <div style="width: 50%; margin: auto">
 7        {% for comment in comments %}
 8            {% if loop.index != 2 %}
 9                <div style="padding: 10px;
10                            background-color: #EEE;
11                            margin: 20px">
12                    <p>#{{ loop.index }}</p>
13                    <p style="font-size: 24px">{{ comment | upper }}</p>
14                </div>
15            {% endif %}
16        {% endfor %}
17        <hr>
18        <div>
19            <p>{{ comments | join(" | ") }}</p>
20        </div>
21    </div>
22{% endblock %}

在这里,您添加了一个<hr>标签和一个<div>标签,您将使用join()过滤器加入评论列表中的所有评论。

保存并关闭文件。

更新评论页面,你会看到一个类似于以下的页面:

Comments Page With Join Filter

正如你所看到的,评论列表显示,评论由一个管道符号分开,这就是你转移到加入( )过滤器。

另一个重要的过滤器是安全过滤器,它允许您在浏览器上渲染可信的HTML。为了说明这一点,您将使用Jinja分界器添加一些包含HTML标签的文本到您的评论模板中。在现实世界的情况下,这将来自服务器的变量。

打开评论模板:

1nano templates/comments.html

编辑它看起来如下:

 1[label flask_app/templates/comments.html]
 2{% extends 'base.html' %}
 3
 4{% block content %}
 5    <h1>{% block title %} Comments {% endblock %}</h1>
 6    <div style="width: 50%; margin: auto">
 7        {% for comment in comments %}
 8            {% if loop.index != 2 %}
 9                <div style="padding: 10px;
10                            background-color: #EEE;
11                            margin: 20px">
12                    <p>#{{ loop.index }}</p>
13                    <p style="font-size: 24px">{{ comment | upper }}</p>
14                </div>
15            {% endif %}
16        {% endfor %}
17        <hr>
18        <div>
19            {{ "<h1>COMMENTS</h1>" }}
20            <p>{{ comments | join(" <hr> ") }}</p>
21        </div>
22    </div>
23{% endblock %}

在这里,您添加了值 "<h1>COMMENTS</h1>",并将加入参数更改为

` 标签。

保存并关闭文件。

更新评论页面,你会看到一个类似于以下的页面:

Comments Page With No Safe Filter

正如您所看到的,HTML标签未被渲染,这是Jinja的安全功能,因为一些HTML标签可能有害,并可能导致(XSS)(https://owasp.org/www-community/attacks/xss/)攻击。

要渲染上面的 HTML 标签,请打开评论模板文件:

1nano templates/comments.html

通过添加安全过滤器来编辑它:

 1[label flask_app/templates/comments.html]
 2{% extends 'base.html' %}
 3
 4{% block content %}
 5    <h1>{% block title %} Comments {% endblock %}</h1>
 6    <div style="width: 50%; margin: auto">
 7        {% for comment in comments %}
 8            {% if loop.index != 2 %}
 9                <div style="padding: 10px;
10                            background-color: #EEE;
11                            margin: 20px">
12                    <p>#{{ loop.index }}</p>
13                    <p style="font-size: 24px">{{ comment | upper }}</p>
14                </div>
15            {% endif %}
16        {% endfor %}
17        <hr>
18        <div>
19            {{ "<h1>COMMENTS</h1>" | safe }}
20            <p>{{ comments | join(" <hr> ") | safe }}</p>
21        </div>
22    </div>
23{% endblock %}

您可以看到,您还可以链接过滤器,如在行中 <p>{评论 erga join(" <hr> ") erga safe }}</p>. 每个过滤器都应用于前一次过滤的结果。

保存并关闭文件。

更新评论页面,你会看到HTML标签现在按预期进行渲染:

Comments Page With Safe Filter

<$>[警告] **警告:**使用来自未知数据源的HTML上的安全过滤器可能会为您的应用程序打开XSS攻击。

有关更多信息,请参阅嵌入式 Jinja 过滤器列表。

您现在已经学会了如何在您的 Jinja 模板中使用过滤器来修改可变值。接下来,您将集成 Bootstrap toolkit来设计您的应用程序。

步骤 6 – 整合 Bootstrap

在此步骤中,您将学习如何使用 Bootstrap 工具包(https://getbootstrap.com/)来格式化您的应用程序. 您将在基板模板中添加 Bootstrap 导航栏,该模板将出现在从基板模板继承的所有页面中。

Bootstrap 工具包帮助您设计您的应用程序,使其更具视觉吸引力,还将帮助您将响应式网页纳入您的 Web 应用程序中,以便在移动浏览器上工作,而无需编写自己的 HTML、CSS 和 JavaScript 代码来实现这些目标。

要使用 Bootstrap,您需要将其添加到基础模板中,以便在所有其他模板中使用。

打开您的base.html模板,以编辑:

1nano templates/base.html

编辑它看起来如下:

 1[label flask_app/templates/base.html]
 2<!doctype html>
 3<html lang="en">
 4  <head>
 5    <!-- Required meta tags -->
 6    <meta charset="utf-8">
 7    <meta name="viewport" content="width=device-width, initial-scale=1">
 8
 9    <!-- Bootstrap CSS -->
10    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
11
12    <title>{% block title %} {% endblock %} - FlaskApp</title>
13  </head>
14  <body>
15    <nav class="navbar navbar-expand-lg navbar-light bg-light">
16    <div class="container-fluid">
17        <a class="navbar-brand" href="{{ url_for('hello') }}">FlaskApp</a>
18        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
19        <span class="navbar-toggler-icon"></span>
20        </button>
21        <div class="collapse navbar-collapse" id="navbarNav">
22        <ul class="navbar-nav">
23            <li class="nav-item">
24              <a class="nav-link" href="{{ url_for('comments') }}">Comments</a>
25            </li>
26            <li class="nav-item">
27              <a class="nav-link" href="{{ url_for('about') }}">About</a>
28            </li>
29        </ul>
30        </div>
31    </div>
32    </nav>
33    <div class="container">
34        {% block content %} {% endblock %}
35    </div>
36
37    <!-- Optional JavaScript -->
38
39    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
40
41  </body>
42</html>

上面的代码大多是 Bootstrap boilerplate 需要使用它. 你有一些元标签,在<head>部分链接到 Bootstrap CSS 文件,而在底部你有一个链接到可选的 JavaScript。代码的突出部分包含在前面的步骤中解释的 Jinja 代码。注意如何使用特定标签和 CSS 类来告诉 Bootstrap 如何显示每个元素。

在上面的 <nav> 标签中,你有一个 <a> 标签与类 navbar-brand,这决定了导航栏中的品牌链接。

有关这些标签和 CSS 类的更多信息,请参阅 Bootstrap 组件。

保存并关闭文件。

随着开发服务器运行,使用您的浏览器打开索引页面:

1http://127.0.0.1:5000/

你会看到一个类似于以下的页面:

Index Page with Bootstrap

现在,您可以使用 Bootstrap 组件在所有模板中在 Flask 应用程序中设计项目。

结论

您现在知道如何在您的 Flask Web 应用程序中使用 HTML 模板。您使用变量将数据从服务器传输到模板,使用模板继承以避免重复,嵌入了诸如如果和为循环等元素,并链接到不同的页面之间。

如果您想了解更多关于 Flask 的信息,请参阅 Flask 主题页面。