Flask 使用 Jinja2 模板引擎来渲染 HTML 页面，允许开发者将动态内容嵌入到静态 HTML 文件中，从而实现页面的动态渲染。Jinja2 是一个功能强大的模板引擎，提供了变量替换、控制结构（如循环和条件语句）以及过滤器等功能。

1. 使用模板渲染 HTML

Flask 提供了 render_template 函数用于渲染模板文件。通常，HTML 模板文件存放在项目的 templates 目录下。

基本流程：

在视图函数中调用 render_template。
render_template 函数会查找 templates 目录中的模板文件。
视图函数可以将数据（变量）传递给模板，用于动态生成内容。

2. 具体步骤

创建项目结构

my_flask_app/
│
├── app.py                 # Flask 应用文件
└── templates/             # 存放模板文件的目录
    └── index.html         # HTML 模板文件

代码示例

app.py 文件：创建一个简单的 Flask 应用，渲染一个 HTML 模板。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html', title="Home Page", username="John Doe")

if __name__ == '__main__':
    app.run(debug=True)

index.html 文件：创建一个简单的 HTML 文件，使用 Jinja2 语法插入动态内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
</head>
<body>
    <h1>Welcome, {{ username }}!</h1>
    <p>This is the home page.</p>
</body>
</html>

解释：

{{ title }} 和 {{ username }} 是 Jinja2 的变量占位符，视图函数传递的变量值将替换这些占位符。
在 app.py 中，render_template('index.html', title="Home Page", username="John Doe") 渲染了模板，并将 title 和 username 传递给模板文件。

3. Jinja2 基本语法

变量插值

通过 {{ variable_name }} 在模板中插入动态数据。例如：

<p>Hello, {{ username }}!</p>

控制结构

条件语句

可以在模板中使用条件语句来根据传递的数据做出逻辑判断：

{% if user_is_logged_in %}
    <p>Welcome back, {{ username }}!</p>
{% else %}
    <p>Please log in.</p>
{% endif %}

循环

可以使用循环遍历列表或其他可迭代对象：

<ul>
    {% for item in items %}
        <li>{{ item }}</li>
    {% endfor %}
</ul>

过滤器

Jinja2 还提供了过滤器，用于对变量进行简单的转换。例如，将文本转换为大写：

<p>{{ username | upper }}</p>

模板继承

Jinja2 支持模板继承，允许你定义一个基础模板，并在其他模板中扩展它。这样可以重用 HTML 代码，比如导航栏、页脚等。

创建基础模板 base.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}My Website{% endblock %}</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
    </header>

    <nav>
        <!-- Navigation links -->
    </nav>

    <main>
        {% block content %}{% endblock %}
    </main>

    <footer>
        <p>Footer content goes here.</p>
    </footer>
</body>
</html>

扩展模板 index.html：

{% extends "base.html" %}

{% block title %}Home Page{% endblock %}

{% block content %}
    <h1>Welcome, {{ username }}!</h1>
    <p>This is the home page.</p>
{% endblock %}

在这里，index.html 继承了 base.html 模板，并定义了两个块（block title 和 block content），这样可以只更改特定部分的内容，而保持整体页面结构一致。

4. 结论

Flask 使用 Jinja2 模板引擎使得动态渲染 HTML 页面变得非常简单和灵活。通过模板渲染，可以方便地将视图函数中的数据传递给模板文件，从而实现动态的网页内容。同时，Jinja2 的强大功能（如变量插值、控制结构、过滤器等）使得模板引擎非常适合构建复杂的动态Web应用。

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

Flask使用模板引擎 Jinja2 渲染 HTML 页面