13 Flask 模板渲染之模板继承

在上一篇中,我们学习了如何在 Flask 中使用模板变量来动态渲染内容,而本篇将深入探讨 模板继承 的概念,以实现代码重用和视图的模块化。模板继承使得我们可以创建一个基础模板,然后在其基础上扩展和修改其他模板,从而避免代码重复,提高维护性。

模板继承的基本概念

在 Flask 中,模板继承允许我们定义一个基本的布局模板(base.html),然后其他模板可以从这个基本模板继承并扩展其内容。这种方式便于对整体网站风格的统一管理,比如头部、底部或其他常见元素。

创建基础模板

首先,我们需要创建一个基础模板 base.html,该模板将包括页面的基本结构,比如头部、脚部和主页内容的占位符。

以下是一个简单的 base.html 模板示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}我的网站{% endblock %}</title>
</head>
<body>
<header>
<h1>欢迎来到我的网站</h1>
<nav>
<ul>
<li><a href="/">主页</a></li>
<li><a href="/about">关于我们</a></li>
</ul>
</nav>
</header>

<main>
{% block content %}
<!-- 子模板内容将会插入这里 -->
{% endblock %}
</main>

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

在这个模板中,我们使用了两个 block 标签分别定义了 titlecontent 的占位符。子模板可以重写这些 block,从而定制具体页面的内容。

创建子模板

接下来,我们将创建一个关于页面模板 about.html,它将继承自基础模板 base.html。你可以在 about.html 中定义特定于该页面的内容,例如:

1
2
3
4
5
6
7
8
{% extends "base.html" %}

{% block title %}关于我们{% endblock %}

{% block content %}
<h2>关于我们</h2>
<p>我们是一家专注于 Flask 教程的公司。</p>
{% endblock %}

在这个示例中,使用 extends 语句指明 about.html 模板继承自 base.html。然后,我们重写了 titlecontentblock,以提供特定于该页面的信息。

在 Flask 中渲染模板

现在,我们来看看如何在 Flask 应用中渲染这些模板。以下是一个简单的 Flask 应用示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
return render_template('home.html')

@app.route('/about')
def about():
return render_template('about.html')

if __name__ == '__main__':
app.run(debug=True)

在以上代码中,我们定义了两个路由://about。在 /about 的视图函数中,我们调用 render_template 渲染 about.html 模板。由于 about.html 继承了 base.html,因此会自动包含基础模板的内容。

结论

模板继承极大地提高了我们在 Flask 应用中的模板管理效率。在大型应用中,使用模板继承可以降低重复代码的数量,同时保持一致性。通过定义合理的基础模板,能够快速构建出复杂的网页结构。

在下一篇中,我们将讨论 表单处理,并介绍如何使用 Flask-WTF 库来处理和验证表单。接下来我们再深入了解如何创建和处理表单类,实现用户输入的有效管理。

13 Flask 模板渲染之模板继承

https://zglg.work/flask-zero/13/

作者

IT教程网(郭震)

发布于

2024-08-10

更新于

2024-08-10

许可协议

分享转发

交流

更多教程加公众号

更多教程加公众号

加入星球获取PDF

加入星球获取PDF

打卡评论