Django的模板继承
生活随笔
收集整理的這篇文章主要介紹了
Django的模板继承
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
來看一個例子
我們有一個訂單的頁面和購物車的頁面，比如下面的截圖，我的購物車的頁面和訂單的頁面只有圓圈中的截圖的內容不一樣
?
?
所以我們的訂單的html頁面和購物車的html業務的html幾乎都是一致的
訂單的html代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0px;}.page-header{height: 50px;background-color: silver;}.page-body .menu{height: 400px;background-color: aqua;float: left;width: 20%;}.page-body .context{height: 400px;background-color: red;width: 80%;float: right;}.page-footer{height: 30px;background-color: yellow;clear: both;}</style> </head> <body><div><div class="page-header"></div><div class="page-body"><div class="menu"><a href="/ordered/">訂單</a> {# 這里href是一個路徑，就和我們從前端怎么訪問某個html的路徑是一樣的，也需要調用視圖函數#}<a href="/shopping/">購物城</a></div><div class="context">訂單</div></div><div class="page-footer"></div></div> </body> </html>
購物車的html代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.page-header{height: 50px;background-color: silver;}.page-body .menu{height: 400px;background-color: aqua;float: left;width: 20%;}.page-body .context{height: 400px;background-color: red;width: 80%;float: right;}.page-footer{height: 30px;background-color: yellow;clear: both;}</style> </head> <body><div><div class="page-header"></div><div class="page-body"><div class="menu"><a href="/ordered/">訂單</a><a href="/shopping/">購物城</a></div><div class="context">購物車1</div></div><div class="page-footer"></div></div> </body> </html>
然后我們寫視圖函數
?
?如果有上面的例子，我們就可以寫一個基本的html文件，也就是父親html文件
父親的html的代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0px;}.page-header{height: 50px;background-color: silver;}.page-body .menu{height: 400px;background-color: aqua;float: left;width: 20%;}.page-body .context{height: 400px;background-color: red;width: 80%;float: right;}.page-footer{height: 30px;background-color: yellow;clear: both;}</style> </head> <body><div><div class="page-header"></div><div class="page-body"><div class="menu"><a href="/ordered/">訂單</a> {# 這里href是一個路徑，就和我們從前端怎么訪問某個html的路徑是一樣的，也需要調用視圖函數#}<a href="/shopping/">購物城</a></div>{% block content %} {# content:就是我這個盒子的名稱 #}xxxxxxxxxxxxxxxxx{% endblock %}</div><div class="page-footer"></div></div> </body> </html>
我們重點關注這一段
這里的意思 有一個盒子，名稱是content，這個名字不能重復，這里的xxxxxxxxxxx的意思是如果在子html如果沒有替換content這個盒子，就會默認顯示xxxxxxxxxxxxxxx，如果有的話，就會顯示為子html文件的內容
下面我們看下子html文件中的內容，首先需要引入父html文件，然后替換盒子名稱為content的盒子，替換為的內容就中間包裹起來的標簽內容
{% extends "base.html" %}{% block content %} <div class="context">訂單1 </div> {% endblock %}
如果在模板的的塊中寫上數據，那么如果其他html文件在繼承模板的時候沒有重xieblock中內容，則會繼承模板中的數據
比如下面的例子，我在模板中定義了a標簽
<div class="body"><div class="left"><a href="/app1/test1/" title="訂單">訂單</a><a href="/app1/test2/" title="商店">商店</a></div><div class="right">{% block context %}<h1>模板的數據</h1>{% endblock %}</div></div><div class="foot"><em><h1>底部</h1></em></div> </body>
我在訂單頁面沒有重寫context，而在商店重寫了context
{% extends "base.html" %}{% block context %}<em><b><h1>商店</h1></b></em> {% endblock %}{% extends "base.html" %}{#{% block context %}#} {# <em>#} {# <b>#} {# <h1>訂單</h1>#} {# </b>#} {# </em>#} {#{% endblock %}#}
我們看頁面的效果
訂單頁面
?
商店頁面
?
轉載于:https://www.cnblogs.com/bainianminguo/p/8729579.html
總結
以上是生活随笔為你收集整理的Django的模板继承的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Layabox 常用操作
- 下一篇： While executing gem