当前位置:Gxlcms > html代码 > 总结baiduTemplate和djangoTemplate的学习_html/css_WEB-ITnose

总结baiduTemplate和djangoTemplate的学习_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:26人阅读

引入

开发工作中需要,除了今天要介绍的两种template,还有很多模板,但他们的终点都是相同的,都是为了开发的便利。

模板的作用

是一套模板语法,开发者可以通过写一个模板区域,每次根据传入数据,然后渲染成不同的html片段。

BaiduTemplate

  • 举个:chestnut:栗子

首先需要下载 BaiduTemplate.js

接着引入一个栗子

test
输出变量语句,输出title -->

title:<%=title%>

<%if(list.length>1) { %>

输出list,共有<%=list.length%>个元素

    <%for(var i=0;i<5;i++){%>
  • <%=list[i]%>
  • <%}%>
<%}else{%>

没有list数据

<%}%>
输出输出空' ]};//使用baidu.template命名空间var bt=baidu.template;//可以设置分隔符//bt.LEFT_DELIMITER='';//可以设置输出变量是否自动HTML转义//bt.ESCAPE = false;//最简使用方法var html=bt('t:_1234-abcd-1',data);//渲染document.getElementById('result').innerHTML=html;

  • 整个使用模板的结构分为以 下几个步骤

1.需要一个接收结果的容器

2.书写模板

- 用输出一个变量 <%=data%>

- 判断语句

<%if(list.length>1){%>

<%=list.length%>

<%}else{%>

no infor

<%}%>

- 循环语句

