3 Flask模板引擎 Jinja2

最新推荐文章于 2025-05-21 14:33:40 发布

安迪小宝

最新推荐文章于 2025-05-21 14:33:40 发布

阅读量551

点赞数 9

分类专栏： Flask python 文章标签： flask python 后端

本文链接：https://blog.youkuaiyun.com/wujianyouhun/article/details/145703960

版权

python 同时被 2 个专栏收录

58 篇文章

订阅专栏

Flask

14 篇文章

订阅专栏

Flask 中的模板引擎 Jinja2：深入了解模板语法、控制结构和静态文件处理

Flask 是一个非常轻量且灵活的 Web 框架，而其强大的模板引擎 Jinja2 让开发者能够高效地生成动态 HTML 页面。Jinja2 具有非常丰富的功能，包括模板继承、控制结构、过滤器等，可以帮助我们构建清晰且可维护的 Web 页面。本文将深入探讨 Flask 中如何使用 Jinja2 模板引擎，介绍模板语法、控制结构、过滤器、模板继承和静态文件处理等。

1. Jinja2 模板语法

Jinja2 是 Flask 默认的模板引擎，它允许我们在 HTML 中嵌入 Python 表达式、逻辑控制等，以实现动态页面生成。Jinja2 的基本语法包括变量插入、控制结构（如条件语句、循环语句）和过滤器等。

插入变量

在 Jinja2 中，使用 {{ }} 语法来插入变量。例如：

<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ greeting }}</h1>
</body>
</html>

在这个例子中，{{ title }} 和 {{ greeting }} 是从视图函数传递到模板中的变量，它们会在渲染时被替换为实际的值。

控制结构

Jinja2 提供了强大的控制结构，包括条件语句、循环语句等。以下是一些常用的控制结构：

条件语句：

{% if user %}
    <p>Hello, {{ user.name }}!</p>
{% else %}
    <p>Please log in.</p>
{% endif %}

在这个例子中，{% if %} 和 {% else %} 用于控制是否显示用户信息。

循环语句：

<ul>
    {% for item in items %}
        <li>{{ item }}</li>
    {% else %}
        <li>No items available.</li>
    {% endfor %}
</ul>

此示例中，{% for item in items %} 用于遍历 items 列表并将每个项目渲染为 HTML 列表项。如果列表为空，则显示 “No items available”。

2. 过滤器

过滤器可以用来修改变量的显示方式，常见的过滤器包括日期格式化、大小写转换等。过滤器通过 | 符号应用。

日期格式化：

<p>Created at: {{ post.date | date('Y-m-d') }}</p>

在这个例子中，date 过滤器将 post.date 格式化为 Y-m-d 的日期格式。

大小写转换：

<p>{{ name | upper }}</p>   <!-- 转为大写 -->
<p>{{ name | lower }}</p>   <!-- 转为小写 -->

这些过滤器分别将 name 变量转换为大写或小写。

自定义过滤器：

Flask 还支持自定义过滤器，你可以在应用中定义自己的过滤器，使用 app.template_filter 注册：

@app.template_filter('reverse')
def reverse_filter(s):
    return s[::-1]

在模板中使用时：

<p>{{ 'Flask' | reverse }}</p>  <!-- 输出 'ksalF' -->

3. 模板继承

模板继承是 Jinja2 的一大特色，它允许我们创建基模板（base template），然后在不同的子模板中继承和修改基模板的内容。这有助于减少代码重复和提高模板的可维护性。

基模板

创建一个基模板 base.html，包含页面的公共部分，如头部、导航栏、页脚等：

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}My Flask App{% endblock %}</title>
</head>
<body>
    <header>
        <h1>Welcome to My Flask App</h1>
    </header>

    <nav>
        <!-- 导航菜单 -->
    </nav>

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

    <footer>
        <p>Footer content</p>
    </footer>
</body>
</html>

子模板

在子模板中，我们使用 {% extends %} 继承基模板，并通过 {% block %} 填充和修改父模板中的内容：

{% extends 'base.html' %}

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

{% block content %}
    <h2>Welcome to the Home Page!</h2>
    <p>This is the content of the home page.</p>
{% endblock %}

在这个例子中，home.html 继承了 base.html，并在 title 和 content 块中填充了自定义的内容。

通过模板继承，我们可以确保整个网站的布局一致，同时允许不同页面在需要的地方插入不同的内容。

4. 静态文件处理

静态文件（如 CSS、JavaScript、图片等）是 Web 开发中不可或缺的一部分。Flask 默认会在项目的 static 文件夹中查找静态文件，并通过 URL 路径进行访问。

引用静态文件

在 Flask 模板中，使用 url_for('static', filename='path/to/file') 来引用静态文件。例如：

<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
<script src="{{ url_for('static', filename='js/app.js') }}"></script>

url_for('static', filename='css/styles.css') 会动态生成正确的静态文件路径，确保即使文件路径发生变化，链接也能自动更新。

静态文件组织

为了方便管理，你可以将静态文件按类型分类存放在 static 文件夹中。例如：

/static
    /css
        styles.css
    /js
        app.js
    /images
        logo.png

这种结构可以帮助你更好地组织项目的静态资源。

Flask 的模板引擎 Jinja2 为我们提供了强大的功能来构建动态 Web 页面。通过 Jinja2 模板语法，我们可以轻松地插入变量、使用控制结构进行逻辑判断和循环、使用过滤器格式化数据。模板继承功能使得我们能够轻松管理网站的布局结构，并且静态文件的处理也非常简便。

掌握了 Jinja2 的这些基础功能，能够帮助我们更高效、更灵活地构建现代 Web 应用。如果你有任何问题或建议，欢迎在评论区与我讨论！

更多请关注公众号 “学GIS的小宝同学”