07 django模板層

模板層

主要掌握如下幾個知識點：

　　模板變量 {{var_name}}

　　過濾器 {{obj|filter__name:param}}

　　模板標籤 {% tag %}

　　自定義過濾器和標籤

　　模板繼承

 

05 django模板層\django_template\templates\index.html

  1 <!--！！！模板繼承 重要！！！-->
  2 <!--extends 標籤是這裏的關鍵。它告訴模版引擎，這個模版「繼承」了另外一個模版。當模版系統處理這個模版時，首先，它將定位父模版——在此例中，就是「base.html」。-->
  3 {% extends 'base.html' %}
  4 
  5 <!--繼承後，模版引擎注意到 base.html 中的兩個 block 標籤，並用子模版中的內容來替換這些block。-->
  6 <!--爲了更好的可讀性，你也能夠給你的  endblock  標籤一個名字 。例如加的 title：-->
  7 {% block title %}
  8 <title>index</title>
  9 {% endblock title%}
 10 
 11 
 12 {% block content %}
 13     <!--若是須要把繼承模板的該部份內容帶過來，寫下這句話，不寫則直接覆蓋-->
 14     {{ block.super }}
 15 
 16     <h1>模板&標籤</h1>
 17     <hr>
 18     <h2>模板變量</h2>
 19     <p><strong>int</strong>  {{ digits }}</p>
 20     <p><strong>str</strong>  {{ string }}</p>
 21     <p><strong>lis</strong>  {{ lis }}</p>
 22     <p><strong>lis_items</strong>  {{ lis.0 }}  {{ lis.1 }}</p>
 23     <p><strong>dic</strong>  {{ dic }}</p>
 24     <p><strong>dic_items</strong>  {{ dic.name }}  {{ dic.age }}</p>
 25     <p><strong>jack</strong>  {{ jack }}</p>
 26     <p><strong>jack_items</strong>  {{ jack.name }}</p>
 27     <p><strong>person_lis</strong>  {{ person_lis }}</p>
 28     <p><strong>person_lis_items</strong>  {{ person_lis.1.name }} {{ person_lis.1.age }}</p>
 29 
 30     <hr>
 31     <h2>過濾器</h2>
 32     <!--default  若是一個變量是false或者爲空，使用給定的默認值。不然，使用變量的值-->
 33     <p><strong>default</strong>  {{ lis2|default:'nothing' }}</p>
 34     <!--length 返回值的長度。它對字符串和列表都起做用-->
 35     <p><strong>length</strong>  {{ lis|length }}</p>
 36     <!--filesizeformat  將值格式化爲一個 「人類可讀的」 文件尺寸 （例如 '1 KB', '11.5 MB', '189 bytes'）-->
 37     <p><strong>filesizeformat</strong>  {{ filesize|filesizeformat }}</p>
 38     <!--date 能夠按指定的日期格式  'Y-m-d H:m:s'-->
 39     <p><strong>date</strong>  {{ now|date:'H:m:s' }}</p>
 40     <!--slice 切片  同list切片-->
 41     <p><strong>slice</strong>  {{ lis|slice:'2:' }}</p>
 42     <!--truncatechars 截取字節長度，好比參數6，截取5個字節，剩下的用省略號表示-->
 43     <p><strong>truncatechars</strong>  {{ string|truncatechars:3 }}</p>
 44     <!--truncatewords 截取單詞，好比參數1，截取1個單詞，剩下的用省略號表示-->
 45     <p><strong>truncatewords</strong>  {{ string|truncatewords:1 }}</p>
 46     <!--safe 信任返回的數據，對特定的html或者js等的語句不轉義-->
 47     <p><strong>沒有safe</strong>  {{ ops }}</p>
 48     <!--<p><strong>有safe</strong>  {{ ops|safe }}</p>-->
 49 
 50     <hr>
 51     <h2>模板標籤</h2>
 52     <h3>for 標籤</h3>
 53     {% for i in person_lis %}
 54     <!--{{forloop.counter}}  計數  從1開始    {{forloop.counter0}} 從0開始-->
 55     <p>{{forloop.counter}}  {{ i.name }}</p>
 56     <p>{{forloop.counter}}  {{ i.age }}</p>
 57     <!--empty 標籤  在for循環無數據的時候執行其邏輯-->
 58     {% empty %}
 59     <p>暫無數據!</p>
 60     <!--結束標籤-->
 61     {% endfor %}
 62     <h3>if 標籤</h3>
 63     {% if n > 18 %}
 64     <p><strong>成年咯</strong></p>
 65     {%  elif n == 18 %}
 66     <p><strong>剛成年</strong></p>
 67     {% else %}
 68     <p><strong>小屁孩</strong></p>
 69     {% endif %}
 70     <h3>with 標籤</h3>
 71     <!--等於命名一個變量，後面引用就好-->
 72     {% with person_lis.1.name as name %}
 73     <p>{{ name }}</p>
 74     <p>{{ name }}</p>
 75     <p>{{ name }}</p>
 76     {% endwith %}
 77     <h3>csrf_token 標籤</h3>
 78     <form action="" method="post">
 79         <!--django有安全機制，post請求會校驗，若是沒有下面的csrf_token標籤，在請求後臺的時候回403 Forbidden -->
 80         <!--這個標籤等因而在請求的index頁面的時候，後臺回有一個 csrf_token 字段，下次post請求的時候會和post參數一塊兒傳過去，後臺校驗token一致纔會接受該post請求-->
 81         {% csrf_token %}
 82         <input type="text" name="user">
 83         <input type="password" name="pwd">
 84         <input type="submit">
 85     </form>
 86 
 87     <hr>
 88     <h2>自定義過濾器和標籤</h2>
 89     步驟：
 90     <p>一、在settings中的INSTALLED_APPS配置當前app，否則django沒法找到自定義的simple_tag.</p>
 91     <p>二、在app中建立templatetags模塊(模塊名只能是templatetags)</p>
 92     <p>三、建立任意 .py 文件，如：my_tags.py</p>
 93     <p>四、在使用自定義simple_tag和filter的html文件中導入以前建立的 my_tags.py</p>
 94     {% load tag_filters %}
 95     <!--   multi_filter 自定義過濾器  最多隻能兩個參數    -->
 96     <p>{{ n|multi_filter:10 }} </p>
 97     <!--   multi_tag 自定義標籤 參數數量沒有限制   -->
 98     <p>{% multi_tag 10 100 %} </p>
 99     <!--注意：filter能夠用在if等語句後，simple_tag不能夠-->
