flask-JinJa2模板继承用法

公告

View Post

什么是模板继承?

模板继承类似于面向对象中类继承的思想.
父模板中的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 %}}

posted on 2023-03-17 21:06 Yancy00 阅读(108) 评论(0) 收藏举报

刷新页面返回顶部