flask(十四)----模版渲染之继承-CSDN博客

本文介绍如何使用Flask框架配合HTML模板继承技术实现网页导航栏切换时内容的自动更新，通过示例展示了基模板与子模板的定义及使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求:在一个页面中，如何根据导航栏的切换自动更新html页面？

例如：我在点击项目管理的时候，自动变化横线之间的内容，但是导航栏不变，我们可以使用html页面的模版继承，带变化的html继承base.html即可。

from flask import Flask, render_template

app = Flask(__name__)


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


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


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

base.html基模版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基模版--{%block title%}默认标题{%endblock%}</title>
</head>
<body>
    <p>测试平台</p>
    <p>项目管理</p>
    <p>接口管理</p>
    <p>用例管理</p>
    <p>联系人</p>

    <hr>
    {%block content%}
    测试super()函数在子模板中的应用
    {%endblock%}
    <hr>

    <p>赞助商</p>

</body>
</html>

子模版继承base.html基模板：

{ % extends 'base.html' % }

内容变化区域：

{ % block content % }

子模板与基模板不同的内容

{ % endblock % }

projects.html：

<!--继承基模版 base.html-->
{%extends 'base.html'%}

<!--子模板变化的内容-->
{%block title%}项目管理{%endblock%}

{%block content%}
    chuntian负责的项目管理列表内容展示
{%endblock%}

效果：