Flask 模板渲染（长文讲解）

Flask 模板渲染：让网页“活”起来

你有没有想过，为什么一个网站的页面能动态地显示不同的内容？比如，用户登录后显示“欢迎，张三”，而另一个用户登录后却显示“欢迎，李四”？这背后的核心技术之一，就是模板渲染。

在 Flask 框架中，Flask 模板渲染 是实现动态网页内容的关键机制。它让你可以将数据与 HTML 结构分离，就像把“骨架”和“血肉”分开制作一样，既方便维护，又提升开发效率。

今天，我们就来手把手带你掌握 Flask 模板渲染的核心原理和使用方法，从零开始构建一个能动态展示数据的简单网页。

什么是 Flask 模板渲染？

简单来说，Flask 模板渲染 就是 Flask 将 Python 中的数据，按照预设的 HTML 模板格式，自动“填入”内容并生成最终网页的过程。

你可以把模板想象成一个“网页模板说明书”——它定义了页面的结构和样式，但留出了一些“空位”（变量占位符），等程序运行时再把真实数据填进去。

比如，你写了一个模板，里面写着：

<h1>欢迎，{{ username }}！</h1>

当程序运行时，如果 username = "小明"，Flask 就会把 {{ username }} 替换成 “小明”，最终输出：

<h1>欢迎，小明！</h1>

这种“先写结构，后填数据”的方式，就是 Flask 模板渲染的核心思想。

创建项目与安装 Flask

在开始之前，我们需要先搭建一个 Flask 项目环境。

打开终端，执行以下命令：

mkdir flask_template_demo
cd flask_template_demo

python -m venv venv

venv\Scripts\activate

source venv/bin/activate

pip install Flask

安装完成后，创建主程序文件 app.py：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    # 这里是模板渲染的入口
    return render_template('index.html')

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

注释说明：

from flask import Flask, render_template：导入 Flask 核心类和模板渲染函数。

app = Flask(__name__)：创建 Flask 应用对象，__name__ 用于定位项目路径。

@app.route('/')：定义路由，用户访问根路径时触发该函数。

render_template('index.html')：调用 Flask 的模板渲染功能，加载 templates/index.html 文件并返回渲染结果。

app.run(debug=True)：启动开发服务器，debug=True 会自动重载代码，便于调试。

搭建模板目录结构

Flask 默认会从项目根目录下的 templates 文件夹中寻找模板文件。所以，我们需要创建这个目录。

mkdir templates

然后在 templates 目录下创建一个文件 index.html：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的 Flask 页面</title>
</head>
<body>
    <h1>欢迎来到我的 Flask 网站！</h1>
    <p>这是通过 Flask 模板渲染生成的页面。</p>
</body>
</html>

注意：模板文件必须放在 templates 文件夹中，否则 Flask 无法找到。

现在运行 python app.py，打开浏览器访问 http://127.0.0.1:5000，你就会看到这个页面了。

变量传递：让模板“知道”数据

真正的威力在于，我们可以把 Python 中的数据传给模板。

修改 app.py：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    # 定义要传递的数据
    name = "小明"
    age = 20
    hobbies = ["读书", "编程", "跑步"]

    # 将数据作为参数传入模板
    return render_template('index.html', username=name, user_age=age, interests=hobbies)

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

然后修改 templates/index.html：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面</title>
</head>
<body>
    <h1>欢迎，{{ username }}！</h1>
    <p>你今年 {{ user_age }} 岁。</p>
    <p>你的兴趣爱好有：</p>
    <ul>
        {% for hobby in interests %}
            <li>{{ hobby }}</li>
        {% endfor %}
    </ul>
</body>
</html>

注释说明：

{{ username }}：这是变量占位符，Flask 会把 username 的值替换进去。

{% for hobby in interests %}：这是模板中的控制语句，用于循环遍历列表。

{% endfor %}：结束循环。

{{ hobby }}：在循环中，每次迭代都会输出当前元素。

访问页面后，你会看到动态显示的用户名、年龄和兴趣列表。

模板语法详解：掌握三大核心语法

Flask 模板使用 Jinja2 引擎，支持三种核心语法：

变量表达式（{{ }}）

用于输出变量值。

<p>当前时间是：{{ current_time }}</p>

控制结构（{% %}）

用于条件判断和循环。

