跳到主要内容

Jinja2 模板结构

前言

模板代码模块化:通过模板继承、include、宏(macro)复用公共结构,避免重复编写 HTML。

模板继承

父模板 templates/base.html,用 {% block %} 定义可覆盖的块:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}默认标题{% endblock %}</title>
</head>
<body>
<header>{% block header %}通用头部{% endblock %}</header>
<main>{% block content %}{% endblock %}</main>
<footer>{% block footer %}通用底部{% endblock %}</footer>
</body>
</html>

子模板 templates/page.html 继承父模板并覆盖块:

{% extends "base.html" %}

{% block title %}用户列表{% endblock %}

{% block content %}
<ul>
{% for user in users %}
<li>{{ user.name }}</li>
{% endfor %}
</ul>
{% endblock %}

子模板中未覆盖的 block 会使用父模板的默认内容;{{ super() }} 可以在覆盖时保留父块内容。

include 引入片段

include 把一个模板片段直接嵌入当前位置:

{% include "components/navbar.html" %}

{% include ... ignore missing %} 在文件不存在时不会报错。

宏(macro)

宏类似函数,可以带参数复用 HTML 片段。定义 templates/macros.html

{% macro render_item(item) %}
<li class="item">{{ item.name }} - {{ item.price }}元</li>
{% endmacro %}

使用:

{% import "macros.html" as macros %}

<ul>
{% for item in items %}
{{ macros.render_item(item) }}
{% endfor %}
</ul>

宏默认值:

{% macro render_item(item, show_price=true) %}
<li>{{ item.name }}{% if show_price %} - {{ item.price }}元{% endif %}</li>
{% endmacro %}

参考