之前在博客中介绍了jade模版,在接下来的使用过程中,越来越觉得语法规范化的重要,今天抽空在这里总结一下这些天

使用jade模版的心得。

tag标签

标签都是通过TAB缩进,来代替HTML中的层级包含关系

1、内联书写层级

a、img标签 通过分号区分元素内内容

2、自闭合标签

img、meta、link等自闭合标签会自动识别,也可在标签后添加/强制输出自闭合元素

style属性

图中已完美呈现:

变量

使用“=”输出变量值到元素内

通过 #{variable} 插入相应的变量值

这个没怎么用到,先提一提!

属性

html 元素属性通过在标签右边通过括号包含(此处逗号可拆分为多行书写属性的格式)

文本

通过在文字前面添加竖线符号“|”可让 jade 原样输出内容

在html标签标记后面通过空格隔开文本内容

在html标签标记后通过添加英文句号“.”添加块级文本

上面3个形式的方式效果为:

注释

可以通过双斜杠进行注释,jade有3种注释方式,可以分别对应输出html注释、不输出html注

释、块级html注释:

迭代

jade支持通过js语法形式运行一些表达式,最简单常用的就一个迭代可以表达为:

是不是很好用!!!

条件判断

jade 支持 if 、case条件判断,类比js的相应语法:

js可以直接写在里面,是不是很神奇!!!

Include

include.jade文件

head.jade文件

包含文件

今天先到这,以后有新内容再更。

留言

2015-12-17