django html 模板繼承(下)加精
阿新 • • 發佈:2018-12-27
在程式設計的過程中,我們經常會重複性的寫了很多的程式碼,比如一個頁面的框架部分,這樣我又多少個頁面就得寫上多少次,這樣既不好維護,也不夠高效,所以我們引出了html的模板繼承部分。
1、寫好一個html檔案。
2、下面有個新的html檔案需要繼承上面這個html。
直接在這個新的html檔案的最頂端,寫上下面的內容
#這個manger.html就是母版的檔名稱,告訴這個html去哪裡繼承。
{% extends 'manger.html' %}
3.問題來了,我們既然是繼承,總不能全部繼承吧,我們肯定是需要寫一些新的內容在新的html檔案中展示,我們只是繼承母版中的一部分,比如head之類的。
比如我們要在html的一個位置更換新的內容。
1、定義一個繼承的塊,叫index。(寫在繼承的檔案裡【子檔案】)
{% block index %}{% endblock %}
2、繼承者在自己的檔案中需要更換新的內容,需要這麼寫。
注意:只需要在繼承的任意位置寫上{% block index %}內容區{% endblock %} (寫在父檔案裡【父檔案】)
{% block index %} <div style="background-color: gainsboro;height: 45px;line-height: 45px;font-size: 15px;font-weight: bolder"> <span>首頁 ></span> <span>資產管理</span> </div> {% endblock %}
4、如果我的html內容特別多,我看著特別亂,這樣我可以把這些內容都寫到一個新的html檔案裡面,然後在我的html檔案中直接引用就OK。
例如:我單獨寫了一個test.html檔案。
我想在html中引用直接寫入地下的東西就OK了。
{% include "test.html" %}
5、寫自己的CSS和JS樣式或操作。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <style> body{ height: 38px; width: 300px; } </style> {% block css %}{% endblock %} <body> <div> </div> <script src="jquery-x.x.x"></script> {% block js %}{% endblock %} </body> </html>
這樣,我們就可以在自己的html檔案中直接寫自己的css樣式或者js操作。
{% block css %} <style> </style> {% endblock %} {% block js %} <script> </script> {% endblock %}