{% if user_age >= 18 %}
    <p>你已经是成年人了！</p>
{% else %}
    <p>你还是未成年人哦。</p>
{% endif %}

过滤器（|）

对变量进行格式化处理。

<p>用户名：{{ username | title }}</p>
<!-- 输出：用户名：小明（首字母大写） -->

常见过滤器：

title：首字母大写
upper：全部大写
lower：全部小写
default：设置默认值，如 {{ name | default('匿名用户') }}

实战案例：动态新闻列表页

我们来做一个更实用的例子：一个展示新闻列表的页面。

1. 准备数据

修改 app.py：

from flask import Flask, render_template

app = Flask(__name__)

news_list = [
    {
        'title': 'Flask 入门教程发布',
        'author': '小张',
        'date': '2024-05-20',
        'content': '本文详细介绍了 Flask 框架的使用方法...'
    },
    {
        'title': 'Python 3.13 发布新特性',
        'author': '小李',
        'date': '2024-05-18',
        'content': 'Python 3.13 引入了多项性能优化...'
    },
    {
        'title': 'AI 技术正在改变 Web 开发',
        'author': '小王',
        'date': '2024-05-15',
        'content': 'AI 工具正成为开发者的重要助手...'
    }
]

@app.route('/news')
def news():
    return render_template('news.html', articles=news_list)

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

2. 创建新闻模板

创建 templates/news.html：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>新闻列表</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .article { border: 1px solid #ccc; padding: 15px; margin-bottom: 10px; border-radius: 5px; }
        .title { color: #0066cc; font-size: 1.2em; }
        .meta { color: #666; font-size: 0.9em; margin-bottom: 10px; }
    </style>
</head>
<body>
    <h1>最新新闻</h1>
    {% if articles %}
        {% for article in articles %}
            <div class="article">
                <h2 class="title">{{ article.title }}</h2>
                <p class="meta">
                    作者：{{ article.author }} | 发布时间：{{ article.date }}
                </p>
                <p>{{ article.content | truncate(50) }}</p>
            </div>
        {% endfor %}
    {% else %}
        <p>暂无新闻数据。</p>
    {% endif %}
</body>
</html>

注释说明：

{{ article.title }}：输出每条新闻的标题。

{{ article.date | truncate(50) }}：使用 truncate 过滤器截取内容长度，防止过长。

{% if articles %}：判断是否有数据，避免空列表报错。

CSS 样式让页面更美观。

访问 http://127.0.0.1:5000/news，你就能看到一个整洁的新闻列表页面。

高级技巧：模板继承与组件化

随着项目变大，重复代码会越来越多。Flask 支持模板继承，让你像搭积木一样复用结构。

创建基础模板：`base.html`

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}默认标题{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <header>
        <h1>我的网站</h1>
        <nav>
            <a href="/">首页</a> |
            <a href="/news">新闻</a>
        </nav>
    </header>

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

    <footer>
        &copy; 2024 我的 Flask 网站
    </footer>
</body>
</html>

继承基础模板：`news.html`

{% extends "base.html" %}

{% block title %}新闻列表 - 我的网站{% endblock %}

{% block content %}
    <h2>最新新闻</h2>
    {% if articles %}
        {% for article in articles %}
            <div class="article">
                <h3>{{ article.title }}</h3>
                <p><strong>作者：</strong>{{ article.author }} | <strong>日期：</strong>{{ article.date }}</p>
                <p>{{ article.content | truncate(80) }}</p>
            </div>
        {% endfor %}
    {% else %}
        <p>暂无新闻。</p>
    {% endif %}
{% endblock %}

优势：只需修改 base.html，所有子页面都会自动更新。

总结与展望

通过这篇文章，你已经掌握了 Flask 模板渲染的核心能力：变量传递、控制结构、过滤器、模板继承。这些技术不仅让你能构建动态网页，还为后续开发复杂应用打下坚实基础。

记住，Flask 模板渲染 不只是“把数据放进 HTML”，更是一种分离关注点的设计思想——让数据逻辑和页面展示互不干扰，让代码更清晰、更易维护。

接下来，你可以尝试：

将模板与静态文件（CSS/JS）结合
使用自定义过滤器
集成表单验证与错误处理

当你能熟练运用模板渲染时，你就真正迈入了 Web 开发的“实战阶段”。继续加油，你的第一个完整项目正在路上！