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 %}