Django模板繼承與模板的導(dǎo)入實(shí)例詳解
更新時(shí)間：2022年03月07日 09:50:38 作者：[OJBK]
模板繼承主要是為了提高代碼重用,減輕開發(fā)人員的工作量,下面這篇文章主要給大家介紹了關(guān)于Django模板繼承與模板導(dǎo)入的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
一:模版的繼承
1.什么是模板繼承?
你需要事先在你想要使用的主頁(yè)面上劃定區(qū)域做好標(biāo)記，之后在子頁(yè)面繼承的時(shí)候你就可以使用在主頁(yè)面劃定的區(qū)域，也就意味著，如果你不劃定任何區(qū)域，那么你子頁(yè)面將無(wú)法修改主頁(yè)面內(nèi)容
2.使用繼承流程原理
1.先在你想要繼承的主頁(yè)面上通過bolck劃定你將來(lái)可能要改的區(qū)域，并做好標(biāo)記
2.在子頁(yè)面上繼承extends，利用block自動(dòng)提示選取你想要修改的內(nèi)容區(qū)域標(biāo)記名稱
3.在子頁(yè)面extends中寫你要修改主頁(yè)面標(biāo)記區(qū)的代碼
4.然后就可以讓子頁(yè)面的修改內(nèi)容渲染到主頁(yè)面的劃定區(qū)域上
你們有沒有見過一些網(wǎng)站
這些網(wǎng)站頁(yè)面整體都大差不差 只是某一些局部在做變化
3.模板繼承語(yǔ)法
1.繼承
{% extends '模版頁(yè)面名' %}
2.局部修改
# 1.你需要先去模版頁(yè)面中劃定可以被修改的區(qū)域
{% block '名字' %}
模版內(nèi)容（666）
{% endblock %}
# 2.子頁(yè)面中即成了模版頁(yè)面之后 就可以根據(jù)名字修改
{% block '名字' %}
子版內(nèi)容
子版頁(yè)面吃了可以自己寫自己的之外 還可以繼續(xù)使用模版的內(nèi)容
{{ block.super }} 666
{{ block.super }} 666
{{ block.super }} 666
{{ block.super }} 666
{% endblock %}
4.一般情況下模版頁(yè)面上應(yīng)該至少有三塊可以被修改的區(qū)域
1.css區(qū)域
2.html區(qū)域
3.js區(qū)域
每一個(gè)子頁(yè)面就都可以有自己獨(dú)有的css代碼 html代碼 js代碼
互相之間 互不干擾
# 子頁(yè)面css
{% block css %}
{% endblock %}
{% block content %}
{% endblock %}
# 子頁(yè)面js
{% block js %}
{% endblock %}
二:模板的繼承使用
1.案例需求
1.實(shí)現(xiàn)用戶點(diǎn)擊登錄右側(cè)局部出現(xiàn)登錄頁(yè)面，點(diǎn)擊注冊(cè)右側(cè)出現(xiàn)注冊(cè)頁(yè)面
urls.py
# 模板的繼承
url(r'^home/', views.home),
# 創(chuàng)建login路由
url(r'^login/', views.login),
# 創(chuàng)建reg路由
url(r'^reg/', views.reg),
views.py
def home(request):
return render(request, 'home.html')
def login(request):
return render(request, 'login.html')
def reg(request):
return render(request, 'reg.html')
home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--bootstrap引入 CSS CDN-->
<link rel="stylesheet">
<!--jQuery引入 CDN-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--Bootstrap引入 Js CDN-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
{% block css %}
{% endblock %}
</head>
<body>
{#導(dǎo)航條#}
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
{#左右不留白#}
<div class="container-fluid">
{#row 劃分12份區(qū)域#}
<div class="row">
{# 左側(cè)分三份#}
<div class="col-md-3">
{#側(cè)邊欄 #}
<div class="list-group">
<a href="/home/" class="list-group-item active">
首頁(yè)
</a>
<a href="/login/" class="list-group-item">登錄</a>
<a href="/reg/" class="list-group-item">注冊(cè)</a>
</div>
</div>
<div class="col-md-9">
{# 面板#}
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
{# 劃分區(qū)域 不影響區(qū)域展示，僅僅是標(biāo)記 區(qū)域名#}
{% block content %}
{# 巨幕#}
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
{% endblock %}
</div>
</div>
</div>
</div>
</div>
{% block js %}
{% endblock %}
</body>
</html>
login.html
{#login 頁(yè)面全部清空#}
{#login繼承home主頁(yè)面#}
{% extends 'home.html' %}
{#子頁(yè)面的css代碼 #}
{% block css %}
<style>
h1 {
color: red;
}
</style>
{% endblock %}
{#block 指定選擇主頁(yè)面劃分的(區(qū)域) 可以進(jìn)行修改 #}
{% block content %}
<h1 class="text-center">登錄頁(yè)面</h1>
<form action="">
<p>username: <input type="text" class="form-control"></p>
<p>password: <input type="text" class="form-control"></p>
<input type="submit" class="btn btn-success">
</form>
{% endblock %}
{# 子頁(yè)面的js代碼 #}
{% block js %}
<script>
alert('登錄頁(yè)面')
</script>
{% endblock %}
reg.html
{#reg頁(yè)面全部清空#}
{#reg繼承home主頁(yè)面#}
{% extends 'home.html' %}
{#子頁(yè)面的css代碼 #}
{% block css %}
<style>
h1 {
color: seagreen;
}
</style>
{% endblock %}
{#block 指定選擇主頁(yè)面劃分的(區(qū)域) 可以進(jìn)行修改 #}
{% block content %}
<h1 class="text-center">注冊(cè)頁(yè)面</h1>
<form action="">
<p>username: <input type="text" class="form-control"></p>
<p>password: <input type="text" class="form-control"></p>
<input type="submit" class="btn btn-danger">
</form>
{% endblock %}
{# 子頁(yè)面的js代碼 #}
{% block js %}
<script>
alert('注冊(cè)')
</script>
{% endblock %}
2.總結(jié)模板繼承
一般情況下 模版的頁(yè)面上劃定的區(qū)域越多 那么該模版的擴(kuò)展性就越高
但是如果太多 那還不如自己直接寫
三:模版的導(dǎo)入
1.模板導(dǎo)入
將頁(yè)面的某一個(gè)局部當(dāng)成模塊的形式
哪個(gè)地方需要就可以直接導(dǎo)入使用即可
2.模板導(dǎo)入格式
{% include '導(dǎo)入html文件名' %}
3.模板導(dǎo)入使用
sss.html
<h1>我是sss.html頁(yè)面</h1>
login.html子頁(yè)面
{% endblock %}
{#block 指定選擇主頁(yè)面劃分的(區(qū)域) 可以進(jìn)行修改 #}
{% block content %}
<h1 class="text-center">登錄頁(yè)面</h1>
<form action="">
<p>username: <input type="text" class="form-control"></p>
<p>password: <input type="text" class="form-control"></p>
<input type="submit" class="btn btn-success">
</form>
<p>模板的導(dǎo)入</p>
{% include 'sss.html' %}
{% endblock %}
4.使用結(jié)果
總結(jié)
到此這篇關(guān)于Django模板繼承與模板導(dǎo)入的文章就介紹到這了,更多相關(guān)Django模板繼承與模板導(dǎo)入內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了mac下Redis安裝和使用步驟詳解，并將python如何操作Redis做了簡(jiǎn)單介紹,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
python可視化篇之流式數(shù)據(jù)監(jiān)控的實(shí)現(xiàn)
這篇文章主要介紹了python可視化篇之流式數(shù)據(jù)監(jiān)控的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
PyQt是一個(gè)創(chuàng)建GUI應(yīng)用程序的工具包。它是Python編程語(yǔ)言和Qt庫(kù)的成功融合。Qt庫(kù)是最強(qiáng)大的庫(kù)之一。PyQt是由Phil?Thompson?開發(fā)。接下來(lái)通過本文給大家介紹下使用pyqt彈出消息提示框的問題,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了如何使用Python控制攝像頭錄制視頻，實(shí)現(xiàn)過程需要用到三個(gè)庫(kù)tkinter庫(kù)、PIL庫(kù)、cv2庫(kù)，下面將內(nèi)容詳細(xì)的一步一步實(shí)現(xiàn)，希望對(duì)你有所啟發(fā)并能做一個(gè)屬于自己的攝像頭控制程序2022-03-03
使用 Python 和 OpenCV 實(shí)現(xiàn)實(shí)時(shí)人臉識(shí)別功能
本文詳細(xì)講解了使用Python和OpenCV庫(kù)實(shí)行實(shí)時(shí)人臉識(shí)別的過程,首先,確保安裝OpenCV庫(kù),并通過Haar級(jí)聯(lián)分類器進(jìn)行人臉檢測(cè),實(shí)現(xiàn)步驟包括打開攝像頭、圖像灰度轉(zhuǎn)換、人臉檢測(cè)及繪制矩形框,代碼示例清晰展示了從設(shè)置攝像頭到最終展示檢測(cè)結(jié)果的完整過程2024-11-11
使用Python和scikit-learn創(chuàng)建混淆矩陣的示例詳解
這篇文章主要介紹了使用Python和scikit-learn創(chuàng)建混淆矩陣的示例詳解,該示例包括生成數(shù)據(jù)集、為數(shù)據(jù)集選擇合適的機(jī)器學(xué)習(xí)模型、構(gòu)建、配置和訓(xùn)練它，最后解釋結(jié)果，即混淆矩陣，需要的朋友可以參考下2022-06-06
解決usageerror: line magic function "
這篇文章主要介紹了解決usageerror: line magic function "%%time" not found問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了Pandas之MultiIndex對(duì)象的示例詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Python實(shí)現(xiàn)爬取知乎神回復(fù)簡(jiǎn)單爬蟲代碼分享
這篇文章主要介紹了Python實(shí)現(xiàn)爬取知乎神回復(fù)簡(jiǎn)單爬蟲代碼分享,本文實(shí)現(xiàn)了爬取知乎的“如何正確地吐槽”收藏夾,是對(duì)個(gè)人的一個(gè)興趣實(shí)現(xiàn),需要的朋友可以參考下2015-01-01
這篇文章主要介紹了python滲透測(cè)試linux密碼激活的相關(guān)知識(shí)，通過一個(gè)crypt的示例給大家介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)python滲透知識(shí)有很大的幫助,需要的朋友可以參考下2021-05-05