Django模版引擎中最強大也是最復雜的部分就是模版繼承了。模版繼承可以讓您創建一個基本的“骨架”模版,它包含您站點中的全部元素,並且可以定義能夠被子模版覆蓋的 block。
模板繼承:
1. 新建muban.html模板文件,在形影需要替換的不同位置加上不同名稱的block標簽
{% block content %}
模板內容
{% endblock %}或者{% endblock content %}
2. 在新的html文件開頭寫:
{% extends "muban.html" %}
3. 接下來重寫模板中的block標簽內容:
注意:每個block標簽不能同名,可以有多個(一般css/js/內容都可以有)
{% block content %}
……
{% endblock %}或者{% endblock content %}
4. 要想繼承保留模板block中的內容,在重寫時加上
{{ block.super }}
模板繼承演示:
muban.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <style> 6 * {margin: 0; padding: 0; } 7 .c1, .nav {margin: 0 auto; width: 1200px; background-color: #d6d6d6; color: white; } 8 .fixed:after {content: "";display: block; clear: both; } 9 .navleft {float: left; } 10 .navright {float: right; } 11 ul, li {list-style: none; display: inline; } 12 .contentleft {float: left; width: 300px; background-color: red; height: 100px; } 13 .contentright {float: left; width: 900px; height: 100px; background-color: green; } 14 .c2 {margin: auto auto; text-align: center;vertical-align: middle; } 15 </style> 16 <title>模板繼承測試</title> 17 </head> 18 <body> 19 <div class="c1"> 20 <div class="nav fixed"> 21 <div class="navleft "> 22 <ul> 23 <li>古詩</li> 24 <li>絕句</li> 25 <li>詩經</li> 26 </ul> 27 </div> 28 <div class="navright"> 29 <ul> 30 <li>登錄</li> 31 <li>注冊</li> 32 </ul> 33 </div> 34 </div> 35 36 <div class="content fixed"> 37 <div class="contentleft"> 38 <div class="c2"> 39 <a href="http://127.0.0.1:8888/muban/">簡介</a><br> 40 <a href="http://127.0.0.1:8888/muban_1/">古詩1</a><br> 41 <a href="http://127.0.0.1:8888/muban_2/">古詩2</a></div> 42 </div> 43 <div class="contentright"> 44 <div class="c2"> 45 {% block content %} 46 模板內容---簡介 47 {% endblock %} 48 </div> 49 </div> 50 </div> 51 52 </div> 53 </body> 54 </html>
muban_1.thml
1 {% extends "muban.html" %} 2 {% block content %} 3 <h2>You never fail just when you give up!</h2> 4 {% endblock %}
muban_2.thml
1 {% extends "muban.html" %} 2 {% block content %} 3 {{ block.super }}<!--繼承保留模板對應標簽的內容--> 4 <h2>Do whatever you want and smile veryday!</h2> 5 {% endblock %}
views.py
1 def muban(request): 2 return render(request,"muban.html") 3 def muban_1(request): 4 return render(request,"muban_1.html") 5 def muban_2(request): 6 return render(request,"muban_2.html")
渲染效果