django html模板的语法

蔚落 2023-06-02 09:22 13阅读 0赞

最近遇到了从数据库查询出来的数据含有\\r\\n字符要在textaera展示，一直没有成功，现在也没有成功。查到这一个关于html的模板，记录一下。

转自：[https://blog.csdn.net/qq\_41654985/article/details/80690303][https_blog.csdn.net_qq_41654985_article_details_80690303]

二、定义模板  
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:’\*’ \}\} 返回 abc\*45

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会将如下字符自动转义  
<  
会转换为  
<  
   
>  
会转换为  
>  
   
' (  
单引号  
)  
会转换为  
&\#39;  
   
" (  
双引号  
)  
会转换为  
"  
   
&  
会转换为  
&  
当显示不被信任的变量时使用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模板中也是关闭的

案例：

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

4. 手动转义  
4.1 下面没有转义  
\{ \{ data|default:"<b>hello</b>" \}\}  
4.2 应写为下面方式手动转义  
\{ \{ data|default:"<b>hello</b>" \}\}

案例

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

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

</body>  
</html>  
————————————————  
版权声明：本文为CSDN博主「奋斗的小小骚年」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/qq\_41654985/article/details/80690303

转载于:https://www.cnblogs.com/linwenbin/p/11497115.html

[https_blog.csdn.net_qq_41654985_article_details_80690303]: https://blog.csdn.net/qq_41654985/article/details/80690303