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>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/43980.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/43980.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/43980.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

代碼隨想錄算法訓練營day76 | Floyd 算法精講、A * 算法精講

本次題目來自于卡碼網 ??97. 小明逛公園 &#xff08;Floyd 算法精講&#xff09; 1、確定dp數組以及下標的含義 grid[i][j][k] m&#xff0c;表示 節點i 到 節點j 以[1...k] 集合為中間節點的最短距離為m 2、確定遞推公式 分兩種情況&#xff1a; 節點i 到 節點j 的最…

01 | 基礎架構:一條SQL查詢語句是如何執行的?

此系列文章為極客時間課程《MySQL 實戰 45 講》的學習筆記&#xff01; 引言 在了解 SQL 查詢語句如何執行之前&#xff0c;先了解下MySQL 的基本架構示意圖。 MySQL 分為 Server 層和引擎層。 Server 層包括連接器、查詢緩存、分析器、優化器、執行器等&#xff0c;涵蓋 M…

微球無菌篩分技術的巔峰之作:納維加特PV系列

在醫藥行業中&#xff0c;對微球的制備和篩分要求極高&#xff0c;納維加特&#xff08;Navector&#xff09;憑借其自主創新的PV系列微球無菌旋振篩&#xff0c;成功突破這一領域的技術壁壘。該產品不僅擁有高效率、高精度的篩分能力&#xff0c;同時還兼顧了高衛生級別的要求…

uniapp自動升級

一、創建云服務空間&#xff08;https://unicloud.dcloud.net.cn&#xff09; 云空間用于關聯需要版本控制升級的項目&#xff0c;如果已擁有云空間則省略此步驟。 二、搭建 uni升級中心 - 后臺管理系統&#xff08;升級中心 uni-upgrade-center - Admin&#xff09; uni-adm…

Linux調試器-gdb使用以及Linux項目自動化構建工具-make/Makefile

目錄 1.gdb背景2.開始使用gdb3.make/makefile 背景4.實例代碼5.依賴關系6.依賴方法7.原理8.項目清理 1.gdb背景 程序的發布方式有兩種&#xff0c;debug模式和release模式 Linux gcc/g出來的二進制程序&#xff0c;默認是release模式 要使用gdb調試&#xff0c;必須在源代碼生…

c++的makeFile怎么做

makeFile30分鐘 1 介紹&#xff08;makeFile是什么&#xff0c;30分鐘入門搞懂&#xff09;2 為什么要用makeFile3 如何制作makeFile文件&#xff1f;4 參考 makeFile真的很簡單&#xff0c;不要想的一下子全都學懂了&#xff0c;先入門了&#xff0c;然后在實踐中去使用&#…

Apache部署與配置

概述 介紹 Apache HTTP Server(簡稱Apache)是Apache的一個開源的網頁服務器&#xff0c;它源自NCSAhttpd服務器&#xff0c;并經過多次修改和發展&#xff0c;如今已經成為全球范圍內廣泛使用的Web服務器軟件之一 特點 跨平臺&#xff1a;可以運行在幾乎所有廣泛使用的計算機平…

36 特殊類設計

類&#xff0c;不能被拷貝 拷貝只會放生在兩個場景中&#xff1a;拷貝構造函數以及賦值運算符重載&#xff0c;因此想要讓一個類禁止拷貝。 c98 將拷貝構造函數與賦值云懸浮重載只聲明不定義&#xff0c;并且將其訪問權限設置為私有 class CopyBan{// ...private:CopyBan(co…

Apache中使用SSI設置

先停服務在修改httpd.conf&#xff0c;備份下 Apache\Apache24\conf 設置httpd.conf LoadModule ssl_module modules/mod_ssl.so 取消該命令前的注釋符# AddType text/html .shtml AddOutputFilter INCLUDES .shtml 取消該命令前的注釋符# 加入html AddType text/html .…

在 Kotlin 中,`@JvmOverloads` 注解用于為具有默認參數值的函數生成重載方法

在 Kotlin 中&#xff0c;JvmOverloads 注解用于為具有默認參數值的函數生成重載方法。這個注解在你需要從 Java 代碼調用 Kotlin 函數時特別有用&#xff0c;因為 Java 不支持默認參數值。 下面是一個例子&#xff0c;說明 JvmOverloads 的工作原理&#xff1a; Kotlin 代碼…

前端javascript中的排序算法之插入排序

