Jade模板引擎学习总结

一、针对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")

如果有下级标签,则显示下级标签,否则给出默认提示。
页面渲染如下:
这里写图片描述

这种方法极大提高了页面的可扩展性。

猜你喜欢

转载自blog.csdn.net/huangbaokang/article/details/82351392