一、模板語言介紹
模板語言渲染的整個過程其實就是將html轉換成函數，並為該函數提供全局變量，然后執行該函數
二、模板語言的語法
模板中也有自己的語言，該語言可以實現數據展示
# 業務請求處理做的頁面渲染
return render("request", "template.html", {"k1": "v1", "k2": [11, 22, 33], "k3": {"nid": 12, "name": "aaa"})
# html頁面模板語法
{{ k1 }}
{{ k2.0 }} # 取列表中的第一個值，通過.獲取
{{ k3.name }} # 取字典中對應key的值
# for循環
{% for item in k2 %}
<p>
{{ item }},
{{ forloop.counter }}, # 索引,從1開始,類似於python中的enumerate，
{{ forloop.counter0 }}, # 索引,從0開始,類似於python中的enumerate，
{{ forloop.first }}, # 判斷當前item是否是第一個元素,成立為True,不成立為False
{{ forloop.last }}, # 判斷當前item是否是最后一個元素,成立為True,不成立為False
{{ forloop.revcounter }} # 倒序索引,與forloop.counter 相反
</p>
{% endfor %}
# if條件判斷
{% if k1 == "v1" %}
<h1>V1</h1>
{% elif k2 == "v2" %}
<h1>V2</h1>
{% else %}
<h1>666</h1>
{% endif %}
三、 內置方法，類似於python的內置函數
{{ k1|lower }} # 將所有字母都變為小寫
{{ k1|first|upper }} # 將首字母變為大寫
{{ k1|truncatewords:"30" }} # 取變量k1的前30個字符
{{ item.createTime|date:"Y-m-d H:i:s" }} # 將時間轉為對應格式顯示
四、自定義方法
在內置的方法滿足不了我們的需求的時候，就需要自己定義屬於自己的方法了，自定義方法分別分為filter和simple_tag
1、區別：
```
① 傳參：
filter默認最多只支持2個參數：可以用{{ k1|f1:"s1, s2, s3" }}這種形式將參數傳遞個函數，由函數去split拆分
simple_tag支持多個參數：{% f1 s1 s2 s3 s4 %} 有多少就寫多少
② 模板語言if條件：
filter：
{% if k1|f1 %} # 函數的結果作為if語句的條件
<h1>True</h1>
{% else %}
<h1>False</h1>
simple_tag: 不支持模板語言if條件
```
2、自定義方法使用流程：
- a、在app中創建templatetags目錄,目錄名必須為templatetags
- b、在目錄templatetags中創建一個.py文件，例如 s1.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-
# Author:zhangcong
# Email:zc_92@sina.com
from django import template
register = template.Library() # 這一句必須這樣寫
@register.filter
def f1(value):
return value + "666"
@register.filter
def f2(value, arg):
return value + "666" + arg
@register.simple_tag
def f3(value, s1, s2, s3, s4):
return value + "666" + s1 + s2 + s3 + s4
- c、html模板頂部通過{% load s1 %}導入py文件
{% load s1 %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>{{ title }}</h1>
{# 使用filter方式調用自定義方法 #}
<!-- 將k1當做參數傳遞給f1函數進行處理 處理方式 f1(k1) -->
<p>{{ k1|f1 }}</p>
<!-- 將k1當做參數傳遞給f2函數進行處理,接受2個參數 處理方式 f2(k1, "xxx") -->
<p>{{ k1|f2:"xxx" }}</p>
{# 使用simple_tag方式調用自定義方法 #}
<!-- 將k1當做參數傳遞給f3函數進行處理,接收多個參數 處理方式 f3(k1, "s1", "s2", "s3", "s4") -->
<p>{% f3 k1 "s1" "s2" "s3" "s4" %}</p>
</body>
</html>
五、母版
在一個網站中，一些頁面中的頂部，左側，底部都是一樣的，這個時候就出現了代碼的冗余，這個時候就可以將這些重復使用的代碼做成母版，方便在子頁面中進行調用，下面是使用母版的一個例子中用到的一些文件，以及使用母版的效果圖
1、路由文件 urls.py
from django.conf.urls import url, include
from cmdb import views
urlpatterns = [
url(r'^userinfo/', views.userinfo), # 用戶管理
url(r'^assets/', views.assets), # 資產管理
]
2、業務請求處理文件 views.py
from django.shortcuts import render
from django.shortcuts import HttpResponse
def userinfo(request):
# 用戶信息
userinfo_list = []
for i in range(10):
userinfo_list.append({"name": "name%s" % i, "email": "email%s@xxx.com"})
return render(request, "userinfo.html", {"userinfo_list": userinfo_list})
def assets(request):
# 資產信息
assets_list = []
for i in range(10):
assets_list.append({"hostname": "host%s" % i, "port": 80})
return render(request, "assets.html", {"assets_list": assets_list})
3、母版html文件 extend.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 48px;
background-color: cadetblue;
}
.pg-body{
min-height: 500px;
}
.pg-body .body-menu{
width: 20%;
float: left;
}
.pg-body .body-content{
width: 80%;
float: left;
}
.pg-footer{
height: 100px;
background-color: brown;
}
</style>
{% block css %}{% endblock %} <!-- 使用blok來空出子頁面需要填充的css樣式內容 -->
</head>
<body>
<div class="pg-header"></div>
<div class="pg-body">
<div class="body-menu">
<ul>
<li><a href="/userinfo/">用戶管理</a></li>
<li><a href="/assets/">資產管理</a></li>
</ul>
</div>
<div class="body-content">
{% block body-content %}{% endblock %} <!-- 使用blok來空出子頁面需要填充的內容 -->
</div>
</div>
<div class="pg-footer"></div>
{% block js %}{% endblock %} <!-- 使用blok來空出子頁面需要填充的js內容 -->
</body>
</html>
4、用戶管理html文件 userinfo.html
{% extends 'extend.html' %} # 繼承母版內容
<!-- 填充頁面css樣式內容 -->
{% block css %}
<!-- css樣式 -->
{% endblock %}
<!-- 填充頁面內容 -->
{% block body-content %}
<table>
<thead>
<tr>
<td>用戶名</td>
<td>郵箱</td>
</tr>
</thead>
<tbody>
{% for item in userinfo_list %}
<tr>
<td>{{ item.name }}</td>
<td>{{ item.email }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
<!-- 填充頁面js代碼內容 -->
{% block js %}
<!-- js代碼 -->
{% endblock %}
5、資產管理html文件 assets.html
{% extends 'extend.html' %} # 繼承母版內容
<!-- 填充頁面css樣式內容 -->
{% block css %}
<!-- css樣式 -->
{% endblock %}
<!-- 填充頁面內容 -->
{% block body-content %}
<table>
<thead>
<tr>
<td>主機名</td>
<td>端口</td>
</tr>
</thead>
<tbody>
{% for item in assets_list %}
<tr>
<td>{{ item.hostname }}</td>
<td>{{ item.port }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
<!-- 填充頁面js代碼內容 -->
{% block js %}
<!-- js代碼 -->
{% endblock %}
