Djiango模板導入

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傳入具體實參便可。

  • 自定義inclusion_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塊的順序隨意 -->
相關文章
相關標籤/搜索