Django--模板層template

一 模版簡介

 

你可能已經注意到咱們在例子視圖中返回文本的方式有點特別。 也就是說,HTML被直接硬編碼在 Python代碼之中。css

 

def current_datetime(request): now = datetime.datetime.now() html = "<html><body>It is now %s.</body></html>" % now return HttpResponse(html)

 

儘管這種技術便於解釋視圖是如何工做的,但直接將HTML硬編碼到你的視圖裏卻並非一個好主意。 讓咱們來看一下爲何:html

 

  • 對頁面設計進行的任何改變都必須對 Python 代碼進行相應的修改。 站點設計的修改每每比底層 Python 代碼的修改要頻繁得多,所以若是能夠在不進行 Python 代碼修改的狀況下變動設計,那將會方便得多。python

 

  • Python 代碼編寫和 HTML 設計是兩項不一樣的工做,大多數專業的網站開發環境都將他們分配給不一樣的人員(甚至不一樣部門)來完成。 設計者和HTML/CSS的編碼人員不該該被要求去編輯Python的代碼來完成他們的工做。git

 

  • 程序員編寫 Python代碼和設計人員製做模板兩項工做同時進行的效率是最高的,遠勝於讓一我的等待另外一我的完成對某個既包含 Python又包含 HTML 的文件的編輯工做。程序員

基於這些緣由,將頁面的設計和Python的代碼分離開會更乾淨簡潔更容易維護。 咱們可使用 Django的 模板系統 (Template System)來實現這種模式,這就是本章要具體討論的問題數據庫

 python的模板:HTML代碼+模板語法django

def current_time(req):
    # ================================原始的視圖函數
    # import datetime
    # now=datetime.datetime.now()
    # html="<html><body>如今時刻:<h1>%s.</h1></body></html>" %now


    # ================================django模板修改的視圖函數
    # from django.template import Template,Context
    # now=datetime.datetime.now()
    # t=Template('<html><body>如今時刻是:<h1>{{current_date}}</h1></body></html>')
    # #t=get_template('current_datetime.html')
    # c=Context({'current_date':str(now)})
    # html=t.render(c)
    #
    # return HttpResponse(html)


    #另外一種寫法(推薦)
    import datetime
    now=datetime.datetime.now()
    return render(req, 'current_datetime.html', {'current_date':str(now)[:19]})

 

 

模版語法重點:bootstrap

  變量:{{ 變量名 }}緩存

    1 深度查詢 用句點符安全

    2 過濾器

  標籤:{{%  % }}

二 模版語法之變量

在 Django 模板中遍歷複雜數據結構的關鍵是句點字符, 語法:{{變量名}}

views.py

def template_test(request):
    name = 'lqz'
    li = ['lqz', 1, '18']
    dic = {'name': 'lqz', 'age': 18}
    ll2 = [
        {'name': 'lqz', 'age': 18},
        {'name': 'lqz2', 'age': 19},
        {'name': 'egon', 'age': 20},
        {'name': 'kevin', 'age': 23}
    ]
    ll3=[]
    class Person:
        def __init__(self, name):
            self.name = name

        def test(self):
            print('test函數')
            return 11

        @classmethod
        def test_classmethod(cls):
            print('類方法')
            return '類方法'

        @staticmethod
        def static_method():
            print('靜態方法')
            return '靜態方法'

    lqz = Person('lqz')
    egon = Person('egon')
    person_list = [lqz, egon]
    bo = True
    te = test()
    import datetime
    now=datetime.datetime.now()
    link1='<a href="https://www.baidu.com">點我<a>'
    from django.utils import safestring
    link=safestring.mark_safe(link1)
    # html特殊符號對照表(http://tool.chinaz.com/Tools/htmlchar.aspx)

    # 這樣傳到前臺不會變成特殊字符,由於django給處理了
    dot='&spades;'


    # return render(request, 'template_index.html', {'name':name,'person_list':person_list})
    return render(request, 'template_index.html', locals())

