html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:29 AM

引入

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

模板的作用

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

BaiduTemplate

举个:chestnut:栗子

首先需要下载 BaiduTemplate.js

接着引入一个栗子

<!doctype html><html><head><meta charset="utf-8"/><title>test</title><!-- 引入baiduTemplate --><script type="text/javascript" src="./baiduTemplate.js"></script></head><body><div id='result'></div><!-- 模板1开始，可以使用script（type设置为text/html）来存放模板片段，并且用id标示 --><script id="t:_1234-abcd-1" type="text/html"><div>    <!-- 我是注释，语法均为Javascript原生语法，默认分割符为 <% %> ，也可以自定义，参见API部分 -->    <!-- 输出变量语句，输出title -->    <h1 id="title-title">title:<%=title%></h1>    <!-- 判断语句if else-->    <%if(list.length>1) { %>        <h2 id="输出list-共有-list-length-个元素">输出list，共有<%=list.length%>个元素</h2>        <ul>            <!-- 循环语句 for-->            <%for(var i=0;i<5;i++){%>                <li><%=list[i]%></li>            <%}%>        </ul>    <%}else{%>        <h2 id="没有list数据">没有list数据</h2>       <%}%></div>  </script><!-- 模板1结束 --><!-- 使用模板 --><script type="text/javascript">var data={    "title":'欢迎使用baiduTemplate',    "list":[        'test1:默认支持HTML转义，如输出<script>，也可以关掉，语法<:=value> 详见API',        'test2:',        'test3:',        'test4:list[5]未定义，模板系统会输出空'    ]};//使用baidu.template命名空间var bt=baidu.template;//可以设置分隔符//bt.LEFT_DELIMITER='<!';//bt.RIGHT_DELIMITER='!>';//可以设置输出变量是否自动HTML转义//bt.ESCAPE = false;//最简使用方法var html=bt('t:_1234-abcd-1',data);//渲染document.getElementById('result').innerHTML=html;</script></body></html>

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

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

2.书写模板

- 用

- 用id标示

- 默认语法为

3.使用模板

- 用包起来

- 数据存放在一个json里

- 赋给一个短名变量使用，来接收baidu.template

- 使用模板，并把模板渲染出的html放入结果容器内

基本语法

- 默认分隔符

- 输出一个变量

- 判断语句

1){%>

no infor

- 循环语句

- 注释

DjangoTemplate

举个:chestnut:栗子

<html><head><title>Ordering notice</title></head><body><p>Dear {{ person_name }},</p><p>Thanks for placing an order from {{ company }}. It's scheduled toship on {{ ship_date|date:"F j, Y" }}.</p><p>Here are the items you've ordered:</p><ul>{% for item in item_list %}<li>{{ item }}</li>{% endfor %}</ul>{% if ordered_warranty %}<p>Your warranty information will be included in the packaging.</p>{% endif %}<p>Sincerely,<br />{{ company }}</p></body></html>

解析上述:chestnut:：

{{person_name}} : 双大括号表示变量
{% if ordered_warranty %} : 大括号＋% 表示模板标签
{% for item in item_list %} : for + % 表示循环每一项
{{ ship_date | date:”F j,Y” }} :双大括号＋’|’ 表示为过滤器，过滤的数据以制定参数格式（F j, Y）输出

基本语法

- if

if hello

if else hello go work

if not go work

if or apple or pig

if and apple and pig

- for

for in

for in reversed

forloop 模板变量

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

基本用法

welcome

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

{%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" }} 截取指定个数的单词

{{ "1 1 1221"|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/

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存，這玩意兒，說簡單也簡單，說複雜也夠你喝一壺的。你辛辛苦苦更新了公眾號文章，結果用戶打開還是老版本，這滋味，誰受得了？這篇文章，咱就來扒一扒這背後的彎彎繞繞，以及如何優雅地解決這個問題。讀完之後，你就能輕鬆應對各種緩存難題，讓你的用戶始終體驗到最新鮮的內容。先說點基礎的。網頁緩存，說白了就是瀏覽器或者服務器為了提高訪問速度，把一些靜態資源（比如圖片、CSS、JS）或者頁面內容存儲起來。下次訪問時，直接從緩存裡取，不用再重新下載，速度自然快。但這玩意兒，也是個雙刃劍。新版本上線，