flask-JinJa2模板继承用法
什么是模板继承?
模板继承类似于面向对象中类继承的思想.
父模板中的block块就相当于抽象函数.
每个子页面根据自己的实际需要去具体实现指定的块.
模板继承:目的为了代码复用.简化重复代码.
比如一个网站的导航和页脚侧边内容一般都固定一成不变.
用法示例
<!--base.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %} {% endblock %}</title>
{% block head %} {% endblock %}
</head>
<body>
<div id="nav-bar">
bootstrap导航条菜单
</div>
<div id="content">{% block content %} {% endblock %} </div>
<div id="footer" style="position: fixed;bottom:10px; text-align: center">
{% block footer %}
<hr>
bootstrap面板组件.显示固定相关版权信息.
<span>©版权所有xxxx科技有限公司</span>
<div>2022年11月20日</div>
{% endblock %}
</div>
{% block js %} {% endblock %}
</body>
</html>
<!--login_form.html-->
<form id="login_form">
<input type="text" name="username">
<input type="password" name="password">
<input type="password" name="confirm_password">
<input type="submit" value="提交">
</form>
<!--template-demo1.html-->
{% extends 'base.html' %}
{% block title %} 这是子页面1 {% endblock %}
{% block content %}
{% include 'login_form.html' %} <!--包含另一个页面进来,文件名用单引号双引号都行-->
<h1>hello? 这是子页面内容</h1>
<ol><h4><b>注意:</b></h4>
<li>子页面不一定要全部去实现父页面中的所有block.本示例就没有实现 block head,block js</li>
<li>block不能重名</li>
<li>子页面可以用super调用父页面的指定块</li>
<li>子页面可以用self.块名 来调用其他的块.示例: {{self.title()}}</li>
<li>还可以用include全量包含其他html页面中内容.类似于c语言中的include包含头文件的意思</li>
</ol>
{% endblock %}
{% block footer %}
<!--如果这里不调用父页面的页脚内容.则子页面会全量覆盖父页面的页脚内容.-->
{{super()}}
这是子页面页脚新增内容
{% endblock %}}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？