Django模板繼承 extend標(biāo)簽實例代碼詳解
更新時間：2019年05月16日 12:01:56 作者：klvchen
這篇文章主要介紹了Django模板繼承 extend標(biāo)簽實例代碼，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下
在 views.py 上修改
... def ordered(req): return render(req, "ordered.html") def shopping_car(req): return render(req, "shopping_car.html")
在 urls.py 上修改
...
path('ordered/', views.ordered),
path('shopping_car/', views.shopping_car),
...
在 tmplates 文件夾下創(chuàng)建 base.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.page-header{
height:50px;
background-color: rebeccapurple;
}
.page-body .menu{
height: 500px;
background-color: antiquewhite;
float: left;
width: 20%;
}
.page-body .content{
height: 500px;
background-color: cornflowerblue;
float: left;
width: 80%
}
.page-footer{
height:50px;
background-color: green;
clear: both;
}
</style>
</head>
<body>
<div>
<div class="page-header"></div>
<div class="page-body">
<div class="menu">
<a href="/ordered/" rel="external nofollow" >訂單</a><br>
<a href="/shopping_car/" rel="external nofollow" >購物車</a>
</div>
{% block content %}
{% endblock %}
</div>
<div class="page-footer"></div>
</div>
</body>
</html>
ordered.html 文件
{% extends "base.html" %}
{% block content %}
<div class="content">
訂單
</div>
{% endblock %}
shopping_car.html 文件
{% extends "base.html" %}
{% block content %}
<div class="content">
購物車
</div>
{% endblock %}
效果如下：
總結(jié)
以上所述是小編給大家介紹的Django模板繼承 extend標(biāo)簽實例代碼詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了js中的原生網(wǎng)絡(luò)請求解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
javascript操作table的特性，大家可以看下，發(fā)揮下，實現(xiàn)更多的功能。2009-09-09
深入淺析JavaScript中的in關(guān)鍵字和for-in循環(huán)
這篇文章主要介紹了JavaScript中的in關(guān)鍵字和for-in循環(huán)，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)圖片層疊輪播切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02
使用three.js實現(xiàn)炫酷的酸性風(fēng)格3D頁面效果
本文內(nèi)容主要介紹，通過使用React+three.js技術(shù)棧，加載3D模型、添加3D文字、增加動畫、點擊交互等，配合樣式設(shè)計，實現(xiàn)充滿設(shè)計感的酸性風(fēng)格頁面2021-10-10
JavaScript?防抖debounce與節(jié)流thorttle
這篇文章主要介紹了JavaScript?防抖debounce與節(jié)流thorttle，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-05-05
給大家詳細(xì)分析了JS中精巧的自動柯里化實現(xiàn)方法并通過代碼實例分析了過程和原理，參考學(xué)習(xí)下吧。2017-12-12
這篇文章主要為大家詳細(xì)介紹了p5.js臨摹動態(tài)圖形的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
本篇文章主要介紹了JS實現(xiàn)瀏覽器打印、打印預(yù)覽示例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
js判斷鼠標(biāo)同時離開兩個div想了好長時間終于出爐了，下面與大家分享下具體的實現(xiàn)代碼，感興趣的朋友可以參考下啊2013-05-05