jade模板引擎

jade是一種源於node的模板引擎，能夠直接經過json對象渲染出html頁面。

本文參考《jade-源於Node.js的html模板引擎》等網絡文章對其基礎特性進行梳理：

一、賦值

#user #{name} <#{email}>

此處#user會生成一個id爲user的div，同時利用name和email進行賦值，結果爲：<div id="user">fredric &lt;fredric@qq.com&gt;</div>

二、註釋

採用簡單的雙斜槓便可，html端會自動生成<!-- -->

三、嵌套

 ul
      li.first
        a(href='#') foo
      li
        a(href='#') bar
      li.last
        a(href='#') baz

html動態生成以下：

四、條件選擇

    case friends
      when 0
        p you have no friends
      when 1
        p you have a friend
      default
        p you have #{friends} friends

上例中將根據node渲染時給出的friends變量值生成html。

五、表單輸入

    input(type='checkbox',
      name='agreement',
      checked)
      
    a(href='/user/' + user.id)= user.name

生成html以下：

六、條件判斷

    //- if
    - if (items.length)
      ul
        - items.forEach(function(item){
            li= item
        - })
        
    // for   
    for user in users
        - if (user.role == 'admin')
            p #{user.name} is an admin
        - else
            p= user.name

生成html以下：

七、繼承

　　7.1 定義模板　

html
  head
    h1 My Site - #{title}
    block scripts
      script(src='../jquery.js')
  body
    block content
    block foot
      #footer
        p some footer content

　　此時content block爲空，生成的html無該部分數據。

　　7.2 繼承模板

extends demo02-layout

block scripts
  script(src='pets.js')

block content
  h1= title
  ul
  each pet in pets 
    li #{pet}
    include demo04

　　7.3 include

include 能夠簽入一個靜態的jade文件，以下：

a(href="javascript:void(0)", onclick="call(#{pet})")= pet

其中call在pets.js中定義，顯示效果以下，點擊每一個鏈接後會彈出一個提示框，對應pet的值。

 8. 工具

jade2html在線工具：http://html2jade.vida.io/