1、include標籤 -- 模板導入css
使用前提:多個頁面有一個相同的頁面版塊時(多個有樣式標籤的集合體)html
如何運用:能夠將多個樣式標籤的集合進行封裝,對外提供板塊的名字(接口),在有該板塊的頁面中直接導入便可django
語法:{% include '板塊頁面的路徑' %}app
公共的頁面板塊函數
<!-- templates/public.html --> <!-- 該頁面位公共的頁面代碼塊,因此不須要完整的html頁面結構 --> <div class="public"> <!-- 公用頁面板塊的詳細html代碼 --> </div>
公告頁面板塊的樣式佈局
/* static/css/public.css */
/* 該樣式文件是爲公告頁面代碼塊提供頁面佈局的css樣式 */
.public {
/* 具體的css樣式塊 */
}
使用公告板塊的頁面們spa
<!-- 擁有公共頁面板塊的 templates/first.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>first</title> <link rel="stylesheet" href="/static/css/public.css"> </head> <body> <!-- 該頁面的其餘html代碼塊 --> <!-- 加載相同的頁面板塊 --> {% include 'public.html' %} <!-- 該頁面的其餘html代碼塊 --> </body> </html> <!-- 擁有公共頁面板塊的 templates/second.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>second</title> <link rel="stylesheet" href="/static/css/public.css"> </head> <body> <!-- 該頁面的其餘html代碼塊 --> <!-- 加載相同的頁面板塊 --> {% include 'public.html' %} <!-- 該頁面的其餘html代碼塊 --> </body> </html>
2、inclusion_tag自定義標籤code
使用前提:與include標籤出現的頁面需求很相似,可是這些不是徹底相同的板塊,由於板塊內的細節不是徹底一致htm
如何使用:blog
1. 先封裝類似的頁面標籤結果,爲數據不一樣而頁面標籤個數不一樣的地方採用Django模板語言寫活(數據決定了最終標籤個數);
2. 自定義inclusion_tag,將封裝的頁面文件都給inclusion_tag裝飾器,自定義的函數的參數爲不一樣的數據,函數的返回值就是用關鍵詞形式將參數返回;
3. 在擁有該類似板塊的頁面中導入自定義tag,並使用自定義tag傳入具體實參便可。
# app/templatetags/owen_tags.py from django.template import Library register = Library() @register.inclusion_tag('public_tag.html') def header_list(list): return {'list': list}
公共相似的頁面板塊
<!-- templates/public_tag.html --> <!-- 該頁面位公共的頁面代碼塊,因此不須要完整的html頁面結構 --> <ul class="public_tag"> <!-- 公用頁面板塊的詳細html代碼 --> {% for foo in list %} <li>{{ foo }}</li> {% endfor %} </ul> <!-- 注:擁有該公共頁面代碼塊的頁面會爲其提供存放不一樣數據的 list變量 -->
使用公告板塊的頁面們
<!-- 擁有公共頁面板塊的 templates/first_tag.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>first_tag</title> </head> <body> <!-- 該頁面的其餘html代碼塊 --> <!-- 加載共同相似的頁面板塊 --> {% load owen_tags %} {% with [1, 2, 3, 4, 5] as list %} {% header_list list %} {% endwith %} <!-- 該頁面的其餘html代碼塊 --> </body> </html> <!-- 擁有公共頁面板塊的 templates/second_tag.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>second_tag</title> </head> <body> <!-- 該頁面的其餘html代碼塊 --> <!-- 加載共同相似的頁面板塊 --> {% load owen_tags %} {% with [10, 30, 50] as list %} {% header_list list %} {% endwith %} <!-- 該頁面的其餘html代碼塊 --> </body> </html>
3、母版
前提:多個頁面的多個板塊相同或類似,只有少部分板塊是本身獨有的,將共有的部分所有提出封裝,包含了頁面大部分版塊結構,因此咱們稱呼其爲 母版。
如何運用:
1. 先封裝母版:大部分版塊相同或類似的base.html,在特色的位置留出響應的block接口;
2. 每一個須要運用母版頁面的頁面來繼承母版 {% extends '母版頁面的路徑' %};
3. 在本身頁面中的任意位置書寫block中自身獨有的頁面內容 {{% block block名 %} ... {% endblock %}};
4. 若是須要繼承母版block中原有的內容,使用 {{ block.super }} 來獲取。
公共的母版頁面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>{{ title }}</title> <link rel="stylesheet" href="/static/css/base.css"> {% block style %} {# 爲繼承該母版的頁面引入自身樣式文件經過的block #} {% endblock %} </head> <body> <!-- 母版有有大量的共同板塊 --> <!-- 母版有有大量的共同板塊 --> <!-- 母版有有大量的共同板塊 --> {% block own %} {# 爲繼承該母版的頁面提供書寫本身頁面獨有內容的block #} {% endblock %} <!-- 母版有有大量的共同板塊 --> <!-- 母版有有大量的共同板塊 --> </body> </html>
頁面樣式文件均放在static/css中,每一個html文件按需導入本身的css文件
/* static/css/base.css */
/* static/css/login.css */
/* static/css/register.css */
繼承母版的login頁面
{% extends 'base.html' %} {% block style %} <link rel="stylesheet" href="/static/css/login.css"> {% endblock %} {% block own %} <div class="login">登陸頁面獨有的登陸板塊</div> {% endblock %}
繼承母版的register頁面
{% extends 'base.html' %} {% block own %} <div class="register">註冊頁面獨有的註冊板塊</div> {% endblock %} {% block style %} <link rel="stylesheet" href="/static/css/register.css"> {% endblock %} <!-- 繼承母版的頁面經過替換母版留出的block塊,來實現本身頁面獨有的板塊 --> <!-- 替換block塊的順序隨意 -->