Flask中Jinja2模板引擎的变量、逻辑与继承用法详解

Jasper
Jasper
发布时间:2026-10-16| 5人浏览过
原创

本文深入解析Flask中Jinja2模板引擎的核心用法。涵盖变量{{ }}与语句{% %}的语法区别,演示如何传递字典、列表及对象至前端;详解if条件判断与for循环的实现方式;并通过block与extends标签解析模板继承机制,帮助开发者构建结构清晰、易于维护的Web页面。

Jinja2

设想这样一个应用场景:网站希望实现权限控制,只有充值成为VIP的用户才能查看特定隐藏内容。在Flask框架下,应如何实现这一功能?

此时,Jinja2模板引擎便派上了用场。

首先编写后端代码,根据传入的姓名渲染网页,并将姓名和VIP状态变量传递至HTML模板中。

需要注意的是,包含Jinja2语法的HTML文件无法直接在浏览器中打开预览,必须启动Flask应用并通过路由返回页面才能正确渲染。

from flask import Flask, render_template
app = Flask(__name__)
@app.route('/space/<name>')
def space(name):
    vip = True
    return render_template("space.html", name=name, vip=vip)
if __name__ == '__main__':
    app.run(debug=True)

当HTML模板接收到Flask传递过来的name、vip参数后,在前端页面中应如何调用这些值?

  • 利用{{ }}语法可以装载变量。例如,在文中通过{{ name }}将HTML中的name变量值显示出来。
  • 若需执行逻辑语句,则使用{% %}语法。以if语句为例,如代码8-11行所示,条件判断必须以{% if xxx %}开头,并以{% endif %}结束。
<!doctype html>
<html lang="en">
<head>
    <title>Hello from Flask</title>
</head>
<body>
    <h1>Hello {{ name }}!</h1>
    <!-- jinja2的if语句 -->
    {% if vip %}
        <h3>吆西,你触发了,隐藏内容啦!</h3>
    {% endif %}
</body>
</html>

Jinja2语句扩展

总结而言:在Jinja2中,装载变量使用{{ }},装载逻辑语句使用{% %},括号内的内容均遵循Python的书写规范。

在HTML中,我们传递的变量类型不仅限于字符串,还可能包含列表、对象或字典等复杂数据结构。

针对不同类型的数据,装载方式如下所示:

# python
a = [1,2,3]
b = Cat(name="Tom")
c = {"name":"Jackson"}
# html
<h1>Hello {{ a[0] }}!</h1>
<h1>Hello {{ b.name }}!</h1>
<h1>Hello {{ c['name '] }}!</h1>

# 输出结果 Hello 1! Hello Tom! Hello Jackson!

在HTML中,除了条件判断,循环语句同样重要。Jinja2的循环语法示例如下:

     {% for item in navigation %}
         <li><a href="{{ item.href }}" rel="external nofollow" >{{ item.caption }}</a></li>
     {% endfor %}

上述代码生成了len(navigation )个li元素,每个li元素均指向item.href定义的链接地址。

如果内容对您有帮助,欢迎点赞支持。

Jinja2模板继承

Jinja2的模板继承机制与面向对象中的类继承有相似之处,主要目的是减少代码冗余。接下来展示一个Jinja2模板继承的具体示例:

我们创建一个名为base.html的基础模板文件,其代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="base.css" rel="external nofollow"  />
    <title>{% block title %}{% endblock %}</title>
    {% block head %}{% endblock %}
</head>
<body>
    <div id="body">{% block body %}{% endblock %}</div>
</body>
</html>

在上述代码中,{% block xxx %} {% endblock %}用于定义一个“卡槽”(Block),以便后续页面在该位置填充具体内容。

接下来,编写一个index.html文件来继承base.html页面,具体实现方式如下:

{% extends "base.html" %}
{% block title %}首页{% endblock %}
{% block body %}
    <h1>这里是首页</h1>
    <p class="detail">
      首页的内容
    </p>
{% endblock %}  

{% extends “base.html” %} 用于声明继承base.html模板。

{% block title %}首页{% endblock %} 用于填充title卡槽的具体内容。

首页通过卡槽填充内容,body卡槽的用法与之相同。

至此,关于Flask中Jinja2引擎用法的介绍完毕。如需了解更多Flask与Jinja2相关内容,请搜索本站历史文章或继续浏览后续文章,感谢大家的支持!

免责声明:本文内容仅供参考,不代表本站观点。转载或引用请注明出处。

Python 相关产品和应用

全部下载
Selenium

Selenium

4.51.0 · Windows

用于浏览器自动化和 Web 测试的 Python 工具。

scikit-learn

scikit-learn

1.9.1 · Windows

常用 Python 机器学习算法与模型评估工具库。

Black

Black

26.10.1 · Windows

强调一致性的 Python 自动代码格式化工具。

Ruff

Ruff

0.17.1 · macOS

由 Rust 编写的高速 Python 代码检查和格式化工具。

pytest

pytest

9.1.1 · Windows

简洁而强大的 Python 自动化测试框架。

FastAPI

FastAPI

0.146.0 · Windows

高性能 Python API 框架,支持类型提示和自动接口文档。

Flask

Flask

3.1.3 · Windows

轻量灵活的 Python Web 应用框架。

Django

Django

6.1.2 · Windows

成熟的 Python Web 框架,适合构建内容站点和业务系统。

Spyder

Spyder

6.1.7 · Windows

面向科学计算与数据分析的 Python 集成开发环境。

SciPy

SciPy

1.18.1 · Windows

面向科学、工程和技术计算的 Python 算法库。