Django模板繼承 extend標(biāo)簽實(shí)例代碼詳解
更新時(shí)間：2019年05月16日 12:01:56 作者：klvchen
這篇文章主要介紹了Django模板繼承 extend標(biāo)簽實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
在 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)簽實(shí)例代碼詳解,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了JS數(shù)組Object.keys()方法的使用,結(jié)合實(shí)例形式分析了javascript使用Object.keys()方法進(jìn)行數(shù)組遍歷、讀取相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
原生JavaScript寫出Tabs標(biāo)簽頁的實(shí)例代碼
這篇文章主要介紹了原生JavaScript寫出Tabs標(biāo)簽頁的實(shí)例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
在Javascript里，函數(shù)被調(diào)用的時(shí)候，除了接受聲明是定義的形式參數(shù)，每一個(gè)函數(shù)還接受兩個(gè)附加的參數(shù)：this和arguments。2011-09-09
微信小程序自定義頭部導(dǎo)航欄和導(dǎo)航欄背景圖片 navigationStyle問題
這篇文章主要介紹了微信小程序 自定義頭部導(dǎo)航欄和導(dǎo)航欄背景圖片 navigationStyle功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-07
實(shí)現(xiàn)token無感刷新對(duì)于前端來說是一項(xiàng)十分常用的技術(shù),這篇文章主要給大家介紹了關(guān)于前端雙token無感刷新的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
Packer 3.0 JS壓縮及混淆工具 下載...2007-05-05
Google的跟蹤代碼 動(dòng)態(tài)加載js代碼方法應(yīng)用
Google的跟蹤代碼 動(dòng)態(tài)加載js代碼，需要的朋友可以參考下2012-11-11
Bootstrap導(dǎo)航菜單點(diǎn)擊后無法自動(dòng)添加active的處理方法
今天小編就為大家分享一篇Bootstrap導(dǎo)航菜單點(diǎn)擊后無法自動(dòng)添加active的處理方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
拖動(dòng)Html元素集合 Drag and Drop any item
拖動(dòng)Html元素集合 Drag and Drop any item...2006-12-12
這篇文章主要介紹了JS實(shí)現(xiàn)的豎向折疊菜單代碼,涉及JavaScript動(dòng)態(tài)遍歷頁面元素及樣式修改的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10