Django模板結構優化{% include %}和{% extend %}標籤
{% include %}標籤
在拉勾網中我們可以發現,他的每個網頁的頭部和尾部都是一樣的,那麼他是每個html檔案中都寫了這些程式碼嗎?
答案肯定是否定的。這個時候就需要用到我們的{% include %}標籤了。
新建一個專案,然後在裡面新建一個template_include_demo
的app,然後建立一個urls.py的檔案,
在主urls中對template_include_demo
這個app做一層對映,即主urls中新增程式碼:
path('template/',include('template_include_demo.urls')),
然後在和app的同級目錄下新建5個html檔案,分別為template_include.html
company.html
,school.html
,header.html
,footer.html
然後去views中寫入程式碼:
from django.shortcuts import render
# Create your views here.
def index(request):
return render(request,'template_include.html',{'username':'zhiliao'})
def company(request):
return render(request,'company.html')
def school (request):
return render(request,'school.html')
在urls中新增對映:
from django.urls import path
from . import views
app_name = 'template'
urlpatterns = [
path('',views.index),
path('company/',views.company,name = 'company'),
path('school/',views.school,name = 'school'),
]
然後我們去編寫html的程式碼
在header.html
<header>
<ul>
<li><a href="{% url 'template:index' %}">首頁</a></li>
<li><a href="{% url 'template:company' %}">公司</a></li>
<li><a href="{% url 'template:school' %}">校園</a></li>
</ul>
</header>
在footer.html
中寫入
<div class="footer">
這是footer部分
</div>
注意: 這兩個檔案中只有這些程式碼,沒有其他的一些無關的程式碼。
然後在template_include.html
中寫入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% include 'header.html' %}
<div class="content">
這是中間內容<br>
</div>
{% include 'footer.html' %}
</body>
</html>
company.html
中寫入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% include 'header.html' %}
<div class="content">
這是公司中間內容
</div>
{% include 'footer.html' %}
</body>
</html>
school.html
中寫入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% include 'header.html' %}
<div class="content">
這是學校中間內容<br>
</div>
{% include 'footer.html' %}
</body>
</html>
然後我們就可以進行訪問測試了,就發現每個頁面只有中間的部分不一樣,而頭部和尾部都是一樣的。這樣我們就能比較方便的編寫每個html檔案了。
在開發中不可避免的是在在模板中需要傳遞引數,
我們先在views中的index函式中慘第一個引數至template_include.html
修改views中的index函式
def index(request):
return render(request,'template_include.html',{'username':'張三'})
然後我們在header.html
中新增一個<li>標籤
<li>{{ username }}</li>
然後分別在template_include.html
,company.html
,school.html
中的內容下面新增一行程式碼
{{ username }}
接下來就可以檢視效果了
我們發現只有首頁中接收到了username
這個變數,包括首頁中的header.html
也接收到了這個變數,而在company.html
和school.html
中則沒有接收到username
這個變數,包括它們中的header.html
都是沒有接收到這個變數的。
所以我們傳入引數至哪個頁面,就只有那個頁面能接收到引數。那麼我們向讓別的頁面也能接收到我們傳入的引數,應該怎樣做呢?
我們只需要在include後面新增一個引數就可以了
在company.html
和school.html
改變{% include %}標籤中的程式碼為
{% include 'header.html' with username='張三' %}
這樣我們就能在company.html
和school.html
中接收這個值了。但是,只有header中能接收,在中間部分的div中還是接收不到這個值的。
{% extend %}標籤
新建一個front
的app,在app下新建一個urls.py
的檔案,繼續新建一個templates
的資料夾,在templates
中新建4個html檔案,分別為base.html
,company_front.html
,index_front.html
,school_front.html
。然後將此app註冊到settings.py
的檔案中。
編寫views中的程式碼
from django.shortcuts import render
# Create your views here.
def index(request):
return render(request,'index_front.html')
def company(request):
return render(request,'company_front.html')
def school(request):
return render(request,'school_front.html')
然後新增對映,首先先將此app在主urls中做一層對映
path('front/',include('front.urls')),
然後在此app中的urls中新增對映
from django.urls import path
from . import views
app_name = 'front'
urlpatterns = [
path('',views.index),
path('company/',views.company,name = 'company'),
path('school/',views.school,name = 'school'),
]
然後在base.html
中寫入程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<header>
<ul>
<li><a href="{% url 'front:index' %}">首頁</a></li>
<li><a href="{% url 'front:company' %}">公司</a></li>
<li><a href="{% url 'front:school' %}">校園</a></li>
</ul>
</header>
<div class="content">
{% block content %}
我是父摸版中的程式碼
{% endblock %}
</div>
<div class="footer">
這是footer部分
</div>
</body>
</html>
然後company_front.html
,index_front.html
和school_front.html
分別對應寫入程式碼
{% extends 'base.html' %}
{% block content %}
我是公司主頁程式碼
{% endblock %}
{% extends 'base.html' %}
{% block content %}
我是主頁程式碼
{% endblock %}
{% extends 'base.html' %}
{% block content %}
我是學校主頁程式碼
{% endblock %}
然後就可以輸入網址進行測試了。
{% extends 'base.html' %}
的意思時繼承自base.html
,這個裡面有的程式碼繼承之後的模板中全部都有。base.html
中的{% block content %}是一個介面,我們可以以在繼承的模板中間使用{% block content %}來改變裡面的程式碼。- 使用{% block content %}標籤之後,父模板中{% block content %}標籤中的程式碼都不會在子模板中顯示出來。(就像上面
base.html
中的我是父摸版中的程式碼從來沒有顯示出來過。) - 如果想要父模板中{% block content %}標籤中的程式碼顯示出來,則需要新增
{{ block.super }}
就能夠顯示了。 - 如果我們在子模板中將程式碼放在{% block content %}標籤的外面,Django是不會給我們渲染的,即是沒有效果的。
{% extends 'base.html' %}
標籤必須是第一個標籤,因此我們一般都是將{% extends 'base.html' %}
放在第一行。{% extend %}
標籤和{% include %}
傳引數是一樣的,如果給子模板傳遞了一個引數,那麼該子模板中的父模板能接收到引數,而其他子模板中不能接收到引數。