Djiango模板導入

時間 2019-11-24

標籤 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塊的順序隨意 -->

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。