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 在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 %}傳引數是一樣的，如果給子模板傳遞了一個引數，那麼該子模板中的父模板能接收到引數，而其他子模板中不能接收到引數。