Django 实现子模版继承父模板

背景

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

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

base.html

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

<!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的内容

{% extends "base.html" %}

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

child.html

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

{% extends "middle.html" %}

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

最终渲染的效果

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

<!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>

相关推荐

  1. Django 实现模版继承模板

    2024-07-10 08:00:03       6 阅读
  2. Django前端页面-模板继承

    2024-07-10 08:00:03       10 阅读
  3. Django模板继承与使用

    2024-07-10 08:00:03       14 阅读
  4. 继承关系

    2024-07-10 08:00:03       17 阅读
  5. Web框架开发-Django-模板继承和静态文件配置

    2024-07-10 08:00:03       23 阅读

最近更新

  1. 网络安全相关竞赛比赛

    2024-07-10 08:00:03       0 阅读
  2. Open3D点云配准介绍-点云之间进行配准

    2024-07-10 08:00:03       0 阅读
  3. windows关闭双击过后的jar 包

    2024-07-10 08:00:03       0 阅读
  4. windows下flutter国内镜像恢复成外网链接

    2024-07-10 08:00:03       0 阅读
  5. Amazon Bedrock 常用场景及 Python 实现

    2024-07-10 08:00:03       0 阅读
  6. go语言web框架:Echo超详细一文搞透

    2024-07-10 08:00:03       0 阅读

热门阅读

  1. [面试爱问] https 的s是什么意思,有什么作用?

    2024-07-10 08:00:03       7 阅读
  2. Docker

    2024-07-10 08:00:03       7 阅读
  3. Vue中v-for和v-if优先级(2、3)

    2024-07-10 08:00:03       6 阅读
  4. 晚上定时编译android系统

    2024-07-10 08:00:03       7 阅读
  5. 摒弃传统分页:移动端开发中的无限滚动实现

    2024-07-10 08:00:03       6 阅读
  6. 程序人生 - (002)

    2024-07-10 08:00:03       8 阅读
  7. MacOS隐藏文件打开指南

    2024-07-10 08:00:03       6 阅读