django html页面 Template模板语法

二、定义模板

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

1)变量

2)标签 { % 代码块 % }

3)过滤器

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

2. 变量

1)语法:

{{ variable }}

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

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

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

  1. 字典查询,例如:foo["bar"]   {{foo.bar}}
  2. 属性或方法查询,例如:foo.bar
  3. 数字索引查询,例如: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转义,比如将”<”转换为”<”

 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


标签包裹变量

{{ “Hi\n\nDavid”|linebreaks }} 返回

Hi

David

linebreaksbr


标签代替换行符

 

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标签

{{ '

This is a pen

' | truncatewords:2 }}返回

This is ...

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': '

hello

'
}    return render(request, 'booktest/html_test.html',context )
 

Url配置

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

 

1.2 模板代码


"en">

    "UTF-8">
    HTML<span style="color:#000000;background:#C0DBC5;">转义</span><span style="color:#000000;background:#C0DBC5;">



{{ data }}

1.3 运行显示效果如下图

2. 会被自动转义的字符

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

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

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

< 会转换为<
 
> 会转换为>
 
' (单引号) 会转换为'
 
" (双引号)会转换为 "
 
& 会转换为 &

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

{{t1|escape}}

3. 关闭转义两种方式

3.1 对于变量使用safe过滤器

{{ data|safe }}

 

案例


"en">

    "UTF-8">
    HTML<span style="color:#000000;background:#C0DBC5;">转义</span><span style="color:#000000;background:#C0DBC5;">



{{ data }}
对于变量使用safe过滤器关闭html转义:
{{ data|safe}}

 

运行效果:

 

3.2 对于代码块使用autoescape标签

{ % autoescape off %}
{{ body }}
{ % endautoescape %}

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

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

 

案例:


"en">

    "UTF-8">
    HTML<span style="color:#000000;background:#C0DBC5;">转义</span><span style="color:#000000;background:#C0DBC5;">



{{ data }}
对于变量使用safe过滤器关闭html转义:
{{ data|safe}}
使用autoescape标签关闭转义:
{% autoescape off %}    
{{ data }} {% endautoescape %}

 

 

 

4. 手动转义

4.1 下面没有转义

{ { data|default:"hello" }}

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

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

 

案例


下面的代码我们希望原始输出:
{{ xixi|default:
"

hello

"
}}
解决办法:手动转义,让其原始输出:
<h1>hello</h1>



你可能感兴趣的:(django,python)