DTL
DTL(django template language)是Django自带的模板语言。
- 模板变量
{{ 变量 }} 使用双大括号包括,注意左右两边都有空格 - 模板标签
{% %} 模板标签包括,写一些语句。
标签 | 作用 |
---|---|
{% if %} {% endif %} {% elif %} | if语句 |
{% for %} {% endfor %} | 循环语句 |
{% url %} | 地址 |
{% extends xx %} | 模板继承标签,从xx中继承 |
{% load %} | 加载相关内容 |
{% static %} | 静态资源 |
{% block %} {% endblock %} | 占位标签 |
{% csrf_token %} | 用来防止跨站伪造攻击 |
{% include %} | 包含一个HTML页面 |
for循环中有一些常用的变量
- forloop.counter 当前索引,从1开始
- forloop.counter() 当前索引,从0开始
- forloop.revcounter 循环剩余的次数
- forloop.revcounter() 循环剩余的次数 -1
- forloop.first 是否第一次循环
- forloop.last 是否最后一次循环
- forloop.parentloop 嵌套循环,获取上册循环
- 过滤器
{{ 变量 | 过滤器:参数 }}
模板 | 作用 |
---|---|
safe | 关闭标签的自动转义 |
length | 获取变量的长度 |
default | 当变量为False,显示默认值 |
date | 日期格式 |
upper/lower | 大小写 |
slice | 切片 {{ name |
例子
app1下的views.py
def var(request):
lists = ['java', 'Python', "c"]
dicts = {
'姓名': "艾希",
"年龄": 24
}
return render(request, 'app1/var.html', {'lists': lists, 'dicts': dicts})
var.html
{{ dicts.姓名 }}
<br />
{% for list in lists %}
<p>{{ list }}</p>
{% endfor %}
自定义
在对应的app1下新建templatetags文件下,然后新建__init__.py文件和自己创建的过滤器。
在对应的过滤器中写入,这里对对应的值如果大于传入的参数,则分割加上…来显示
from django import template
register = template.Library()
@register.filter
def show_title(value, n):
if len(value) > n:
return f'{value[0:n]}...'
else:
return value
对应的模板文件
{% load myfilter %} {{ dicts.标题 |show_title:10 }}
自定义标签和上面的原理一致。
模板继承
新建一个base.html页面作为模板
<html>
<head></head>
{% block title %}
<title>这是母版</title>
{% endblock %}
<body>
<table border="1" style="width: 700px">
<tr>
<td colspan="2" style="height: 30px; text-align: center">
这是top区域,一般用于导航
</td>
</tr>
<tr style="vertical-align: middle; height: 300px">
<td style="width: 200px">这是左边的菜单</td>
<td style="width: 500px">
{% block content %} 这个区域随着内容页的变化而变化 {% endblock %}
</td>
</tr>
<tr>
<td colspan="2" style="height: 30px; text-align: center">
这是底部区域,一般用于导航
</td>
</tr>
</table>
</body>
</html>
新建一个页面,继承base页面。
{% extends "app1/base.html" %} {% block title %}
<title>这是欢迎页面</title>
{% endblock %} {% block content %}
<div style="text-align: center">欢迎来到我的特色小店</div>
{% endblock %}
新建路由,测试,也可使用{% include %}