Django學習【第4篇】：Django之模板繼承
阿新 • • 發佈：2018-12-21
att tool idt down display pos day6 html 應該
Django框架之模板繼承和靜態文件配置
在基板裏面添加內容
{% block classinfo %}
<h2>首頁</h2>
<h2>學生信息</h2>
<h3>{{ class_id }}班</h3>
{% endblock%}
5、也可以寫好多盒子，
在left中寫個盒子
{% block menu %}
<p>I see you you</p>
{% endblock %}
{% block.super %}
一、模板繼承
目的是：減少代碼的冗余
語法：
{% block classinfo %}
{% endblock %}
具體步驟：
1、創建一個base.html文件，
2、把要顯示的頁面的內容寫在這裏面，也就是html要在瀏覽器顯示的內容
3、在right裏面寫個盒子
{% block classinfo %}
{% endblock %}
在這裏面寫個空盒子，以後誰來擴展就在這個盒子裏面添加相應的內容就行了
4、然後再創建一個.html文件，讓這個繼承base.html文件，
在基板裏面添加內容
{% block classinfo %}
<h2>首頁</h2>
<h2>學生信息</h2>
<h3>{{ class_id }}班</h3>
{% endblock%}
5、也可以寫好多盒子，
在left中寫個盒子
{% block menu %}
<p>I see you you</p>
{% endblock %}
註意：
盒子裏面可以有默認的內容，如果有默認的時候你不擴展就走默認的，如果你擴展了，就替換了，
{% block.super %}
例如：
{% block menu %}
{{ block.super }}
<p>！！！</p> #先繼承父類的，後插入數據
{% endblock %}
1、模板繼承圍繞兩點：繼承和擴展
你有什麽繼承什麽，
擴展的是盒子，
2、模板中設置的盒子越多越好，因為這樣你想擴展的時候就容易了。我想擴展就擴展了。不擴展就不擴展了
3、為了更好的可讀性，你也可以給你的 {% endblock %}
{% block content %}
...
{% endblock content %}
4、如果你發現你自己在大量的模版中復制內容，那可能意味著你應該把內容移動到父模版中的一個 {% block %} 中。
最後，請註意你並不能在一個模版中定義多個相同名字的 block 標簽。這個限制的存在是因為block標簽的作用是“雙向”的。這個意思是，block標簽不僅提供了一個坑去填，它還在 _父模版_中定義了填坑的內容。如果在一個模版中有兩個名字一樣的 block 標簽，模版的父模版將不知道使用哪個block的內容。
具體例子說明
urls.py
urlpatterns = [
url(r‘^admin/‘, admin.site.urls),
url(r‘^text/(\d+)‘, views.text),
]
views.py
from django.shortcuts import render,redirect
# Create your views here.
def text(request,class_id):
# 班級變量
print(class_id) #拿到的是你在路徑裏輸入的幾就是幾
# 數據庫查詢
return render(request, "text.html", {"class_id": class_id})
templaite / base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<title>Title</title>
<style>
.right {
height: 400px;
background-color: silver;
}
</style>
</head>
<body>
{#導航條#}
<nav class="navbar navbar-primary 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>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
{#內容#}
<div class="containers">
<div class="row">
<div class="col-md-11 col-lg-offset-1">
{# 左側#}
<div class="left col-md-3">
{% block menu %}
<div class="list-group">
<a href="#" class="list-group-item active">
學生班級
</a>
<a href="/text/6" class="list-group-item">s6</a>
<a href="/text/7" class="list-group-item">s7</a>
<a href="/text/8" class="list-group-item">s8</a>
<a href="/text/9" class="list-group-item">s9</a>
</div>
{% endblock %}
</div>
{# 右側#}
<div class="right col-md-8">
{# 定義一個盒子#}
{% block classinfo %}
{% endblock %}
</div>
</div>
</div>
</div>
{#底部#}
</body>
</html>
template /text.py 繼承上面的文件
{% extends "base.html" %}
{% block classinfo %}
<h1>學生信息</h1>
<h3>{{ class_id }}班級</h3>
{% endblock %}
{#追加#}
{% block menu %}
{{ block.super }}
<a href="">學生信息</a>
{% endblock %}
二、靜態文件配置
我們自己導入的一些包就叫做靜態文件
1、在全局中先創建一個static的包，
2、在static裏面導入我們的bootstrap，還是jquery等
3、然後在settings.py中加上一些配置
STATIC_URL = ‘/static/‘ #這個配置就相當於下面配置的別名,如果這裏的名字修改了就按照這裏的名字去導入
STATICFILES_DIRS = [
os.path.join(BASE_DIR,"static") #E:\day68\static 找到static路徑
]
4、導入css,js,jquery
<link rel = "stysheet",href= "/static/index.css/"> <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
Django學習【第4篇】：Django之模板繼承