• django html模板的语法


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

    转自: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 David”|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 %}

       <link  href='{% static  'css/css文件' %}' >

        <script  src='{% static  'js/jquery.min.js' %}'></script>

        <img src = '{%  static images/图片文件 %}' />

    三、模板继承
    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>
    ————————————————
    版权声明:本文为CSDN博主「奋斗的小小骚年」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/qq_41654985/article/details/80690303

  • 相关阅读:
    flask之视图
    android studio 配置阿里云镜像 加速
    mac idea phpstorm 提示 clear read-only status 解决办法
    如何给网站一键变黑?如哀悼日,一行css代码解决
    Android base64加密中文乱码问题解决记录
    微信Android app支付 重要记录,重要!!
    mysql 数据库拷贝innodb 操作注意事项,宝塔面板
    Linux 服务器使用shell脚本 实现 间隔N秒访问url
    echarts pie饼图块颜色设置
    Linux 服务器 node 节点满了引发的灾难,请定期清理node节点
  • 原文地址:https://www.cnblogs.com/linwenbin/p/11497115.html
Copyright © 2020-2023  润新知