<%for(i=0;i

  • <%=list[i]%>
  • <%>

    - 注释

    DjangoTemplate

    • 举个:chestnut:栗子

    Ordering notice

    Dear {{ person_name }},

    Thanks for placing an order from {{ company }}. It's scheduled toship on {{ ship_date|date:"F j, Y" }}.

    Here are the items you've ordered:

      {% for item in item_list %}
    • {{ item }}
    • {% endfor %}
    {% if ordered_warranty %}

    Your warranty information will be included in the packaging.

    {% endif %}

    Sincerely,
    {{ company }}

    解析上述:chestnut::

    1. {{person_name}} : 双大括号表示变量
    2. {% if ordered_warranty %} : 大括号+% 表示模板标签
    3. {% for item in item_list %} : for + % 表示循环每一项
    4. {{ ship_date | date:”F j,Y” }} :双大括号+’|’ 表示为过滤器,过滤的数据以制定参数格式(F j, Y)输出
    • 基本语法

    - if

    if <%if today_is_weekend%> hello <%endif%>

    if else <%if today_is_weekend%> hello <%else%> go work <%endif%>

    if not <%if not today_is_weekend%> go work <%endif%>

    if or <% if apple or pig %> apple or pig <%endif%>

    if and <%if apple and pig%> apple and pig<%endif%>

    - for

    for in <%for athlete in athlete-list%>

    {{athlete.name}}

    <%endfor%>

    for in reversed <%for athlete in athlete-list reversed%>

    {{athlete.num}}

    <%endfor%>

    forloop 模板变量

    - ifequal/ifnotequal 比较两个变量值并显示结果

    基本用法 <%ifequal user currentuser%>

    welcome

    <%endifequal%>

    适用类型 模板变量、字符串、整数和小数

    {%ifequal variable 1 %}

    {% ifequal variable 1.23 %}

    {% ifequal variable 'foo' %}

    {% ifequal variable "foo" %}

    - { xxx|yyy }过滤器

    常用过滤器

    date: 按指定的格式字符串参数格式化 date或者 datetime对象

    {{ 123|add:"5" }} 给value加上一个数值

    {{ "AB'CD"|addslashes }} 单引号加上转义号,一般用于输出到javascript中

    {{ "abcd"|capfirst }} 第一个字母大写

    {{ "abcd"|center:"50" }} 输出指定长度的字符串,并把值对中

    {{ "123spam456spam789"|cut:"spam" }} 查找删除指定字符串

    {{ value|date:"F j, Y" }} 格式化日期

    {{ value|default:"(N/A)" }} 值不存在,使用指定值

    {{ value|default_if_none:"(N/A)" }} 值是None,使用指定值

    {{ 列表变量|dictsort:"数字" }} 排序从小到大

    {{ 列表变量|dictsortreversed:"数字" }} 排序从大到小

    {% if 92|divisibleby:"2" %} 判断是否整除指定数字

    {{ string|escape }} 转换为html实体

    {{ 21984124|filesizeformat }} 以1024为基数,计算最大值,保留1位小数,增加可读性

    {{ list|first }} 返回列表第一个元素

    {{ "ik23hr&jqwh"|fix_ampersands }} &转为&

    {{ 13.414121241|floatformat }} 保留1位小数,可为负数,几种形式

    {{ 13.414121241|floatformat:"2" }} 保留2位小数

    {{ 23456 |get_digit:"1" }} 从个位数开始截取指定位置的1个数字

    {{ list|join:", " }} 用指定分隔符连接列表

    {{ list|length }} 返回列表个数

    {% if 列表|length_is:"3" %} 列表个数是否指定数值

    {{ "ABCD"|linebreaks }} 用新行用


    标记包裹

    {{ "ABCD"|linebreaksbr }} 用新行用
    标记包裹

    {{ 变量|linenumbers }} 为变量中每一行加上行号

    {{ "abcd"|ljust:"50" }} 把字符串在指定宽度中对左,其它用空格填充

    {{ "ABCD"|lower }} 小写

    {% for i in "1abc1"|make_list %}ABCDE,{% endfor %} 把字符串或数字的字符个数作为一个列表

    {{ "abcdefghijklmnopqrstuvwxyz"|phone2numeric }} 把字符转为可以对应的数字??

    {{ 列表或数字|pluralize }} 单词的复数形式,如列表字符串个数大于1,返回s,否则返回空串

    {{ 列表或数字|pluralize:"es" }} 指定es

    {{ 列表或数字|pluralize:"y,ies" }} 指定ies替换为y

    {{ object|pprint }} 显示一个对象的值

    {{ 列表|random }} 返回列表的随机一项

    {{ string|removetags:"br p div" }} 删除字符串中指定html标记

    {{ string|rjust:"50" }} 把字符串在指定宽度中对右,其它用空格填充

    {{ 列表|slice:":2" }} 切片

    {{ string|slugify }} 字符串中留下减号和下划线,其它符号删除,空格用减号替换

    {{ 3|stringformat:"02i" }} 字符串格式,使用Python的字符串格式语法

    {{ "EABCD"|striptags }} 剥去[X]HTML语法标记

    {{ 时间变量|time:"P" }} 日期的时间部分格式

    {{ datetime|timesince }} 给定日期到现在过去了多少时间

    {{ datetime|timesince:"other_datetime" }} 两日期间过去了多少时间

    {{ datetime|timeuntil }} 给定日期到现在过去了多少时间,与上面的区别在于2日期的前后位置。

    {{ datetime|timeuntil:"other_datetime" }} 两日期间过去了多少时间

    {{ "abdsadf"|title }} 首字母大写

    {{ "A B C D E F"|truncatewords:"3" }} 截取指定个数的单词

    {{ "111221"|truncatewords_html:"2" }} 截取指定个数的html标记,并补完整

      {{ list|unordered_list }}
    多重嵌套列表展现为html的无序列表

    {{ string|upper }} 全部大写

    linkage url编码

    {{ string|urlize }} 将URLs由纯文本变为可点击的链接。(没有实验成功)

    {{ string|urlizetrunc:"30" }} 同上,多个截取字符数。(同样没有实验成功)

    {{ "B C D E F"|wordcount }} 单词数

    {{ "a b c d e f g h i j k"|wordwrap:"5" }} 每指定数量的字符就插入回车符

    {{ boolean|yesno:"Yes,No,Perhaps" }} 对三种值的返回字符串,对应是 非空,空,None

    - include 允许在模板中包含其他模板内容

    {%include ’nav.html'%}

    - 注释

    {# 俺是注释 #}

    总结

    Template有很多,还有常用的dot.js之类的常用前端模板,但是只要是模板目的都相同,就是方便开发。

    参考资料:

    http://tangram.baidu.com/BaiduTemplate

    http://djangobook.py3k.cn/chapter04/

  • 人气教程排行