Django模板語言的複用

時間 2019-11-24

標籤 django 模板語言欄目 Python 简体版

原文原文鏈接

一.include標籤

因爲在項目中，每每會出現多個頁面擁有一個或幾個相同的頁面版塊，或是一個頁面多個頁面版塊是相同的，基於這個問題，咱們能夠採用模板語言複用include標籤來幫咱們解決，這樣就避免了大量的複製粘貼html頁面版塊代碼。css

如何運用：能夠將多個樣式標籤的集合進行封裝，對外提供版塊的名字（接口），在有該版塊的頁面中中直接導入便可。html

語法：{% include '版塊頁面的路徑' %}

公共的頁面版塊：django

<!-- templates/public.html -->
<!-- 該頁面位公共的頁面代碼塊，因此不須要完整的html頁面結構 -->
<div class="public">
    <!-- 公用頁面板塊的詳細html代碼 -->
</div>

公共的頁面版塊的樣式：app

/* static/css/public.css */
/* 該樣式文件是爲公告頁面代碼塊提供頁面佈局的css樣式 */
.public {
    /* 具體的css樣式塊 */
}

使用公共版塊的頁面：ide

<!-- 擁有公共頁面板塊的 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>

View Code

二.inclusion_tag自定義標籤

出現的問題：多個頁面有一個類似的頁面版塊，不是徹底相同的版塊，版塊內的細節不是徹底一致的。函數

解決：能夠採用模板語言複用，自定義inclusion_tag標籤來幫助咱們解決這個問題，爲了減小代碼的冗餘。佈局

運用：spa

1.先封裝類似的頁面標籤結果，爲數據不一樣並且頁面標籤個數不一樣的地方採用Django模板語言寫活（數據決定了最終標籤個數）。code

2.自定義inclusion_tag,將封裝的頁面文件都給inclusion_tag裝飾器，自定義的函數的參數爲不一樣的數據，函數的返回值就是用關鍵詞形式將參數傳回。htm

3.在擁有該類似版塊的頁面中導入自定義tag，並使用tag傳入具體實參便可。

自定義inclusion_tag:

app/templatetags/my_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>

View Code

三.母版

出現的問題：多個頁面的多個版塊相同或類似，只有少部分版塊是本身獨有的，將共有的部分所有提出封裝，包含了頁面大部分版塊結構，因此咱們稱之爲母版。

解決：

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>

繼承母版的login頁面：

{% extends 'base.html' %}

{% block style %}
<link rel="stylesheet" href="/static/css/login.css">
{% endblock %}

{% block own %}
<div class="login">登陸頁面獨有的登陸板塊</div>
{% endblock %}