Django模板語言進階
阿新 • • 發佈：2018-11-02
一、母板 1、什麼情況下使用母版 當多個頁面的大部分內容都一樣的時候，我們可以把相同的部分提取出來，放到一個單獨的母版HTML檔案中 然後在母版中定義需要被替換的block 例如：母板頁面 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>母板HTML</title> {% block page-css %} {% endblock %} </head> <body> <h1>母板內容</h1> {% block page-main %} {% endblock %} <h1>JS</h1> {% block page-js %} {% endblock %}</body> </html> 2、在子頁面繼承母板(相當於把母板所有程式碼複製過來) {% extends '母板名.html' %} 3、塊(block) 通過在母板中使用{% block xxx %}來定義"塊"。 在子頁面中通過定義母板中的block名來對應替換母板中相應的內容 注意：在母板中block只是定義，裡面並沒有內容的，子頁面才填充內容 {% block page-main %} <p>子頁面的內容</p> {% endblock %} {% block page-js %} <p>子頁面的js</p> <script src="/static/js/myjs.js"></script> {% endblock %} {% block page-css %} <p>子頁面的css</p> <link rel="stylesheet" href="/static/css/mycss.css"> {% endblock %} 二、元件 1.、什麼時候用元件？ 頁面上相對獨立的某個部分可以單獨拿出來放到一個單獨的html檔案中 2.、如何使用 1. {% inclue '元件.html' %} 三、靜態檔案相關 1. 為什麼要使用 把靜態檔案的路徑改成動態拼接的，避免在HTML頁面中硬編碼靜態檔案的匯入路徑 2. 如何使用 先匯入static模組：{% load static %} 兩種使用方法： 1. <link rel="stylesheet" href="{% static 'bootstrap-3.3.7/css/bootstrap.css' %}"> 2. <link rel="stylesheet" href="{% get_static_prefix %}font-awesome-4.7.0/css/font-awesome.css"> 3、自定義simple_tag 和自定義filter類似，只不過接收更靈活的引數。 1. 自定義simple_tag的步驟 1. 在app下面新建一個python package名字叫templatetags 2. 在上一步的python package中新建一個py檔案(my_extends.py) 3. 在py檔案中寫一個函式，實現自定義的simple_tag功能 4. 告訴Django我現在多了一個自定義的tag 5.例子 from django import template from django.conf import settings # 生成一個註冊物件 register = template.Library() # 自定義一個拼接靜態檔案路徑的tag函式 @register.simple_tag(name='myst') def my_static(s): # 拿到settings.py中的STATIC_URL的值 s1 = settings.STATIC_URL # 進行字串拼接 ret = s1 + s # 返回 return ret 2. 使用自定義的tag 1. 在HTML檔案中匯入剛才建立的py檔案 {% load my_extends %} 2. 重啟Django專案 3. 按照普通的tag呼叫自定義的函式 <link rel="stylesheet" href="{% myst 'index/index.css' %}"> 4、自定義inclusion_tag 多用於返回html程式碼片段 跟上面自定義的步驟一樣，只是程式碼有點不同 inclusion_tag相當於定義了一個區域性的HTML，然後別的頁面可以引用這段HTML程式碼 例如： my_extends.py @register.inclusion_tag(filename='p.html', name='pp') def my_p(num): data = [i for i in range(1, num+1)] return {'data': data} p.html {% for i in data %} <span>{{ i }}</span> {% endfor %} test.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-type" charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>test</title> </head> <body> {% load my_extend %} {% pp 10 %} </body> </html> 解釋： filename是inclusion_tag指定的頁面，接收inclusion_tag函式返回值，name是呼叫時的tags名， 呼叫的引數是從my_p接收，返回的內容是filename指定的頁面的內容。 也就是說，上面的程式碼，最終展示的頁面是test.html， {% load my_extend %} {% pp 10 %} 上面兩句話是匯入了my_extend自定義的tags pp是tags的具體一個方法，10是引數，pp會把10這個引數傳給p.html， 最後在test,html頁面顯示p.html的那部分程式碼，相當於把p.html的程式碼嵌入到了test,html裡面展示出來