目录
1. 模版语法
本质上:在HTML中写一些占位符,由数据对这些占位符进行替换和处理。
1.1 将一个变量传递给HTML文件
在app01/views.py文件的视图函数定义好变量,如下:
def userlist(request):
name = "张飞"
return render(request, "user_list.html", {"n1": name})
定义了一个name变量,值为"张飞",然后在return语句里添加一个 字典,将name变量赋值给 "n1",n1这个名字随便取。
然后在user_list.html文件中,用两个花括号,即:{{}} 将n1包裹起来,即:{{n1}}。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户列表</title>
</head>
<body>
<h1>用户列表</h1>
{{ n1 }}
</body>
</html>
浏览器显示如下:
1.2 将一个列表传递给HTML文件
app01/views.py文件内容如下:
def userlist(request):
name = "张飞"
roles = ["安全管理员", "系统管理员", "审计管理员", "超级管理员"]
return render(request, "user_list.html", {"n1": name, "n2": roles})
html文件里想要取列表里的元素:
可以通过索引来取值:
<div>{{ n2.0 }}</div>
<div>{{ n2.1 }}</div>
也可以通过for循环的方式来遍历取值:
<div>
{% for item in n2: %}
<span>{{ item }}</span>
{% endfor %}
</div>
浏览器显示结果:
1.3 将字典传递给HTML文件
app01/views.py文件,内容如下:
def userlist(request):
name = "张飞"
roles = ["安全管理员", "系统管理员", "审计管理员", "超级管理员"]
user_info = {"name": "Hr", "Salary": 10000, "role": "CEO"}
return render(request, "user_list.html", {"n1": name, "n2": roles, "n3": user_info})
html文件里想要获取字典的值,可以通过键来获取,如下:
<div>
{{ n3.name }}
{{ n3.salary }}
{{ n3.role }}
</div>
也可以通过for循环来获取,如下:
获取键:
<ul>
{% for item in n3.keys %}
<li>
{{ item }}
</li>
{% endfor %}
</ul>
获取值:
<ul>
{% for item in n3.keys %}
<li>
{{ item }}
</li>
{% endfor %}
</ul>
获取键值:
<ul>
{% for k,v in n3.items %}
<li>
{{ k }} = {{ v }}
</li>
{% endfor %}
</ul>
1.4 列表里套字典,传递给HTML文件
app01/views.py文件,内容如下:
def userlist(request):
name = "张飞"
roles = ["安全管理员", "系统管理员", "审计管理员", "超级管理员"]
user_info = {"name": "Hr", "Salary": 10000, "role": "CEO"}
data_list = [
{"name": "刘备", "Salary": 20000, "role": "CEO"},
{"name": "张飞", "Salary": 18000, "role": "CFO"},
{"name": "关羽", "Salary": 15000, "role": "C00"}
]
return render(request, "user_list.html", {"n1": name, "n2": roles, "n3": user_info, "n4": data_list})
HTML文件想要获取data_list里的值,可以通过 . 来获取,如下
{{ n4.0.name }}
{{ n4.0.Salary }}
也可以通过循环,如下:
{% for item in n4 %}
{{ item.name }}
{% endfor %}
如果想要反向遍历,那么在遍历的时候加上一个reversed,示例代码如下:
{% for item in n4 reversed %}
{{ item.name }}
{% endfor %}
在for循环中,DTL提供了一些变量可供使用,这些变量如下:
- forloop.counter:当前循环的下标,以1作为起始值。
- forloop.counter0:当前循环的小标,以0作为起始值。
- forloop.revcounter:当前循环的反向下标值,比如有列表有5个元素,那么第一次遍历这个属性是等于5,第二次是4,以此类推,并且是以1作为最后一个元素的下标。
- forloop.revcounter0:类似于forloop.revcounter,不同的是最后一个元素的下标是1.
- forloop.first:是否第一次遍历。
- forloop.last:是否最后一次遍历。
- forloop.parentloop:如果有多个循环嵌套,那么这个属性代表的是上一级的for循环。
for...in...empty标签
- 这个标签使用跟for...in...是一样的,只不过是在遍历的对象如果没有元素的情况下,会执行empty中的内容,示例代码如下:
{% for person in persons %}
<li>{{ person }}</li>
{% empty %}
暂时还没有任何人
{% endfor %}
1.5 with标签
在模版中定义变量,有时候一个变量访问的时候比较复杂,那么可以先把这个复杂的变量缓存到一个变量上,以后就可以直接使用这个变量就可以了,示例代码如下:
context = {
"persons": ["张三", "李四"]
}
{% with lisi=persons.1 %}
<p>{{ lisi }}</p>
{% endwith %}
有几点需要助益:
- 在with语句中定义的变量,只能在{%with%}{%endwith%}中使用,不能在这个标签外面使用。
- 定义变量的时候,不能在等号左右两边留有空格,比如{% with lisi=persons.1%}是错误的。
- 还有另外一种写法也是支持的:
{% with persons.1 as lisi %}
<p>{{ lisi }}</p>
{% endwith %}
1.6 url标签
在模版中,我们经常要写一些url,比如某个a标签中需要定义href属性,当然如果通过硬编码的方式直接将这个url写死在里面是也是可以的。但是这样对于以后项目维护可能不是一件好事。因此建议使用这种反转的方式来实现,类似于django中的reverse一样。示例代码如下:
<a href="{% url 'book:list' %}">图书列表页面</a>
解释:
book是注册的应用命,list是urls.py里面定义的path的name的属性值。
如果url反转的时候需要传递参数,那么可以在后面传递,但是参数分位置参数和关键字参数。
位置参数和关键字参数不能同时使用。示例代码如下:
# path部分
path('detail/<int:book_id>/', views.book_detail, name='detail')
# url反转,使用位置参数
<a href="{% url 'book:detail' 1 %}">图书详情页面</a>
# url反转,使用关键字参数
<a href="{% url 'book:detail' book_id=1 %}">图书详情页面</a>
如果想要在使用url标签反转的时候传递查询字符串的参数,那么必须要手动在后面添加,示例代码如下:
<a href="{% url 'book:detail' book_id=1 %}?page=1">图书详情页面</a>
如果需要传递多个参数,按么通过空格的方式进行分隔。示例代码如下:
<a href="{% url 'book:detail' book_id=1 page=2 %}">图书详情页面</a>
1.7 条件语句
HTML文件语法也支持if..else..
{% if n1 == "hr" %}
<span>dadada</span>
{% elif n1 == "haha" %}
<span>xixixixi</span>
<span>xixixixi</span>
{% else %}
<span>hahaha</span>
{% endif %}
1.8 模版常用过滤器
过滤器使用的是 | 来使用。比如使用add过滤器,示例代码如下:
{{ value|add:"2" }}
1.8.1 add
将传进来的参数添加到原来的值上面,这个过滤器会尝试将 值 和 参数 转换成整形然后进行相加。如果转换成整形过程中失败了,那么会将值和参数进行凭借,如果是字符串,那么会拼接成字符串,如果是列表,那么会拼接成一个列表,示例代码如下:
{{ value|add:"2" }}
如果value等于4,那么结果将是6。如果value是等于一个普通的字符串,比如abc,那么结果是abc2。add过滤器的源代码如下:
def add(value, arg):
""Add the arg to the value""
try:
return int(value) + int(arg)
except(ValueError, TypeError):
try:
return value + arg
except Exception:
return ''
1.8.2 cut
移除值中所有指定的字符串。类似与python中的replace(args, "")。示例代码如下:
{{ value|cut:" "}}
以上示例将会移除value中所有的空格字符。cut过滤器的源代码如下:
def cut(value, arg):
"""Remove all values of arg from the given string."""
safe = isinstance(value, SafeData)
value = value.replace(arg, '')
if safe and arg != ';':
return mark_safe(value)
return value
1.8.3 date
将一个日期按照指定的格式,格式化成字符串。示例代码如下:
# 数据
context = {
"birthday": datetime.now()
}
# 模版
{{ birthday|date:"Y/m/d" }}
那么将会输出2024/04/09。其中Y代表的是四位数字的年份,m代表的是两位数字的月份,d代表的是两位数字的日。
还有更多格式化的方式,见下表:
格式字符 | 描述 | 示例 |
Y | 四位数字年份 | 2024 |
m | 两位数字的月份 | 01-12 |
n | 月份,1-9前面没有0前缀 | 1-12 |
d | 两位数字的天 | 01-31 |
j | 天,但是1-9前面没有0前缀 | 1-31 |
g | 小时,12小时格式,1-9前面没有0前缀 | 1-12 |
h | 小时,12小时格式,1-9前面有0前缀 | 01-12 |
G | 小时,24小时格式,1-9前面没有0前缀 | 1-23 |
H | 小时,24小时格式,1-9前面有0前缀 | 01-23 |
i | 分钟,1-9前面有0前缀 | 00-59 |
s | 秒,1-9前面有0前缀 | 00-59 |
1.8.4 default
如果值被评估为False,比如[], "", None, {}等这些在if判断中为False的值,都会使用default过滤器提供的默认值。
示例代码如下:
{{ value|default:"nothing"}}
如果value是一个空的字符串,比如"",那么以上代码将会输出noting
1.8.5 default_if_none
如果是值是None,那么将会使用default_if_none提供的默认值,这个和default有区别,default是所有被评估为False的都会使用默认值。而default_if_none则只有这个值等于None的时候才会使用默认值。示例代码如下:
{{ value|default_if_none:"nothing" }}
如果value是"",即空字符串,那么以上会输出空字符串;如果value是一个None值,以上代码才会输出nothing。
1.8.6 first
返回列表/元组/字符串中的第一个元素,示例代码如下:
{{ value|first }}
如果value为['a', 'b', 'c'],那么输出结果为a。
1.8.7 last
返回列表/元组/字符串中的最后一个元素,示例代码如下:
{{ value|last }}
如果value为['a', 'b', 'c'],那么输出结果为c。
1.8.8 floatformat
使用四舍五入的方式格式化一个浮点类型。如果这个过滤器没有传递任何参数,那么只会在小数点后保留一个小数,如果小数后面全是0,那么只会保留整数。当然也可以传递一个参数,标识具体要保留几位小数。
1.没有保留传递参数
value | 模板代码 | 输出 |
34.23234 | {{ value|floatformat }} | 34.2 |
34.000 | {{ value|floatformat }} | 34 |
34.260 | {{ value|floatformat }} | 34.3 |
2.如果传递参数
value | 模板代码 | 输出 |
34.23234 | {{ value|floatformat:3 }} | 34.232 |
34.000 | {{ value|floatformat:3 }} | 34.000 |
34.260 | {{ value|floatformat:3 }} | 34.260 |
1.8.9 join
类似于python的join,将列表/元组/字符串用指定的字符串进行拼接。示例代码如下:
{{ value|join:"/" }}
如果value为['a', 'b', 'c'],输出结果为a/b/c
1.8.10 length
获取一个列表/元组/字符串/字典的长度。示例代码如下:
{{ value|length }}
如果value为['a', 'b', 'c'],输出结果为:3,如果value为None,输出结果为:0。
1.8.11 lower
将值中所有的字符全部转换成小写。示例代码如下:
{{ value|lower }}
如果value为Hello World,输出结果为:hello world。
1.8.12 upper
类似于lower,只不过是将指定的字符串全部转换成大写。
1.8.13 random
在被给的列表/字符串/元组中随机选择一个值。示例代码如下:
{{ value|random }}
如果value为['a', 'b', 'c'],输出结果为列表中随机选择一个。
1.8.14 safe
标记一个字符串是安全的,也会关掉这个字符串的自动转义。示例代码如下:
{{ value|safe }}
如果vale是一个不包含任何特殊字符串的字符串,比如这种。那么以上代码就会把字符串正常的输入。
如果value是一串html代码,那么以上代码将会把这个html代码渲染到浏览器中。
1.8.15 slice
类似于python中的切片操作。示例代码如下:
{{ some_list|slice:"2:" }}
以上代码将会给some_list从2开始做切片操作。
1.8.16 striptags
删除字符串中所有的html标签。示例代码如下:
{{ value|striptags }}
如果value是hello world,输出: hello world。
1.8.17 truncatechars
如果给定的字符串长度超过了过滤器指定的长度,那么就会进行切割,并且会拼接三个点来作为省略号。示例代码如下:
{{ value|truncatechars:5 }}
如果value为"北京欢迎您~",输出结果为:"北京..."
1.8.18 truncatechars_html
类似truncatechars,只不过是不会切割html标签。示例代码如下:
{{ value|truncatechars_html:5 }}
如果value为"北京欢迎您~",输出结果为:"北京..."
2. 模版结构
2.1 include模版
有时候一些代码是在许多模版中都用到的,如果我们每次都重复的去拷贝代码那肯定不复合项目的规范。一般我们可以把这些重复性的代码抽取出来,就类似与python中的函数一样,以后想要使用这些代码的时候,就通过include包含进来。这个标签就是include。
示例代码如下:
# header.html
<p>我是header</p>
# footer.html
<p>我是footer</p>
# mainl.html
{% include 'header.html' %}
<p>我是main内容</p>
{% include 'footer.html' %}
include标签寻找路径的方式,也是跟render渲染模版的函数一样的。
默认include标签包含模版,会自动的使用主模版中的上下文,也即可以自动的使用主模版中的变量。如果想传入一些其他的参数,那么可以使用with语句。示例代码如下:
# header.html
<p>用户名: {{ username }}</p>
# main.html
{% include "header.html" with username='someone' %}
2.2 模版继承
在前端页面开发中,有些代码是需要重复使用的,这种情况可以使用include标签来实现,也可以使用另外一个比较强大的方式来实现,那就是模版继承。模版继承类似于python中的类,在父类中可以先定义好一些变量和方法,然后在子类中实现。模版继承也可以在父模版中先定义好一些自模板需要用到的代码,然后自模板直接继承就可以了。并且应为自模板肯定有自己的不同代码,因此可以在父模版中定义一个block接口,然后子模版再去实现。
以下是父模版的代码:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}后台页面{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
{% block css %}{% endblock %}
</head>
<body>
<!-- 顶部导航栏 -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">后台管理系统</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">账号设置</a></li>
<li><a href="#">登出</a></li>
</ul>
</div>
</div>
</nav>
<!-- 页面内容区域 -->
<div>
{% block content %}
{% endblock %}
</div>
<script src="{% static 'js/jquery-3.6.0.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
{% block js %}{% endblock %}
</body>
</html>
这个模版,取名叫做base.html。定义好一个简单的html骨架。然后定义好block接口,让子模版根据具体需求来实现,子模板通过extends标签来继承父模版。示例代码如下:
{% extends "base.html" %}
{% block title %}博客页面{% endblock %}
{% block content %}
...
{% endblock %}
需要注意的是:
extends标签必须放在模版的第一行。子模版中的代码必须放在block中。否则将不会被渲染。
如果在某个block中需要使用父模版的内容,那么可以使用{{ block.super }}来继承。比如上例,{% block title %},如果想要使用父模版的title,那么可以在字模版的block title中使用{{ block.super }}来实现。
在定义block的时候,处了在block开始的地方定义这个block的名字,还可以在block结束的时候定义名字。
比如{% block titlle %}{% endblock title %}。这在大型模版中显得尤其有用,能让你快速看到block包含在哪里。