模板继承先创建一个父模版,它包含大部页面共有元素,并且需要定义能够被子模板覆盖的blocks标签。
extends 模板继承
通过下面的例子,理解模板继承的概念。
创建base.html文件,写入下面代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}基础模板{% endblock %}</title>
</head>
<body>
<div id="app">
<!-- 如果是所有页面共用部分,可直接在block外部写死 -->
<div> 所有页面公用部分 </div>
<!-- 如果是部分页面共用部分,可定义在block中,不需要使用的页面可重写该block,其中block_name1为block的名称 -->
{% block block_name1 %}
<div> 部分页面公用部分1 </div>
{% endblock %}
{% block block_name2 %}
<div> 部分页面公用部分2 </div>
{% endblock %}
<!-- 定义的block可以为空白块 -->
{% block block_name3 %}
{% endblock %}
</div>
</body>
</html>
在子模板中直接继承bse.html模板。
创建demo.html文件,写入下面代码:
<!-- 继承base.html模板 -->
{% extends "base.html" %}
写个视图函数调用上面的demo.html模板,然后访问该页面
可以看到子模板显示了父模板所有内容。
重写block
修改demo.html文件内容如下:
<!-- 继承base.html模板 -->
{% extends "base.html" %}
<!-- 重写tile的block -->
{% block title%} Demo {% endblock %}
<!-- 重写block_name1的block---重写内容 -->
{% block block_name1 %} 重写部分页面公用部分1 {% endblock %}
<!-- 重写block_name2的block---隐藏内容 -->
{% block block_name2 %}{% endblock %}
<!-- 重写block_name3的block---重写内容 -->
{% block block_name3 %}
<div> hello python!</div>
<div> 你好,python! </div>
{% endblock %}
访问demo.html模板,显示的内容如下:
子模板也可被继承重写
修改demo.html文件内容如下:
<!-- 继承base.html模板 -->
{% extends "base.html" %}
<!-- 重写tile的block -->
{% block title%} Demo {% endblock %}
<!-- 重写block_name1的block---重写内容 -->
{% block block_name1 %} 重写部分页面公用部分1 {% endblock %}
<!-- 重写block_name2的block---隐藏内容 -->
{% block block_name2 %}{% endblock %}
<!-- 重写block_name3的block---重写内容 -->
{% block block_name3 %}
<div> hello python!</div>
<div> 你好,python! </div>
{% block block_name4 %}
{% endblock %}
{% endblock %}
新增demo1.html文件内容如下:
<!-- 继承demo.html模板 -->
{% extends "demo.html" %}
{% block title%} Demo1 {% endblock %}
{% block block_name4 %}
<div>继承子模板</div>
{% endblock %}
访问demo1.html,显示的内容如下:
源码等资料获取方法
各位想获取源码的朋友请点赞 + 评论 + 收藏,三连!
三连之后我会在评论区挨个私信发给你们~