一、针对p标签含有大量文本的时候,可以使用英文的句点后面接缩进
如:
html(lang="en")
head
title=pageTitle
body
h1 Jade - node template engine
#container.col.class1.class2
p You are amazing
p.
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
对于多行文本,如果同时具有子元素的话,使用.
会导致无法识别子元素,故需要使用另一种标识符|
,
p
| foo bar
| hello world
p 这是子元素而非另一行文字
当然,这样的缺点就是对于多行文字的每一行都要有一个|
二、对于嵌套来说,除了使用上面的缩进方法外,如果是只有一个子元素,可以使用:
来实现嵌套。
ul#books
li
a(href="#book-a") Book A
li
a(href="#book-b") Book B
也可以使用:
ul#books
li: a(href="#book-a") Book A
li: a(href="#book-b") Book B
三、注释
使用//
进行注释,使用//-
将不会写入源文件,多行注释采取换行缩进的方式。
四、属性值可以使用小括号,多个以逗号隔开
如:
input(type="checkbox",name="hobby",checked)
五、Jade标签的style语法
接收一个类似JavaScript类型的参数
如:
a(style={color: 'red', background: 'green'})
生成的html:
<a style="color:red;background:green"></a>
为了更方便添加自定义属性,jade特意增加了&attributes
如:
html(lang="en")
head
body
- var attributes = {'lay-id':'1001'}
div#lay-item&attributes(attributes)
渲染效果如下,给div标签加上了lay-id自定义属性
六、代码嵌入
将JavaScript嵌入Jade中,一个有三种方法。第一种是使用-
,代码中的特殊字符不会被转义
如:
- for(var x=0;x<3;x++)
li <a></a>
生成的html代码:
<li><a></a></li> <li><a></a></li> <li><a></a></li>
第二种方式使用=
,代码中的特殊字符将会被转义。
第三种方式使用!=
,代码中的特殊字符不会被转义。
Jade中的插值:
在Jade模板中,涉及到页面渲染这一块,如变量重新渲染的问题,该问题也分特殊符号是否转义。
例子:
html(lang="en")
head
body
// 转义字符串插值 `#{}`
- var theGreat = "<span>escape!</span>";
p This will be safe: #{theGreat}
// 不转义字符串插值 `!{}`
- var theGreat = "<span>escape!</span>";
p This will be safe: !{theGreat}
// 标签插值
p #[a(href="jade-lang.com") Ja
渲染的html页面:
七、相关语法
Jade除了提供if else等语句,还提供一个unless语法,有点像传统编程语言中的while
当有多个if分支的时候,在Jade中,也提供case语法。
如:
html(lang="en")
head
body
- var user = "hbk"
case user
when "hbk"
p The author is huangbaokang
when "zll"
p The author's wife is zhanglulu
default
p The default paragraph
最终渲染:
<p>The author is huangbaokang</p>
注意:在Jade中,并没有提供类似的break
语法
在Jade中,遍历数组和对象使用each
如:
html(lang="en")
head
body
ul
each val,index in ['one','two','three']
li=index +" : "+val
ul
each val,index in {'username':'huangbaokang','lover':'zhanglulu'}
li=index+" : "+val
渲染的html页面:
八、mixin的使用
mixin其实是一种宏的使用,混合宏具有复用、解耦、可读、可扩、可维护等优势。
如:
html(lang="en")
head
body
mixin showLove
ul
li "huangbaokang"
li "Love"
li "zhanglulu"
+showLove
+showLove
调用的时候使用+
页面渲染:
进行参数传递
html(lang="en")
head
body
mixin show(name)
li=name
ul
+show("huangbaokang")
+show("zhanglulu")
渲染结果:
不定参数的使用:使用...
语法
如:
html(lang="en")
head
body
mixin show(id,...items)
ul(id=id)
each item in items
li=item
+show("my-family","zhanglulu","my son","my daughter..")
渲染结果:
block
占位的使用
html(lang="en")
head
body
mixin show(name)
.myfamily
.myfamily-info
h1=name
if block
block
else
p #{name} will be soon birth on the earth
+show("zhanglulu")
p she is my wife
p also she is a teacheer,I Love my wife
+show("my son")
+show("my daughter")
如果有下级标签,则显示下级标签,否则给出默认提示。
页面渲染如下:
这种方法极大提高了页面的可扩展性。