一、针对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")
如果有下级标签,则显示下级标签,否则给出默认提示。
页面渲染如下:
这种方法极大提高了页面的可扩展性。