Jinja2 模板继承机制

1、Jinja2与模板继承的概述

Jinja2Python 常用的模板引擎 ,广泛用于 FlaskDjango 等 Web 框架,支持变量替换、流程控制、模板继承等功能。

其中,模板继承机制的作用包括:

  • 避免重复写相同结构(比如导航栏、页脚)
  • 实现结构统一、内容可变的网页布局
  • ✅ 提高开发效率、减少维护成本

例如你的网站有多个页面,它们的 <head>、导航栏、页脚都一样,只是中间内容不同。通过模板继承,这些公共部分只需写一次,其它页面只定义各自的主要内容即可。


2、模板继承基本用法

2.1、语法说明

Jinja2 模板继承依赖两个关键语法:

语法 说明
{% extends "父模板.html" %} 声明当前模板继承哪个模板
{% block 区块名 %}...{% endblock %} 定义或覆盖模板中的指定区域

如果你想保留父模板中该区域的原始内容,可以在 block 内部使用{``{ super() }}


2.2、父模板示例:_base.html

html 复制代码
<!-- templates/_base.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>{% block title %}默认标题{% endblock %}</title>
</head>
<body>
  <header>导航栏</header>

  <main>
    {% block content %}
    默认内容
    {% endblock %}
  </main>

  <footer>© 版权所有</footer>
</body>
</html>

说明:

  • titlecontent 是两个"可覆盖区域(block)"。

2.3、子模板示例:index.html

jinja2 复制代码
<!-- templates/index.html -->
{% extends "_base.html" %}

{% block title %}首页{% endblock %}

{% block content %}
  {{ super() }}
  <h1>欢迎</h1>
  <p>这是首页内容</p>
{% endblock %}

说明:

  • extends 表示继承 _base.html
  • block title 替换了默认标题
  • block content 添加了自己的内容,同时保留了父模板的默认部分(通过 {``{ super() }}