快捷導(dǎo)航

Django框架模板語(yǔ)言實(shí)例小結(jié)【變量，標(biāo)簽，過(guò)濾器，繼承，html轉(zhuǎn)義】

更新時(shí)間：2019年05月23日 11:30:46 作者：SpecYue

這篇文章主要介紹了Django框架模板語(yǔ)言,結(jié)合實(shí)例形式總結(jié)分析了Django框架中變量，標(biāo)簽，過(guò)濾器，繼承，html轉(zhuǎn)義等相關(guān)模板語(yǔ)言操作技巧,需要的朋友可以參考下

本文實(shí)例講述了Django框架模板語(yǔ)言。分享給大家供大家參考，具體如下：

模板語(yǔ)言

模板語(yǔ)言簡(jiǎn)稱為DTL（Django Template Language）

模板變量

模板變量名由數(shù)字，字母，下劃線和點(diǎn)組成，不能以下劃線開(kāi)頭。
使用：{{模板變量名}}

def index2(request):
  '''模板加載順序'''
  return render(request, 'booktest/index2.html')
# /temp_var
def temp_var(request):
  '''模板變量'''
  my_dict = {'title': '字典鍵值'}
  my_list = [1, 2, 3]
  book = BookInfo.objects.get(id=1)
  #定義模板上下文
  context={'my_dict':my_dict,'my_list':my_list,'book':book}
  return render(request,'booktest/temp_var.html',context)

模板變量可以是字典，列表或者對(duì)象。定義好模板上下文之后，用render()函數(shù)傳遞給html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>模板變量</title>
</head>
<body>
使用字典屬性：{{ my_dict.title }}
使用列表元素：{{ my_list.1 }}
使用對(duì)象屬性：{{ book.btitle }}
</body>
</html>

可以看到模板變量都是通過(guò) . 調(diào)用的。

模板標(biāo)簽

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>模板標(biāo)簽</title>
  <style>
    .red{
      background-color: red;
    }
    .yellow{
      background-color: yellow;
    }
    .green{
      background-color: green;
    }
  </style>
</head>
<body>
<ul>
  {% for book in books %}
    {% if book.id <= 2 %}
    <li class="red">{{ forloop.counter }}--{{ book.btitle }}</li>
    {% elif book.id >= 5 %}
      <li class="yellow">{{ forloop.counter }}--{{ book.btitle }}</li>
    {% else %}
      <li class="green">{{ forloop.counter }}--{{ book.btitle }}</li>
    {% endif %}
  {% endfor %}
</ul>
</body>
</html>

具體的其他的模板標(biāo)簽可以參考Django官方文檔。

過(guò)濾器

過(guò)濾器用于對(duì)模板變量進(jìn)行操作

date：改變?nèi)掌诘娘@示格式
length：求長(zhǎng)度，字符串，列表，元祖，字典
default：設(shè)置模板變量的默認(rèn)值

格式：模板變量 | 過(guò)濾器：參數(shù)

date過(guò)濾器

<li class="red">{{ book.btitle }}--{book.bpub_date | date:'Y年-m月-d日'}</li>

default過(guò)濾器 {{dd | default:'無(wú)'}}

模板注釋

單行注釋：{# 注釋 #}

多行注釋：{% comment %}

模板繼承

不同頁(yè)面可能有相同的模塊，這時(shí)候可以使用模板繼承減少代碼量

base.html內(nèi)容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父模板</title>
</head>
<body>
<h1>導(dǎo)航條</h1>
{% block b1 %}
  <h1>這是父模板b1塊中的內(nèi)容</h1>
{% endblock b1 %}
<h1>版權(quán)信息</h1>
</body>
</html>

child.html內(nèi)容

{% extends 'booktest/base.html' %}
{% block b1 %}
  {{ block.super }}
  <h1>這是子模板b1的內(nèi)容</h1>
{% endblock b1 %}

在父模板中{% block b1 %} <h1>這是父模板b1塊中的內(nèi)容</h1> {% endblock b1 %}
定義一個(gè)預(yù)留快，預(yù)留塊中可以有內(nèi)容。子模板繼承時(shí)，{% extends 'booktest/base.html' %}導(dǎo)入，{% block b1 %} {{ block.super }} <h1>這是子模板b1的內(nèi)容</h1> {% endblock b1 %}寫(xiě)預(yù)留塊，{{ block.super }}繼承預(yù)留快的內(nèi)容。

html轉(zhuǎn)義

通過(guò)render()函數(shù)傳遞過(guò)來(lái)的模板上下文默認(rèn)是轉(zhuǎn)義的，也就是說(shuō)我們想傳遞html語(yǔ)言的時(shí)候，實(shí)際上傳遞過(guò)來(lái)的是字符串，這個(gè)時(shí)候我們可以通過(guò)過(guò)濾器關(guān)閉轉(zhuǎn)義