常用语法
符号
{{...}} # 变量相关
{%...%} # 逻辑相关
{#...#} # 注释
使用变量
1 def test(request): 2 name = '张三' 3 age = 19 4 return render(request,'test.html',{'name':name,'age':19})
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模板测试</title> 6 </head> 7 <body> 8 name:{{ name }} age:{{ age }} 9 </body> 10 </html>
for循环
1 def test(request): 2 name_list = ['张三', '李四', '王五'] 3 return render(request, 'test.html', {'list': name_list})
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模板测试</title> 6 </head> 7 <body> 8 {{ list }} 9 <hr> 10 {% for name in list %} 11 {{ name }} 12 {% endfor %} 13 </body> 14 </html>
使用字典
1 def test(request): 2 name_dict = {'firstname': 'zhang', 'lastname': 'san'} 3 return render(request, 'test.html', {'dict': name_dict})
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模板测试</title> 6 </head> 7 <body> 8 {{ dict.firstname }} 9 {{ dict.lastname }} 10 </body> 11 </html>
使用对象
1 class Person: 2 def __init__(self,firstname,lastname): 3 self.firstname = firstname 4 self.lastname = lastname 5 6 def show(self): 7 return 'my firstname is {},last name is {}'.format(self.firstname,self.lastname) 8 9 def __str__(self): 10 return 'person obj name is {} {}'.format(self.firstname,self.lastname) 11 12 def test(request): 13 p = Person('zhang','san') 14 return render(request, 'test.html', {'person': p})
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模板测试</title> 6 </head> 7 <body> 8 {{ person.firstname }} 9 {{ person.lastname }} 10 <hr> 11 {{ person.show }} 12 <hr> 13 {{ person }} 14 </body> 15 </html>
Filters
语法: {{value|filter_name:params}}
default
当所修饰的变量为空时使用所指定的默认值
1 def test(request): 2 v1= None 3 v2 = '有值' 4 return render(request, 'test.html', {'v1': v1,'v2':v2})
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模板测试</title> 6 </head> 7 <body> 8 {{ v1|default:'空值' }} 9 <hr> 10 {{ v2|default:'空值' }} 11 </body> 12 </html>
filesizeformat
文件大小格式化
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模板测试</title> 6 </head> 7 <body> 8 {{ 123456789|filesizeformat }} 9 </body> 10 </html>
slice
切片
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模板测试</title> 6 </head> 7 <body> 8 {{ 'abcdefghijklmn'|slice:'::2'}} 9 </body> 10 </html>
date
时间格式化
1 def test1(request): 2 from datetime import datetime 3 now = datetime.now() 4 return render(request, 'test.html', {'now': now})
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模板测试</title> 6 </head> 7 <body> 8 {{ now }} 9 <hr> 10 {{ now|date:'Y-m-d H:i:s'}} 11 </body> 12 </html>
safe
不转义输出
1 def test(request): 2 a_tag = '<a href="http://www.baidu.com">超链接<a>' 3 return render(request, 'test.html', {'a_tag': a_tag})
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模板测试</title> 6 </head> 7 <body> 8 {{ a_tag }} 9 <hr> 10 {{ a_tag|safe }} 11 </body> 12 </html>
truncatechars
显示指定长度字符,多余部分用'...'代替
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模板测试</title> 6 </head> 7 <body> 8 {{ 'abcdefghijklmnopqrstuvwxyz'|truncatechars:10 }} 9 </body> 10 </html>
自定义filter
1 from django import template 2 3 register = template.Library() 4 5 6 @register.filter(name='append') 7 def add_sb(self, param1): 8 return '{}{}'.format(self, param1)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模板测试</title> 6 </head> 7 <body> 8 {% load myfilter %} 9 {{ '张三'| sb }} 10 </body> 11 </html>
Tags
自定义simpletag
1 from django import template 2 3 register = template.Library() 4 5 6 @register.simple_tag(name='add_str3') 7 def my_sum(str1, str2, str3): 8 return '{}{}{}'.format(str1, str2, str3)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 </head> 7 <body> 8 {% load mytag %} 9 10 {% add_str3 'a' 'b' 'c' %} 11 </body> 12 </html>
inclusion_tag
1 from django import template 2 3 register = template.Library() 4 5 6 @register.inclusion_tag('show_info_page.html') 7 def show_info(index): 8 list = [('张三', '男'), ('李四', '女')] 9 return {'person': list[index]}
1 <h3>我的名字叫{{ person.0 }}</h3> 2 <p>性别{{ person.1 }}</p>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 </head> 7 <body> 8 {% load mytag %} 9 {% show_info 1 %} 10 <hr> 11 {% show_info 0 %} 12 </body> 13 </html>
母版页
block
在母版页中定义一个块让子页面使用
{% block [block name] %}
{% endblock %}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 这是母版页的内容 9 <hr> 10 {# 定义一个block块让子页面替换 #} 11 {% block page-main %} 12 13 {% endblock %} 14 </body> 15 </html>
extends
继承母版页
{% extends '[母版页地址]' %}
{% block [block name] %}
{% endblock %}
1 {% extends 'base.html' %} 2 {%block page-main %} 3 这里是子页面的内容 4 {%endblock %}
扩展
forloop的属性
| Variable | Description |
|---|---|
forloop.counter |
当前循环的索引值（从1开始） |
forloop.counter0 |
当前循环的索引值（从0开始） |
forloop.revcounter |
当前循环的倒序索引值（从1开始） |
forloop.revcounter0 |
当前循环的倒序索引值（从0开始） |
forloop.first |
当前循环是不是第一次循环（布尔值） |
forloop.last |
当前循环是不是最后一次循环（布尔值） |
forloop.parentloop |
本层循环的外层循环 |
for...empty
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模板测试</title> 6 </head> 7 <body> 8 {% for i in list %} 9 有值则遍历 10 {% empty %} 11 空空如也 12 {% endfor %} 13 </body> 14 </html>
with
定义一个中间变量
1 {% with total=list.count %} 2 {{ total }} 3 {% endwith %}
include
引入指定页
{% include '[页面地址]' %}
<p>in subpage.html</p>
1 {% include 'subpage.html' %} 2 <hr> 3 in test.html
static&get_static_prefix
动态获取静态文件夹别名来拼接静态文件的url
配置如下
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static1"),
os.path.join(BASE_DIR, "static2"),
]
要访问项目根目录下文件夹static1里的jquery.min.js文件,原来的写法是:
<script src='/static/jquery.min.js'></script>
使用static的写法是:
<script src="{% static 'jquery.min.js'%}"></script>
使用get_static_prefix的写法是:
<script src='{% get_static_prefix %}jquery.min.js'></script>
也可给路径起一个别名:
<script src="{% static 'jquery.min.js' as jquery_path %}"></script> <!-- 之后就可以通过别名引入 --> <script src="{{ jquery_path }}"></script>