django html页面 Template模板语法

最新推荐文章于 2025-03-22 03:50:32 发布

奋斗的小小骚年

最新推荐文章于 2025-03-22 03:50:32 发布

阅读量1.3w

点赞数 11

分类专栏： django python

本文链接：https://blog.csdn.net/qq_41654985/article/details/80690303

版权

python 同时被 2 个专栏收录

61 篇文章

订阅专栏

django

10 篇文章

订阅专栏

二、定义模板

1. 模板语言(DTL)主要内容

1）变量

2）标签 { % 代码块 % }

3）过滤器

4）注释{# 代码或html #}

2. 变量

1）语法：

{{ variable }}

2）当模版引擎遇到一个变量，将计算这个变量，然后将结果输出

3）变量名必须由字母、数字、下划线（不能以下划线开头）和点组成

4）当模版引擎遇到点(".")，会按照下列顺序查询：

字典查询，例如：foo["bar"] {{foo.bar}}
属性或方法查询，例如：foo.bar
数字索引查询，例如：foo[bar] {{all_students.0}}

5）如果变量不存在，模版系统将插入'' (空字符串)

6）在模板中调用方法时不能传递参数

3. 在模板中调用对象的方法和属性

4. 标签

1）语法：{ % tag % }

2）作用

- 在输出中创建文本
- 控制循环或逻辑
- 加载外部信息到模板中供以后的变量使用

4.1 for标签

4.1.1 语法

{ %for ... in ...%}

循环逻辑

{{forloop.counter}}表示当前是第几次循环

{ %empty%}

给出的列表为或列表不存在时，执行此处

{ %endfor%}

4.2 if标签

4.2. 1语法

{ %if ...%}

逻辑1

{ %elif ...%}

逻辑2

{ %else%}

逻辑3

{ %endif%}

4.3 comment标签,多行注释

{ % comment % }

多行注释

{ % endcomment % }

4.4 include：加载模板并以标签内的参数渲染

可以包含另外一个模块过来

{ %include "foo/bar.html" % }

4.5 url：反向解析

4.5.1 语法

语法：'p1'和 'p2'是数据

{ % url 'name' 'p1' 'p2' %}?=’get请求方式’

4.6 csrf_token：这个标签用于跨站请求伪造保护

{ % csrf_token %}  通常加在表单中不加而且没有关闭django  csrf的中间件，会403错误

5. 过滤器

5.1 过滤器语法

1）语法：{ { 变量|过滤器 }}

2）例如{ { name|lower }}，表示将变量name的值变为小写输出

3）使用管道符号 (|)来应用过滤器

4）通过使用过滤器来改变变量的计算结果

5.2 过滤器常用形式

1）可以在if标签中使用过滤器结合运算符

if list1|length > 1

2）过滤器能够被“串联”，构成过滤器链

name|lower|upper

3）过滤器可以传递参数，参数使用引号包起来

list|join:", "   引号必须为双引号

4）default：如果一个变量没有被提供，或者值为false或空，则使用默认值，否则使用变量的值

value|default:"什么也没有"

5）date：根据给定格式对一个date变量格式化

value|date:'Y-m-d'

6）escape：详见“HTML转义”

5.3 Django 过滤器表

过滤器	描述	示例
upper	以大写方式输出	{{ user.name \| upper }}
add	给value加上一个数值	{{ user.age \| add:”5” }}
addslashes	单引号加上转义号
capfirst	第一个字母大写	{{ ‘good’\| capfirst }} 返回”Good”
center	输出指定长度的字符串，把变量居中	{{ “abcd”\| center:”50” }}
cut	删除指定字符串	{{ “You are not a Englishman” \| cut:”not” }}
date	格式化日期
default	如果值不存在，则使用默认值代替	{{ value \| default:”(N/A)” }}
default_if_none	如果值为None, 则使用默认值代替
dictsort	按某字段排序，变量必须是一个dictionary	{% for moment in moments \| dictsort:”id” %}
dictsortreversed	按某字段倒序排序，变量必须是dictionary
divisibleby	判断是否可以被数字整除	{{ 224 \| divisibleby:“2”}} 返回 True
escape	按HTML转义，比如将”<”转换为”&lt”	A = ‘<a href=>我爱你</a>’
filesizeformat	增加数字的可读性，转换结果为13KB,89MB,3Bytes等	{{ 1024 \| filesizeformat }} 返回 1.0KB
first	返回列表的第1个元素，变量必须是一个列表
floatformat	转换为指定精度的小数，默认保留1位小数	{{ 3.1415926 \| floatformat:3 }} 返回 3.142 四舍五入
get_digit	从个位数开始截取指定位置的数字	{{ 123456 \| get_digit:’1’}}
join	用指定分隔符连接列表	{{ [‘abc’,’45’] \| join:’’ }} 返回 abc45
length	返回列表中元素的个数或字符串长度
length_is	检查列表，字符串长度是否符合指定的值	{{ ‘hello’\| length_is:’3’ }}
linebreaks	用<p>或<br>标签包裹变量	{{ “Hi\n\nDavid”\|linebreaks }} 返回<p>Hi</p><p>David</p>
linebreaksbr	用<br/>标签代替换行符
linenumbers	为变量中的每一行加上行号
ljust	输出指定长度的字符串，变量左对齐	{{‘ab’\|ljust:5}}返回 ‘ab ’
lower	字符串变小写
make_list	将字符串转换为列表
pluralize	根据数字确定是否输出英文复数符号
random	返回列表的随机一项
removetags	删除字符串中指定的HTML标记	{{value \| removetags: “h1 h2”}}
rjust	输出指定长度的字符串，变量右对齐
slice	切片操作，返回列表	{{[3,9,1] \| slice:’:2’}} 返回 [3,9] {{ 'asdikfjhihgie' \| slice:':5' }} 返回 ‘asdik’
slugify	在字符串中留下减号和下划线，其它符号删除，空格用减号替换	{{ '5-2=3and5 2=3' \| slugify }} 返回 5-23and5-23
stringformat	字符串格式化，语法同python
time	返回日期的时间部分
timesince	以“到现在为止过了多长时间”显示时间变量	结果可能为 45days, 3 hours
timeuntil	以“从现在开始到时间变量”还有多长时间显示时间变量
title	每个单词首字母大写
truncatewords	将字符串转换为省略表达方式	{{ 'This is a pen' \| truncatewords:2 }}返回 This is ...
truncatewords_html	同上，但保留其中的HTML标签	{{ '<p>This is a pen</p>' \| truncatewords:2 }}返回 <p>This is ...</p>
urlencode	将字符串中的特殊字符转换为url兼容表达方式	{{ ‘http://www.aaa.com/foo?a=b&b=c’ \| urlencode}}
urlize	将变量字符串中的url由纯文本变为链接
wordcount	返回变量字符串中的单词数
yesno	将布尔变量转换为字符串yes, no 或maybe	{{ True \| yesno }} {{ False \| yesno }} {{ None \| yesno }} 返回 yes no maybe

6. 注释

6.1 单行注释

选中要注释的单行代码：Ctrl+/

{#...#}

6.2 注释可以包含任何模版代码，有效的或者无效的都可以

选中要注释的单行代码：Ctrl+/

{# { % if foo % }bar{ % else % } #}

6.3 使用comment标签注释模版中的多行内容

{ % comment % }

多行注释

{ % endcomment % }

7. 模板的静态文件（如css js image）通常创建static文件夹放入其中

在settings.py 中配置 STATICFILES_DIRS = [os.path.join(BASE_DIR,'static')]

在html 第二行 {% load staticfiles %}

三、模板继承

1. 模板概述

1.1 模板继承的好处

1）模板继承可以减少页面内容的重复定义，实现页面内容的重用

2）典型应用：网站的头部、尾部是一样的，这些内容可以定义在父模板中，子模板不需要重复定义

3）block标签：在父模板中预留区域，在子模板中填充

4）extends继承：继承，写在模板文件的第一行

1.2 语法说明

1）定义父模板base.html

block_name模板名字任意

{ %block block_name%}

这里可以定义默认值

如果不定义默认值，则表示空字符串

{ %endblock%}

2）定义子模板index.html

{ % extends "base.html" %}

3）在子模板中使用block填充预留区域

{ %block block_name%}

实际填充内容

{ %endblock%}

说明

如果在模版中使用extends标签，它必须是模版中的第一个标签
不能在一个模版中定义多个相同名字的block标签
子模版不必定义全部父模版中的blocks，如果子模版没有定义block，则使用了父模版中的默认值
如果发现在模板中大量的复制内容，那就应该把内容移动到父模板中
使用可以获取父模板中block的内容
为了更好的可读性，可以给endblock标签一个名字

{ % block block_name %}

区域内容

{ % endblock block_name %}

四、HTML转义

1. HTML自动转义案例

Django对字符串进行自动HTML转义，如在模板中输出如下值：

1.1 视图代码和url配置

视图代码

#html自动转义案例
def htmlTest(request):
   context = {'data': '<h1>hello</h1>'}
   return render(request, 'booktest/html_test.html',context )

Url配置

url(r'^htmlTest/$',views.htmlTest,name='htmlTest'),

1.2 模板代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML转义</title>
</head>
<body>
<hr>
{{ data }}
<hr>
</body>
</html>

1.3 运行显示效果如下图

2. 会被自动转义的字符

2.1 html转义的意义和自动转义的字符

html转义，就是将包含的html标签输出，而不被解释执行，原因是当显示用户提交字符串时，可能包含一些攻击性的代码，如js脚本

2.2 Django会将如下字符自动转义

< 会转换为&lt;

> 会转换为&gt;

' (单引号) 会转换为&#39;

" (双引号)会转换为 &quot;

& 会转换为 &amp;

当显示不被信任的变量时使用escape过滤器，一般省略，因为Django自动转义

{{t1|escape}}

3. 关闭转义两种方式

3.1 对于变量使用safe过滤器

{{ data|safe }}

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML转义</title>
</head>
<body>
<hr>
{{ data }}
<hr>
对于变量使用safe过滤器关闭html转义:<br/>
{{ data|safe}}
</body>
</html>

运行效果：

3.2 对于代码块使用autoescape标签

{ % autoescape off %}

{{ body }}

{ % endautoescape %}

1）标签autoescape接受on或者off参数

2）自动转义标签在base模板中关闭，在child模板中也是关闭的

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML转义</title>
</head>
<body>
<hr>
{{ data }}
<hr>
对于变量使用safe过滤器关闭html转义:<br/>
{{ data|safe}}

<hr/>
使用autoescape标签关闭转义:<br/>
{% autoescape off %}
    {{ data }}
{% endautoescape %}
</body>
</html>

4. 手动转义

4.1 下面没有转义

{ { data|default:"<b>hello</b>" }}

4.2 应写为下面方式手动转义

{ { data|default:"&lt;b&gt;hello&lt;/b&gt;" }}

案例

<hr/>
下面的代码我们希望原始输出:<br/>

{{ xixi|default:"<h1>hello</h1>" }}
<br>
解决办法:手动转义,让其原始输出:
<br/>
&lt;h1&gt;hello&lt;/h1&gt;


</body>
</html>