Django 实现子模版继承父模板

gongzairen2024-07-14 19:48

背景

Django的占位符，如果不继承父模板的内容，会被子模版所覆盖，有些业务场景子模版也需要使用到父模板中的内容

可以使用Django自带的标签{% block super %}来实现此效果

base.html

最基础html，相当于第一层html，block js 进行占位

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- head content -->
</head>
<body>
    <!-- body content -->

    {% block js %}
    <!-- base js content -->
    <script src="base.js"></script>
    {% endblock %}
</body>
</html>

middle.html

中间html，相当于第二层html，在block js 中继承了base.html的内容

html 复制代码

{% extends "base.html" %}

{% block js %}
    {{ block.super }}
    <!-- middle js content -->
    <script src="middle.js"></script>
{% endblock %}

child.html

孩子html，相当于第三层html，在block js 中继承了middle.html的内容

html 复制代码

{% extends "middle.html" %}

{% block js %}
    {{ block.super }}
    <!-- child js content -->
    <script src="child.js"></script>
{% endblock %}

最终渲染的效果

最终能够包含所有被继承中所引入的js文件，而不是被最后一个覆盖

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- head content -->
</head>
<body>
    <!-- body content -->

    <!-- base js content -->
    <script src="base.js"></script>
    <!-- middle js content -->
    <script src="middle.js"></script>
    <!-- child js content -->
    <script src="child.js"></script>
</body>
</html>