<think>我们讨论的是
Jinja2模板继承，这是
Jinja2模板引擎中一个非常强大的特性。
模板继承允许你构建一个基础
模板（通常称为“骨架”
模板），然后让其他
模板继承这个基础
模板并覆盖其中的特定块。
主要概念：
1. 基础
模板（base template）：定义整个页面的基本结构，并包含一些可被
子模板覆盖的块（block）。
2.
子模板（child template）：使用`{% extends %}`标签继承基础
模板，然后通过`{% block %}`标签覆盖基础
模板中同名的块。
步骤：
1. 创建基础
模板（base.html）
2. 创建
子模板，继承基础
模板并覆盖部分块
下面是一个具体的例
子：
基础
模板（base.html）：
```html
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<meta charset="UTF-8">
<title>{% block title %}{% endblock %} - My Webpage</title>
{% endblock %}
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
<div id="footer">
{% block footer %}
© Copyright
20
23 by <a
href="http://example.com/">you</a>.
{% endblock %}
</div>
</body>
</html>
```
子模板（child.html）：
```html
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ super() }}
<style type="text/css">
.important { color: #336699; }
</style>
{% endblock %}
{% block content %}
<h1>Index</h1>
<p class="important">
Welcome to my awesome homepage.
</p>
{% endblock %}
```
解释：
1. `{% extends "base.html" %}`：告诉
Jinja2这个
模板继承自base.html。
2. `{% block title %}Index{% endblock %}`：覆盖基础
模板中的`title`块，设置标题为“Index”。注意：在基础
模板中，标题是动态的，后面会加上“- My Webpage”，所以最终标题是“Index - My Webpage”。
3. `{% block head %}`：覆盖基础
模板中的`head`块。但是，在
子模板中，我们使用`{{ super() }}`来保留基础
模板中head块的内容，然后添加额外的样式。
4. `{% block content %}`：覆盖基础
模板中的`content`块，填入自己的内容。
注意：
- 在
子模板中，只能定义在基础
模板中已经存在的块。如果定义了一个基础
模板中不存在的块，它将被忽略。
- 使用`{{ super() }}`可以在
子模板中引用父
模板中对应块的内容。
模板继承的优点：
1. 代码复用：避免重复编写相同的结构（如页眉、页脚、导航栏等）。
2. 易于维护：修改基础
模板可以同时影响所有继承它的
子模板。
3. 灵活性：
子模板可以自由覆盖父
模板的特定部分。
进阶：嵌套继承
你可以创建多级继承，例如：
base.html -> layout.html -> child.html
其中，layout.html继承base.html，child.html继承layout.html。
下面是一个嵌套继承的例
子：
基础
模板（base.html）同上。
布局
模板（layout.html）：
```html
{% extends "base.html" %}
{% block content %}
<div class="sidebar">
{% block sidebar %}{% endblock %}
</div>
<div class="main-content">
{{ super() }} {# 如果base.html中有content块，这里会覆盖，但通常我们不会在base.html的content块中写内容，所以这里可以不用super #}
{% block main %}{% endblock %}
</div>
{% endblock %}
```
然后，child.html继承layout.html：
```html
{% extends "layout.html" %}
{% block sidebar %}
<ul>
<li>Home</li>
<li>About</li>
</ul>
{% endblock %}
{% block main %}
<h1>Home Page</h1>
<p>Welcome to the home page!</p>
{% endblock %}
```
在这个例
子中，child.html提供了sidebar块和main块的内容，而layout.html定义了页面的布局（侧边栏和主内容区），base.html定义了整个页面的基本结构。
使用
Jinja2渲染
模板的Python代码示例：
假设我们使用Flask框架（
Jinja2是Flask的默认
模板引擎），但也可以单独使用
Jinja2。
单独使用
Jinja2的示例代码：
```python
from
jinja2 import Environment, FileSystemLoader
# 创建
模板环境，指定
模板所在的
文件夹
env = Environment(loader=FileSystemLoader('templates'))
#
加载基础
模板
template = env.get_template('child.html')
# 渲染
模板，可以传入上下文变量
output = template.render(title='Index', some_variable='value')
# 输出渲染后的内容
print(output)
```
在Flask中使用（更简单）：
```python
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('child.html', title='Index', some_variable='value')
```
注意：在Flask中，
模板文件默认放在项目目录下的`templates`
文件夹中。
总结：
模板继承是
Jinja2中非常实用的功能，通过定义基础
模板和块，
子模板可以继承并覆盖这些块，从而实现页面结构的复用和定制。
§§相关问题§§:
1. 在
Jinja2模板中，如何包含另一个
模板文件？
2.
Jinja2模板中的宏（macro）是什么？如何使用？
3. 如何在
Jinja2模板中使用条件语句和循环？
4. 如何防止
Jinja2模板中的跨站脚本攻击（XSS）？</think>#
Jinja2 模板继承详解
Jinja2 是 Python 中最流行的
模板引擎之一，其
模板继承功能允许您创建可重用的
模板结构，极大提高了开发效率和代码可维护性。
##
模板继承核心概念
### 1. 基础
模板 (Base Template)
定义页面的基本骨架，包含可被
子模板覆盖的区块
###
2.
子模板 (Child Template)
继承基础
模板并覆盖特定区块
### 3. 区块 (Block)
使用 `{% block block_name %}` 定义的占位区域，可在
子模板中覆盖
## 完整实现示例
### 基础
模板 (base.html)
```html
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}默认标题{% endblock %}</title>
<link rel="stylesheet"
href="styles.css">
{% endblock %}
</head>
<body>
<header>
{% block header %}
<h1>网站标题</h1>
<nav>
<ul>
<li><a
href="/">首页</a></li>
<li><a
href="/about">关于</a></li>
<li><a
href="/contact">联系</a></li>
</ul>
</nav>
{% endblock %}
</header>
<main>
{% block content %}{% endblock %}
</main>
<footer>
{% block footer %}
<p>©
20
23 我的网站. 保留所有权利.</p>
{% endblock %}
</footer>
{% block scripts %}
<script src="main.
js"></script>
{% endblock %}
</body>
</html>
```
###
子模板 (home.html)
```html
{% extends "base.html" %}
{# 覆盖标题区块 #}
{% block title %}首页 - 我的网站{% endblock %}
{# 覆盖头部区块并保留父
模板内容 #}
{% block head %}
{{ super() }} {# 包含父
模板中的内容 #}
<link rel="stylesheet"
href="home.css">
{% endblock %}
{# 覆盖内容区块 #}
{% block content %}
<section class="hero">
<h
2>欢迎访问我们的网站</h
2>
<p>这是我们的首页内容...</p>
</section>
<section class="features">
<div class="feature">
<h3>功能一</h3>
<p>功能描述...</p>
</div>
<div class="feature">
<h3>功能二</h3>
<p>功能描述...</p>
</div>
</section>
{% endblock %}
{# 覆盖脚本区块 #}
{% block scripts %}
{{ super() }}
<script src="home.
js"></script>
{% endblock %}
```
### 另一个
子模板 (about.html)
```html
{% extends "base.html" %}
{% block title %}关于我们 - 我的网站{% endblock %}
{% block content %}
<article>
<h
2>关于我们</h
2>
<p>公司简介...</p>
<section>
<h3>团队介绍</h3>
<ul>
<li>成员一</li>
<li>成员二</li>
</ul>
</section>
</article>
{% endblock %}
{% block footer %}
<p>©
20
23 我的网站. 保留所有权利. | 关于我们</p>
{% endblock %}
```
##
模板继承工作原理
1. **继承声明**：
子模板使用 `{% extends "base.html" %}` 声明继承关系
2. **区块覆盖**：
子模板定义同名的 `{% block %}` 来覆盖父
模板内容
3. **父内容引用**：使用 `{{ super() }}` 引用父
模板中对应区块的内容
4. **渲染过程**：
-
加载基础
模板
- 用
子模板的区块内容替换基础
模板中的对应区块
- 渲染最终结果
## 高级功能
### 1. 嵌套继承
创建多级
模板继承结构
```html
{# layout.html #}
{% extends "base.html" %}
{% block content %}
<div class="sidebar">
{% block sidebar %}{% endblock %}
</div>
<div class="main-content">
{% block main %}{% endblock %}
</div>
{% endblock %}
{# product.html #}
{% extends "layout.html" %}
{% block sidebar %}
<h3>产品分类</h3>
<ul>
<li>类别一</li>
<li>类别二</li>
</ul>
{% endblock %}
{% block main %}
<h1>产品详情</h1>
<p>产品描述...</p>
{% endblock %}
```
###
2. 动态继承
根据条件选择继承的
模板
```
jinja2
{% if user.is_admin %}
{% extends "admin_base.html" %}
{% else %}
{% extends "user_base.html" %}
{% endif %}
```
### 3. 区块追加
在父
模板内容后追加内容
```
jinja2
{% block scripts %}
{{ super() }}
<script src="extra.
js"></script>
{% endblock %}
```
### 4. 区块预处理
在父
模板内容前添加内容
```
jinja2
{% block head %}
<meta name="description" content="页面描述">
{{ super() }}
{% endblock %}
```
## Python 代码渲染
模板
使用 Flask 框架渲染
模板的示例：
```python
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('home.html',
page_title="首页",
features=get_features())
@app.route('/about')
def about():
return render_template('about.html',
team_members=get_team_members())
if __name__ == '__main__':
app.run(debug=True)
```
## 最佳实践
1. **命名规范**：
- 基础
模板：`base.html` 或 `layout.html`
-
子模板：使用描述性名称如 `home.html`, `product_detail.html`
2. **区块组织**：
```
jinja2
{# 推荐区块结构 #}
{% block head %}{% endblock %}
{% block header %}{% endblock %}
{% block content %}{% endblock %}
{% block sidebar %}{% endblock %}
{% block footer %}{% endblock %}
{% block scripts %}{% endblock %}
```
3. **默认内容**：
```
jinja2
{% block sidebar %}
<div class="default-sidebar">
<h3>默认侧边栏</h3>
<p>默认内容...</p>
</div>
{% endblock %}
```
4. **
模板组织目录**：
```
templates/
├── base.html
├── layouts/
│ ├── admin_layout.html
│ └── user_layout.html
├── partials/
│ ├── header.html
│ └── footer.html
├── home/
│ ├── index.html
│ └── features.html
└── products/
├── list.html
└── detail.html
```
## 常见问题解决
### 问题1：区块未覆盖
**症状**：
子模板未覆盖父
模板区块，显示默认内容
**解决**：在
子模板中添加同名区块定义
### 问题
2：继承链中断
**症状**：`super()` 调用未按预期工作
**解决**：确保继承链完整，中间
模板也使用 `super()`
### 问题3：性能问题
**症状**：复杂继承结构导致渲染变慢
**解决**：
1. 简化继承层级
2. 使用
模板片段 (`{% include %}`)
3. 启用
Jinja2 缓存
```python
# Flask 中启用缓存
app.
jinja_env.cache = {}
```
## 总结
Jinja2 模板继承提供了强大的代码复用能力：
- 基础
模板定义整体结构和通用元素
-
子模板覆盖特定区域实现定制化
- `super()` 方法允许扩展而非完全替换
- 嵌套继承支持复杂界面结构
- 与 Python 逻辑无缝集成
通过合理使用
模板继承，可以显著减少重复代码，提高开发效率，并保持项目的一致性。
本文介绍如何在Jinja2模板继承中正确加载新的JavaScript文件。通过使用super()函数，可以在子模板中添加额外的JS资源而不破坏原有的脚本加载流程。
扫一扫
5869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