html

<p>{{ name }}</p>
            <p>{{ li }}</p>
            <p>{{ dic }}</p>
            <p>{{ lqz }}</p>
            <p>{{ person_list }}</p>
            <p>{{ bo }}</p>
            <p>{{ te }}</p>

            <hr>
            <h3>深度查詢句點符</h3>
            <p>{{ li.1 }}</p>
            <p>{{ dic.name }}</p>
            <p>{{ lqz.test }}</p>
            <p>{{ lqz.name }}</p>
            <p>{{ person_list.0 }}</p>
            <p>{{ person_list.1.name }}</p>

            <hr>
            <h3>過濾器</h3>
            {#注意:冒號後面不能加空格#}
            <p>{{ now | date:"Y-m-d H:i:s" }}</p>

            {#若是變量爲空,設置默認值,空數據,None,變量不存在,都適用#}
            <p>{{ name |default:'數據爲空' }}</p>
            {#計算長度,只有一個參數#}
            <p>{{ person_list |length }}</p>
            {#計算文件大小#}
            <p>{{ 1024 |filesizeformat }}</p>

            {#字符串切片,前閉後開,前面取到,後面取不到#}
            <p>{{ 'hello world lqz' |slice:"2:-1" }}</p>
            <p>{{ 'hello world lqz' |slice:"2:5" }}</p>

            {#截斷字符,至少三個起步,由於會有三個省略號(傳負數,1,2,3都是三個省略號)#}
            <p>{{ '劉清政 world lqz' |truncatechars:"4" }}</p>
            {#截斷文字,以空格作區分,這個不算省略號#}
            <p>{{ '劉清政   是      大帥比 謝謝' |truncatewords:"1" }}</p>

            <p>{{ link1 }}</p>
            <p>{{ link1|safe }}</p>
            <p>{{ link }}</p>

            <p>&spades;</p>
            <p>{{ dot }}</p>

            {#add   能夠加負數,傳數字字符串均可以#}
            <p>{{ "10"|add:"-2" }}</p>
            <p>{{ li.1|add:"-2" }}</p>
            <p>{{ li.1|add:2 }}</p>
            <p>{{ li.1|add:"2" }}</p>
            <p>{{ li.1|add:"-2e" }}</p>

            {#upper#}
            <p>{{ name|upper }}</p>
            <p>{{ 'LQZ'|lower }}</p>
            <hr>
            <h3>模版語法之標籤</h3>
            {#for 循環 循環列表,循環字典,循環列表對象#}
            <ui>
                {% for foo in dic %}
                    {{ foo }}
                {% endfor %}
                {#也能夠混用html標籤#}
                {% for foo in li %}
                    <ul>foo</ul>

                {% endfor %}
            </ui>
            {#表格#}
            <table border="1">

                {% for foo in ll2 %}
                    <tr>
                        <td>{{ foo.name }}</td>
                        <td>{{ foo.age }}</td>
                    </tr>
                {% endfor %}
            </table>
            <table border="1">
                {#'parentloop': {}, 'counter0': 0, 'counter': 1, 'revcounter': 4, 'revcounter0': 3, 'first': True, 'last': False}#}
                {% for foo in ll2 %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ foo.name }}</td>
                        <td>{{ foo.age }}</td>
                    </tr>
                {% endfor %}


            </table>



            {% for foo in ll5 %}
                <p>foo.name</p>
            {% empty %}
                <p>空的</p>
            {% endfor %}

            <hr>
            <h3>if判斷</h3>
            {% if name %}
                <a href="">hi {{ name }}</a>
                <a href="">註銷</a>
            {% else %}
                <a href="">請登陸</a>
                <a href="">註冊</a>
            {% endif %}
            {#還有elif#}
            <hr>
            <h3>with</h3>
            {% with ll2.0.name as n %}
                {{ n }}
            {% endwith %}
            {{ n }}


            {% load my_tag_filter %}

            {{ 3|multi_filter:3 }}

            {#傳參必須用空格區分#}
            {% multi_tag 3 9 10 %}

            {#能夠跟if連用#}
            {% if 3|multi_filter:3 > 9 %}
                <p>大於</p>
            {% else %}
                <p>小於</p>
            {% endif %}

注意:句點符也能夠用來引用對象的方法(無參數方法):

<h4>字典:{{ dic.name.upper }}< / h4>

三 模版之過濾器

語法:

{{obj|filter__name:param}}  變量名字|過濾器名稱:變量
default

若是一個變量是false或者爲空,使用給定的默認值。不然,使用變量的值。例如:

{{ value|default:"nothing" }}

 

length 

返回值的長度。它對字符串和列表都起做用。例如:

{{ value|length }}

若是 value 是 ['a', 'b', 'c', 'd'],那麼輸出是 4。

 

filesizeformat

將值格式化爲一個 「人類可讀的」 文件尺寸 (例如 '13 KB''4.1 MB''102 bytes', 等等)。例如:

{{ value|filesizeformat }}

若是 value 是 123456789,輸出將會是 117.7 MB。  

 

date

若是 value=datetime.datetime.now()

{{ value|date:"Y-m-d H:i:s" }} 

slice

若是 value="hello world"

{{ value|slice:"2:-1" }}

 

truncatechars

若是字符串字符多於指定的字符數量,那麼會被截斷。截斷的字符串將以可翻譯的省略號序列(「...」)結尾。

參數:要截斷的字符數

例如:

{{ value|truncatechars:9 }}

 

 

safe

Django的模板中會對HTML標籤和JS等語法標籤進行自動轉義,緣由顯而易見,這樣是爲了安全。可是有的時候咱們可能不但願這些HTML元素被轉義,好比咱們作一個內容管理系統,後臺添加的文章中是通過修飾的,這些修飾多是經過一個相似於FCKeditor編輯加註了HTML修飾符的文本,若是自動轉義的話顯示的就是保護HTML標籤的源文件。爲了在Django中關閉HTML的自動轉義有兩種方式,若是是一個單獨的變量咱們能夠經過過濾器「|safe」的方式告訴Django這段代碼是安全的沒必要轉義。好比:

value="<a href="">點擊</a>"

{{ value|safe}} 


 其它過濾器(瞭解)

過濾器               描述                                示例
upper              以大寫方式輸出                     
           {{ user.name
| upper }}
add 給value加上一個數值
           {{ user.age
| add:」5」 }}
addslashes 單引號加上轉義號 capfirst 第一個字母大寫

           {{ ‘good’
| capfirst }} 返回」Good」
center 輸出指定長度的字符串,把變量居中
           {{ 「abcd」
| center:」50」 }}
cut 刪除指定字符串
           {{ 「You are
not a Englishman」 | cut:」not」 }} date 格式化日期 default 若是值不存在,則使用默認值代替
           {{ value
| default:」(N/A)」 }}
default_if_none 若是值爲None, 則使用默認值代替 dictsort 按某字段排序,變量必須是一個dictionary
           {
% for moment in moments | dictsort:」id」 %}
dictsortreversed 按某字段倒序排序,變量必須是dictionary
divisibleby 判斷是否能夠被數字整除
           {{
224 | divisibleby:2 }} 返回 True
escape 按HTML轉義,好比將」
<」轉換爲」&lt」 filesizeformat 增長數字的可讀性,轉換結果爲13KB,89MB,3Bytes等
           {{
1024 | filesizeformat }} 返回 1.0KB
first 返回列表的第1個元素,變量必須是一個列表
floatformat 轉換爲指定精度的小數,默認保留1位小數
           {{
3.1415926 | floatformat:3 }} 返回 3.142 四捨五入
get_digit 從個位數開始截取指定位置的數字
           {{
123456 | get_digit:’1’}}
join 用指定分隔符鏈接列表
           {{ [‘abc’,’
45’] | join:’*’ }} 返回 abc*45
length 返回列表中元素的個數或字符串長度
length_is 檢查列表,字符串長度是否符合指定的值
            {{ ‘hello’
| length_is:’3’ }}
linebreaks 用
<p>或<br>標籤包裹變量
            {{ 「Hi\n\nDavid」|linebreaks }} 返回<p>Hi</p><p>David</p>
linebreaksbr 用<br/>標籤代替換行符
linenumbers 爲變量中的每一行加上行號
ljust 輸出指定長度的字符串,變量左對齊
           {{‘ab’
|ljust:5}}返回 ‘ab ’
lower 字符串變小寫
make_list 將字符串轉換爲列表
pluralize 根據數字肯定是否輸出英文複數符號
random 返回列表的隨機一項
removetags 刪除字符串中指定的HTML標記
{{value
| removetags: 「h1 h2」}}
rjust 輸出指定長度的字符串,變量右對齊
slice 切片操做, 返回列表
{{[
3,9,1] | slice:’:2’}} 返回 [3,9]
{{
'asdikfjhihgie' | slice:':5' }} 返回 ‘asdik’
slugify 在字符串中留下減號和下劃線,其它符號刪除,空格用減號替換 {{
'5-2=3and5 2=3' | slugify }} 返回 5-23and5-23

stringformat 字符串格式化,語法同python
time 返回日期的時間部分
timesince 以「到如今爲止過了多長時間」顯示時間變量
結果可能爲 45days,
3 hours
timeuntil 以「從如今開始到時間變量」還有多長時間顯示時間變量
title 每一個單詞首字母大寫
truncatewords 將字符串轉換爲省略表達方式 {{
'This is a pen' | truncatewords:2 }}返回 This is ... truncatewords_html 同上,但保留其中的HTML標籤 {{ '<p>This is a pen</p>' | truncatewords:2 }}返回 <p>This is ...</p>

urlencode 將字符串中的特殊字符轉換爲url兼容表達方式
{{ ‘http:
//www.aaa.com/foo?a=b&b=c’ | urlencode}}
urlize 將變量字符串中的url由純文本變爲連接
wordcount 返回變量字符串中的單詞數
yesno 將布爾變量轉換爲字符串yes, no 或maybe {{ True
| yesno }} {{ False | yesno }} {{ None | yesno }} 返回 yes no maybe

 

 

 


四 模版之標籤

 

標籤看起來像是這樣的: {% tag %}。標籤比變量更加複雜:一些在輸出中建立文本,一些經過循環或邏輯來控制流程,一些加載其後的變量將使用到的額外信息到模版中。一些標籤須要開始和結束標籤 (例如{% tag %} ...標籤 內容 ... {% endtag %})。

for標籤

遍歷每個元素:

{% for person in person_list %}
    <p>{{ person.name }}</p> {% endfor %}

能夠利用{% for obj in list reversed %}反向完成循環。

遍歷一個字典:

{% for key,val in dic.items %}
    <p>{{ key }}:{{ val }}</p> {% endfor %}

注:循環序號能夠經過{{forloop}}顯示  

forloop.counter            The current iteration of the loop (1-indexed)
forloop.counter0           The current iteration of the loop (0-indexed) forloop.revcounter The number of iterations from the end of the loop (1-indexed) forloop.revcounter0 The number of iterations from the end of the loop (0-indexed) forloop.first True if this is the first time through the loop forloop.last True if this is the last time through the loop

for ... empty

for 標籤帶有一個可選的{% empty %} 從句,以便在給出的組是空的或者沒有被找到時,能夠有所操做。

{% for person in person_list %}
    <p>{{ person.name }}</p> {% empty %} <p>sorry,no person here</p> {% endfor %}

if 標籤

{% if %}會對一個變量求值,若是它的值是「True」(存在、不爲空、且不是boolean類型的false值),對應的內容塊會輸出。

複製代碼
{% if num > 100 or num < 0 %} <p>無效</p> {% elif num > 80 and num < 100 %} <p>優秀</p> {% else %} <p>湊活吧</p> {% endif %}
複製代碼

with

使用一個簡單地名字緩存一個複雜的變量,當你須要使用一個「昂貴的」方法(好比訪問數據庫)不少次的時候是很是有用的

例如:

{% with total=business.employees.count %}
    {{ total }} employee{{ total|pluralize }}
{% endwith %}

csrf_token

{% csrf_token%}

這個標籤用於跨站請求僞造保護

五 自定義標籤和過濾器

 

一、在settings中的INSTALLED_APPS配置當前app,否則django沒法找到自定義的simple_tag.

二、在app中建立templatetags模塊(模塊名只能是templatetags)

三、建立任意 .py 文件,如:my_tags.py

from  django  import  template
from  django.utils.safestring  import  mark_safe
 
register  =  template.Library()    #register的名字是固定的,不可改變
 
 
@register . filter
def  filter_multi(v1,v2):
     return   v1  *  v2
<br>
@register .simple_tag
def  simple_tag_multi(v1,v2):
     return   v1  *  v2
<br>
@register .simple_tag
def  my_input( id ,arg):
     result  =  "<input type='text' id='%s' class='%s' />"  % ( id ,arg,)
     return  mark_safe(result)

四、在使用自定義simple_tag和filter的html文件中導入以前建立的 my_tags.py  ****

{% load my_tags %}

五、使用simple_tag和filter(如何調用)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - .html
{% load xxx %}  
      
# num=12
{{ num|filter_multi: 2  }}  #24
 
{{ num|filter_multi: "[22,333,4444]"  }}
 
{ %  simple_tag_multi  2  5  % }  參數不限,但不能放在 if  for 語句中
{ %  simple_tag_multi num  5  % }

注意:filter能夠用在if等語句後,simple_tag不能夠

{% if num|filter_multi:30 > 100 %}
    {{ num|filter_multi:30 }}
{% endif %}

 

simple_fileter (不經常使用)
最多兩個參數,能夠作條件判斷

方式 {{第一個參數|函數名稱:"第二個參數"}}


simple_tag

 能夠在函數內部作判斷
參數個數無限制
使用方式 {% 函數名 參數 參數%}

 

 

 

 

六 模版導入入和繼承 (extend)

Django模版引擎中最強大也是最複雜的部分就是模版繼承了。模版繼承可讓您建立一個基本的「骨架」模版,它包含您站點中的所有元素,而且能夠定義可以被子模版覆蓋的 blocks 。

經過從下面這個例子開始,能夠容易的理解模版繼承:

 

模版導入:

  語法:{% include '模版名稱' %}

  如:{% include 'adv.html' %}

 

<div class="adv">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Panel title</h3>
        </div>
        <div class="panel-body">
            Panel content
        </div>
    </div>
    <div class="panel panel-danger">
        <div class="panel-heading">
            <h3 class="panel-title">Panel title</h3>
        </div>
        <div class="panel-body">
            Panel content
        </div>
    </div>
    <div class="panel panel-warning">
        <div class="panel-heading">
            <h3 class="panel-title">Panel title</h3>
        </div>
        <div class="panel-body">
            Panel content
        </div>
    </div>
</div>
adv.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    {#    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">#}
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header {
            height: 50px;
            width: 100%;
            background-color: #369;
        }
    </style>
</head>
<body>
<div class="header"></div>

<div class="container">
    <div class="row">
        <div class="col-md-3">
            {% include 'adv.html' %}


        </div>
        <div class="col-md-9">
            {% block conn %}
                <h1>你好</h1>
            {% endblock %}

        </div>
    </div>

</div>

</body>
</html>
base.html
{% extends 'base.html' %}

{% block conn %}
    {{ block.super }}
是啊

{% endblock conn%}
order.html

模版繼承

Django模版引擎中最強大也是最複雜的部分就是模版繼承了。模版繼承可讓您建立一個基本的「骨架」模版,它包含您站點中的所有元素,而且能夠定義可以被子模版覆蓋的 blocks 。

經過從下面這個例子開始,能夠容易的理解模版繼承:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css"/>
    <title>{% block title %}My amazing site{% endblock %}</title>
</head>

<body>
<div id="sidebar">
    {% block sidebar %}
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/blog/">Blog</a></li>
        </ul>
    {% endblock %}
</div>

<div id="content">
    {% block content %}{% endblock %}
</div>
</body>
</html>

這個模版,咱們把它叫做 base.html, 它定義了一個能夠用於兩列排版頁面的簡單HTML骨架。「子模版」的工做是用它們的內容填充空的blocks。

在這個例子中, block 標籤訂義了三個能夠被子模版內容填充的block。 block 告訴模版引擎: 子模版可能會覆蓋掉模版中的這些位置。

子模版可能看起來是這樣的:

{% extends "base.html" %}
 
{% block title %}My amazing blog{% endblock %}
 
{% block content %}
{% for entry in blog_entries %}
    <h2>{{ entry.title }}</h2>
    <p>{{ entry.body }}</p>
{% endfor %}
{% endblock %}

extends 標籤是這裏的關鍵。它告訴模版引擎,這個模版「繼承」了另外一個模版。當模版系統處理這個模版時,首先,它將定位父模版——在此例中,就是「base.html」。

那時,模版引擎將注意到 base.html 中的三個 block 標籤,並用子模版中的內容來替換這些block。根據 blog_entries 的值,輸出可能看起來是這樣的:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" />
    <title>My amazing blog</title>
</head>
 
<body>
    <div id="sidebar">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/blog/">Blog</a></li>
        </ul>
    </div>
 
    <div id="content">
        <h2>Entry one</h2>
        <p>This is my first entry.</p>
 
        <h2>Entry two</h2>
        <p>This is my second entry.</p>
    </div>
</body>
</html>

請注意,子模版並無定義 sidebar block,因此係統使用了父模版中的值。父模版的 {% block %} 標籤中的內容老是被用做備選內容(fallback)。

這種方式使代碼獲得最大程度的複用,而且使得添加內容到共享的內容區域更加簡單,例如,部分範圍內的導航。

 

這裏是使用繼承的一些提示

 

  • 若是你在模版中使用 {% extends %} 標籤,它必須是模版中的第一個標籤。其餘的任何狀況下,模版繼承都將沒法工做。

  • 在base模版中設置越多的 {% block %} 標籤越好。請記住,子模版沒必要定義所有父模版中的blocks,因此,你能夠在大多數blocks中填充合理的默認內容,而後,只定義你須要的那一個。多一點鉤子總比少一點好。

  • 若是你發現你本身在大量的模版中複製內容,那可能意味着你應該把內容移動到父模版中的一個 {% block %} 中。

  • If you need to get the content of the block from the parent template, the {{ block.super }} variable will do the trick. This is useful if you want to add to the contents of a parent block instead of completely overriding it. Data inserted using {{ block.super }} will not be automatically escaped (see the next section), since it was already escaped, if necessary, in the parent template.

  • 爲了更好的可讀性,你也能夠給你的 {% endblock %} 標籤一個 名字 。例如:

    { %  block content  % }
    ...
    { %  endblock content  % }  

    在大型模版中,這個方法幫你清楚的看到哪個  {% block %} 標籤被關閉了。

  • 不能在一個模版中定義多個相同名字的 block 標籤。

 

導入小組件 -- include 能夠導入多個
  {{ include  "xx.html" }}
  導入的文件內,可使用特殊標記{{ xx }}  模版的渲染
  <div> 小組件 </dev>
 
extends 繼承母板  只能繼承一次
相關文章
相關標籤/搜索