Django模板語言進階

複製代碼
1、母板
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 %}



2、組件
1.、何時用組件?
    頁面上相對獨立的某個部分能夠單獨拿出來放到一個單獨的html文件中
2.、如何使用
    1. {% include '組件.html' %}



3、靜態文件相關
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這個參數傳給my_p,而後my_p再傳給p.html,
最後在test,html頁面顯示p.html的那部分代碼,至關於把p.html的代碼嵌入到了test,html裏面展現出來
複製代碼
相關文章
相關標籤/搜索