100     {% if n|multi_filter:10 > 100 %}
101         {{ n|multi_filter:10 }}
102     {% endif %}
103 
104     <hr>
105     <h2>模板繼承</h2>
106     <p>若是你在模版中使用模板繼承extends標籤，它必須是模版中的第一個標籤。其餘的任何狀況下，模版繼承都將沒法工做。</p>
107     <p>在base模版中設置越多的 block 標籤越好。請記住，子模版沒必要定義所有父模版中的blocks，因此，你能夠在大多數blocks中填充合理的默認內容，而後，只定義你須要的那一個。多一點鉤子總比少一點好。</p>
108     <p>若是你發現你本身在大量的模版中複製內容，那可能意味着你應該把內容移動到父模版中的一個 block 中。</p>
109     <p>若是不想覆蓋繼承模板的盒子內容，想在其內容上增長內容，用 block.super </p>
110 {% endblock content%}

 

05 django模板層\django_template\templates\advertise.html

 1            <div class="action">
 2                 <div class="panel panel-danger">
 3                     <div class="panel-heading">Panel heading without title</div>
 4                     <div class="panel-body">
 5                         11111
 6                     </div>
 7                 </div>
 8                 <div class="panel panel-warning">
 9                     <div class="panel-heading">Panel heading without title</div>
10                     <div class="panel-body">
11                         22222
12                     </div>
13                 </div>
14                 <div class="panel panel-success">
15                     <div class="panel-heading">Panel heading without title</div>
16                     <div class="panel-body">
17                         3333
18                     </div>
19                 </div>
20             </div>

 

05 django模板層\django_template\templates\base.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     {% block title %}
 6         <title>base——title</title>
 7     {% endblock title %}
 8     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
 9           integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
10     <style type="text/css">
11         *{
12             padding: 0;
13             margin:0;
14         }
15         .header{
16             width:100%;
17             height: 50px;
18             background-color: #369;
19         }
20     </style>
21 </head>
22 <body>
23 
24 <div class="header"></div>
25 
26 <div class="container">
27     <div class="row">
28         <div class="col-md-3">
29             {% include 'advertise.html' %}
30         </div>
31         <div class="col-md-9">
32             {% block content%}
33             <h3>base_content</h3>
34             {% endblock %}
35         </div>
36     </div>
37 </div>
38 
39 </body>
40 </html>

 

05 django模板層\django_template\django_template\urls.py

from django.contrib import admin
from django.urls import path, re_path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    re_path(r'^app01/', include(('app04.urls','app04'))),
]

 

05 django模板層\django_template\app04\urls.py

from django.urls import path, re_path
from app04 import  views

urlpatterns = [
    re_path(r'^index/', views.index),
    re_path(r'^base/', views.base),
]

 

05 django模板層\django_template\app04\views.py

from django.shortcuts import render,HttpResponse
import  datetime


def index(request):
    # 模板變量
    if request.method != 'POST':
        n = 18
        digits = 123
        string = 'hello world!'
        lis = [1,2,3,'a']
        dic = {'name': 'xg','age':18, 'height':180}
        lis2 = []
        filesize = 12345678
        now = datetime.datetime.now()
        ops = "<script type='text/javascript'>alert('js腳本強制彈窗')</script>"
        class Person:
            def __init__(self,name,age):
                self.name = name
                self.age = age
        jack = Person('jack',22)
        rose = Person('rose',25)
        person_lis = [jack,rose]
        # person_lis = []
        # return render(request, 'index.html',{'digits':digits,'string':string,'lis':lis,'dic':dic,'jack':jack,'rose':rose,'person_lis':person_lis})
        # 若是變量太多，字典就很長了，因此這裏能夠寫成locals() 將當前名稱空間的變量都傳給模板。
        return render(request, 'index.html',locals())
    else:
        print(request.POST)
        return HttpResponse('OJBK!')


def base(request):
    return  render(request, 'base.html')

 

05 django模板層\django_template\app04\templatetags\tag_filters.py

from django import template


register = template.Library()


@register.filter
def multi_filter(x,y):
    return x*y


@register.simple_tag
def multi_tag(x,y):
    return x*y