Django模板——模板繼承

-- Django模板的繼承

1.意義:減少頁面的重複定義,實現頁面內容的重用;

2.block標籤:在父模板中挖坑,填寫通用的內容;

{% block content1 %}  # content1是給坑起的名字,容易辨識;

... 填寫通用內容;

{% endblock content1%}

3.extends標籤:繼承父模板的內容,將父模板坑中的通用的內容填到子模板中;

{% extends booktest/base.html%}  # 繼承父模板內容;

 

-- 實際應用模型

-- 父類模板

# 擁有頁面的頭部與底部;

<!DOCTYPE html>
<html>
<head>
<title>父模板</title>
{% block head%}
{% endblock %}
</head>
<body>
 
{% block content1 %}
<h1>這裏是一個坑!~~~~~~</h1>
{% endblock content1%}
<hr>
<h1>contact</h1>
</body>
</html>


-- 首頁.html

# 僅繼承父模板的頭部與底部,沒有其他會被共用的部分;

{% extends 'booktest/base.html'%}


-- 用戶頁面.html

# 在繼承父模板的頭部與底部之外,

# 還有一個會被共用的左側,右側由兩個頁面分別來展示分類與內容;

# 所以,在父模板的坑裏填寫左側相同部分,以及在右側再挖一個坑;

{% extends 'booktest/base.html' %}
{% block content1 %}
<table border='1'>
<tr>
<td height='300'>用戶導航</td>
<td>{% block content2%}{% endblock%}</td>
<!-- 再挖一個坑,給下級填寫 -->
</tr>
</table>
{% endblock%}


-- 用戶分類頁.html(user1.html)

# 繼承上一個用戶頁面;

# 同時,填用戶頁面右側的坑;

{% extends 'booktest/base_user.html' %}
{% block content2%}
<h1>我來填坑!右側可以變動的內容1!</h1>
{% endblock content2%}


-- 用戶內容也.html(user2.html)

# 繼承上一個用戶頁面;

# 同時,填用戶頁面右側的坑;

{% extends 'booktest/base_user.html' %}
{% block content2%}
<h1>我來填坑!右側可以變動的內容2!</h1>
{% endblock content2%}


-- 需要添加的視圖函數(views.py)

def inherit(request):
# 首頁
return render(request, 'booktest/next.html')
 
def base_user(request):
# 用戶頁面
return render(request, 'booktest/base_user.html')
 
def user1(request):
# 用戶頁——分類頁
return render(request, 'booktest/user1.html')
 
def user2(request):
# 用戶頁——內容頁
return render(request, 'booktest/user2.html')


-- URLconf配置

url(r'^next/$', views.inherit),
url(r'^base_user/', views.base_user),
url(r'^user1/', views.user1),
url(r'^user2/', views.user2),


-- 頁面展示情況

 # 看附件!


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章