首页技术文章Jinja2 模板引擎核心语法详解

Jinja2 模板引擎核心语法详解

发布时间：2025-04-27 17:21:01
·
8 阅读
·
0 评论
文章标签： html 转义

一、Jinja2 简介

Jinja2 是 Python 生态中广泛使用的模板引擎，专为动态生成 HTML/XML 等文本设计。作为 Flask 的默认模板引擎，它通过简洁的语法实现 逻辑与表现的分离，遵循 DRY（Don't Repeat Yourself）原则。理解 Jinja2 是开发现代 Web 应用的重要基础。

二、基础语法与应用场景

1. 变量与表达式

语法规则

o 变量渲染：用 {{ 变量名 }} 包裹变量或表达式
o 表达式计算：支持数学运算、对象属性访问等

<!-- 渲染动态数据 -->
<p>用户邮箱：{{ user.email }}</p>
<p>当前时间：{{ datetime.now().strftime("%Y-%m-%d") }}</p>

数据传递示例（Flask 视图函数）

from flask import render_template

@app.route('/profile')
def profile():
    user = {"name": "Alice", "email": "alice@example.com"}
    return render_template('profile.html', user=user)

2. 控制结构

条件语句（if/elif/else）

{% if user.role == 'admin' %}
    <button>管理后台</button>
{% elif user.role == 'editor' %}
    <button>编辑文章</button>
{% else %}
    <p>普通用户权限</p>
{% endif %}

循环（for）

o 遍历列表/字典：支持 for...in 结构
o loop 对象：提供循环状态信息

<table>
  {% for product in products %}
    <tr class="{{ 'even' if loop.index is even else 'odd' }}">
      <td>{{ loop.index }}</td>
      <td>{{ product.name }}</td>
      <td>{{ product.price|round(2) }}</td>
    </tr>
  {% endfor %}
</table>

loop 常用属性： o index：当前迭代序号（从1开始） o index0：当前迭代序号（从0开始） o first/last：是否为首次/最后一次迭代

3. 过滤器（Filters）

使用场景

对变量进行格式化处理（如文本截断、日期格式化）。

基础语法

{{ 变量 | 过滤器名(参数) }}

常用内置过滤器

过滤器

说明

示例

default

设置默认值

{{ name|default('匿名') }}

length

获取长度

{{ list|length }}

trim

移除首尾空格

{{ " Hello "|trim }} → "Hello"

striptags

删除 HTML 标签

{{ "<b>文本</b>"|striptags }} → "文本"

join

拼接列表元素

{{ ['A','B']|join(',') }} → "A,B"

tojson

转换为 JSON 字符串

{{ data|tojson }}

自定义过滤器（Flask 示例）

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

# 模板中使用
{{ "hello"|reverse }}  <!-- 输出 "olleh" -->

三、代码复用技巧

1. 宏（Macros）

概念

类似函数，用于封装可复用的 HTML 片段。

定义与调用

<!-- 定义宏 -->
{% macro input_field(name, label, type='text') %}
  <div class="form-group">
    <label>{{ label }}</label>
    <input type="{{ type }}" name="{{ name }}" class="form-control">
  </div>
{% endmacro %}

<!-- 调用宏 -->
<form>
  {{ input_field('username', '用户名') }}
  {{ input_field('password', '密码', type='password') }}
</form>

宏库管理

将常用宏存入 _macros.html，通过 import 引用：

{% import "_macros.html" as macros %}
{{ macros.input_field('email', '邮箱') }}

2. 模板继承

核心概念

o 父模板：定义整体布局和可填充区块（block）
o 子模板：继承父模板并覆盖特定区块

父模板示例（base.html）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>{% block title %}默认标题{% endblock %}</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
  <nav>{% block nav %}导航栏{% endblock %}</nav>
  <main>{% block content %}{% endblock %}</main>
  <footer>{% block footer %}(c) 2023{% endblock %}</footer>
</body>
</html>

子模板示例（home.html）

{% extends "base.html" %}

{% block title %}首页 - 我的网站{% endblock %}

{% block content %}
  <h1>最新文章</h1>
  {% for post in posts %}
    <article>{{ post.content|truncate(200) }}</article>
  {% endfor %}
{% endblock %}

超级块（super）

在子模板中保留父模板内容：

{% block footer %}
  {{ super() }}  <!-- 保留父模板的 (c) 2023 -->
  <p>备案号：XXXXXX</p>
{% endblock %}

四、安全与最佳实践

1. 自动转义机制

o 默认行为：Jinja2 自动转义 HTML 特殊字符，防止 XSS 攻击
o 禁用转义：仅对可信内容使用 safe 过滤器

<!-- 危险操作 -->
{{ "<script>alert('XSS')</script>"|safe }}  <!-- 实际输出可执行脚本 -->

<!-- 安全操作 -->
{{ "文本中的 <strong>HTML</strong>"|safe }}  <!-- 正确显示加粗文本 -->

2. 安全建议

  1. 永远不要对用户输入使用 safe
  2. 使用 striptags 过滤器清理用户输入
  3. 表单数据必须经过后端验证

五、实战演练：博客系统模板

需求描述

o 显示文章列表（标题、作者、摘要）
o 支持分页显示
o 统一页面布局

代码实现

父模板（base.html）

<!DOCTYPE html>
<html>
<head>
  <title>{% block title %}技术博客{% endblock %}</title>
  <style>
    .post { margin: 20px; padding: 15px; border: 1px solid #ddd; }
    .pagination { margin-top: 20px; }
  </style>
</head>
<body>
  <header><h1>技术探索者</h1></header>
  {% block content %}{% endblock %}
  <div class="pagination">
    第 {{ pagination.page }} 页 / 共 {{ pagination.pages }} 页
  </div>
</body>
</html>

子模板（posts.html）

{% extends "base.html" %}

{% block title %}文章列表{% endblock %}

{% block content %}
  {% for post in posts %}
    <div class="post">
      <h2>{{ post.title }}</h2>
      <p class="meta">
        作者：{{ post.author }} | 
        发布于：{{ post.create_time|datetime_format }}
      </p>
      <p>{{ post.content|truncate(200) }}</p>
    </div>
  {% else %}
    <p>暂无文章</p>
  {% endfor %}
{% endblock %}

六、学习资源推荐

  1. Jinja2 官方文档 - 最权威的语法参考
  2. Flask Mega-Tutorial - 包含模板开发的实战教程
  3. Bootstrap 集成示例 - 学习如何结合前端框架

练习任务：

  1. 创建一个商品展示模板，包含价格格式化（如 ￥{{ price|number_format(2) }}）
  2. 使用宏实现可复用的卡片式布局组件
  3. 为博客系统添加分类导航栏（通过 include 语句引入）

掌握 Jinja2 后，你将能够高效开发结构清晰、易于维护的 Web 应用！