插入排序&#xff08;Selection Sort&#xff09;基本思想&#xff1a; 插入排序每次排一個數組項&#xff0c;以此方式構建最后的排序數組。假定第一項已經排序了&#xff0c;接著&#xff0c; 它和第二項進行比較&#xff0c;第二項是應該待在原位還是插到第一項之前呢&#…

軟件工具網站推薦

1.菜鳥工具 菜鳥工具 - 不止于工具菜鳥工具&#xff0c;為開發設計人員提供在線工具&#xff0c;網址導航&#xff0c;提供在線PHP、Python、 CSS、JS 調試&#xff0c;中文簡繁體轉換&#xff0c;進制轉換等工具。致力于打造國內專業WEB開發工具&#xff0c;集成開發環境&…

詳細談談負載均衡的startupProbe探針、livenessProbe探針、readnessProbe探針如何使用以及使用差異化

文章目錄 startupProbe探針startupProbe說明示例配置參數解釋 使用場景說明實例——要求&#xff1a; 容器在8秒內完成啟動&#xff0c;否則殺死對應容器工作流程說明timeoutSeconds: 和 periodSeconds: 參數順序說明 livenessProbe探針livenessProbe說明示例配置參數解釋 使用…

CSS技巧專欄:一日一例 1.純CSS實現 會討好的熱情按鈕 特效

題外話: 從今天開始,我準備開設一個新的專欄,專門寫 使用CSS實現各種酷炫按鈕的方法,本專欄目前準備寫40篇左右,大概會完成如下按鈕效果: 今天,我來介紹第一個按鈕的實現方法:會討好的熱情按鈕。為什么我給它起這樣的名字呢?你看它像不像一個不停搖尾巴的小黃?當你鼠…

【QML之·基礎語法概述】

系列文章目錄 文章目錄 前言一、QML基礎語法二、屬性三、腳本四、核心元素類型4.1 元素可以分為視覺元素和非視覺元素。4.2 Item4.2.1 幾何屬性(Geometry&#xff09;:4.2.2 布局處理:4.2.3 鍵處理&#xff1a;4.2.4 變換4.2.5 視覺4.2.6 狀態定義 4.3 Rectangle4.3.1 顏色 4.4…

1Panel服務器面板支持哪些Linux操作系統?

1Panel面板支持的Linux操作系統版本有哪些&#xff1f;1Panel支持主流Linux發行版本&#xff0c;包括RedHat、CentOS、Ubuntu、Debian、openEuler及其他國產操作系統。支持多種服務器架構&#xff0c;碼筆記整理詳細1Panel面板支持的服務器系統、架構、內存和瀏覽器支持&#x…

【界面態】霍爾效應表征氮化對SiC/SiO2界面陷阱的影響

引言 引言主要介紹了硅碳化物&#xff08;SiC&#xff09;金屬-氧化物-半導體場效應晶體管&#xff08;MOSFETs&#xff09;作為新一代高壓、低損耗功率器件的商業化背景。SiC MOSFETs因其優越的電氣特性&#xff0c;在高電壓和高溫應用領域具有巨大的潛力。然而&#xff0c;盡…

綜合安全防護

題目 1,DMZ區內的服務器,辦公區僅能在辦公時間內(9:00-18:00)可以訪問,生產區的設備全天可以訪問. 2,生產區不允許訪問互聯網,辦公區和游客區允許訪問互聯網 3,辦公區設備10.0.2.10不允許訪問DMz區的FTP服務器和HTTP服務器,僅能ping通10.0.3.10 4,辦公區分為市場部和研發部,研…

Redis 數據過期及淘汰策略

Redis 數據過期及淘汰策略 過期策略 定時過期 在設置key?的過期時間的同時&#xff0c;為該key?創建一個定時器&#xff0c;讓定時器在key?的過期時間來臨時&#xff0c;對key進行刪除。到過期時間就會立即清除。該策略可以立即清除過期的數據&#xff0c;對內存很友好&a…

動態數據庫設計

動態數據庫設計是一種靈活的方法&#xff0c;用于構建能夠適應不斷變化的數據需求的數據庫結構。它強調在不頻繁修改數據庫表結構的前提下&#xff0c;有效管理和存儲多樣化的數據。以下是實現動態數據庫設計的一些關鍵技術點和策略&#xff1a; 實體-屬性-值&#xff08;EAV&a…