Jade和Sass一樣通過(guò)空格來(lái)控制格式，一般推薦使用tab(2個(gè)空格鍵大小)來(lái)進(jìn)行縮進(jìn)。

一.Jade 小技巧

:

表示不用換行， 在jade中叫block expansion

li: a(href="#") Home
// 等同于
li
  a(href="#") Home

|

表示這行不用添加任何標(biāo)簽,只有內(nèi)容存在

示例1：

.glyphicon.glyphicon-email
|  3 days ago
// 表示圖標(biāo)后面直接添加日期

.glyphicon.glyphicon-email
days ago
// 如果省略"|" jade會(huì)認(rèn)為上面的email圖標(biāo)叫days
// 結(jié)果只會(huì)顯示 圖標(biāo)+ ago

示例2：寫一個(gè)ul>li>a>{文字}

ul
  li(role="presentation")
    a(href="#"): |Home
  li(role="presentation")
    a(href="#"): |Maps

// 利用 ： 和 |
// 等同于
<ul>
    <li><a>Home</a></li>
    <li><a>Maps</a></li>
</ul>

添加圖標(biāo)

比如說(shuō)添加一些fontAwesome圖標(biāo), 注意下面的a后面的寫法

dl
  dd CONTACT US
    dl
      // Twitter前面2個(gè)空格
      a(href=""): i.fa.fa-twitter  Twitter
    dl
      a(href=""): i.fa.fa-facebook  Facebook
    dl
      a(href=""): i.fa.fa-google  Google+

相當(dāng)于

<dl>
    <a href="">
        <i class="fa fa-twitter"></i> Twitter
    </a>
</dl>

二.注釋

單行注釋

Jade可以像JS一樣的注釋， 使用

• //： 在編譯出來(lái)的html中顯示出來(lái)
• //-： 在編譯出來(lái)的html中不顯示出來(lái)

比如：

// 注釋1
p.
  我們添加一個(gè)單行注釋，并且注釋將在html中顯示出來(lái)

//- 注釋2，這是第二段
p 
  | 我們添加另一個(gè)單行注釋，這個(gè)注釋不會(huì)在html中顯示出來(lái)

多行注釋

多行注釋在單行注釋的基礎(chǔ)上對(duì)注釋文字進(jìn)行縮進(jìn)即可

//
  這是另一種注釋
  這是一個(gè)多行注釋
p hello world

# 編譯結(jié)果
<!--
這是另一種注釋
這是一個(gè)多行注釋-->
<p>hello world</p>
# 同樣可以通過(guò) //- 來(lái)設(shè)置在編譯之后不顯示出來(lái)

三.定義變量

jade 作為模板語(yǔ)言，首先將語(yǔ)句轉(zhuǎn)換成js,然后由js生成dom，我們可以像js一樣定義變量， 通過(guò) - 來(lái)聲明一個(gè)變量。

- var some_text = 'hello world';
- list = ['bob', 'james', 'kobe']
- obj = {'type': 'text', 'value': 'anything'}

變量的使用，是通過(guò)類似其它模板語(yǔ)言一樣， 使用 #{}.(ES6 中使用${})

p #{some_text}
// 或者
p= some_text
// 都等同于
p 'hello world'

和ES6模板一樣，jade模板也可以使用計(jì)算操作

p 23 * 10 = #{23 * 10}
// 等同于
p 23 * 10 = 230

在元素屬性中使用變量我們需要使用ES6語(yǔ)法：`${variableName}`

// 比如定義變量
- dog = 'mary'
// 在img 元素中
// '#{dog}'是pug語(yǔ)法
// `images/${dog}` 是ES6
img(src=`images/${dog}`, alt=`${dog}`) #{dog}

更多示例：

- base_url = 'http://www.baidu.com' 
a(href='base_url/maps') 百度地圖

- i = {'type': 'text', 'name': 'Bob'}
input(tupe='#{i.type}', value='#{i.name}')

- content = 'whatever the content is'

p #{content}
// 或者
p= content

轉(zhuǎn)義

jade為防止XSS攻擊， 對(duì)于html代碼需要進(jìn)行轉(zhuǎn)義

- html_content = 'hello <em>world</em>'
p= #{html_content}
// 轉(zhuǎn)換成html，變?yōu)?<p>hello <em>world<\em></p>
// 在瀏覽器頁(yè)面中顯示為
<p>hello <em>world</em></p>

轉(zhuǎn)義的方法有以下2種：

p!= html_content
// 或者
p !{html_content}

3.邏輯操作

jade也可以進(jìn)行一般的邏輯操作和流程控制，主要由以下幾個(gè)方面：

• if/else
• unless/else
• case...when
• for loop
• each
• while

1.if/else

一般寫法：

- name = 'Bob'
- if (name == 'Bob'){
    h1 Hello Bob
- } else {
    h1 My name is #{name} 
- }

還可以進(jìn)行三元運(yùn)算：

- name = 'Bob'
- greeting = (name == 'Bob' ?
'Hello': 'My name is')
h1 #{greeting} #{name}

簡(jiǎn)寫方法，這個(gè)也是我們一般書寫的方法

- name = 'Bob'
if name == 'Bob'
  h1 hello Bob
else
  h1 My name is #{name}

同樣， 可以加入 else if:

- name = 'Bob'
if name == 'Bob'
  h1 hello bob
else if name == 'James'
  h1 hello James
else
  h1 my name is #{name}

2.unless...

這個(gè)其實(shí)就是對(duì)條件加一層否定， 等同于 if(!(expr))

- name = 'Bob'
unless name == 'Bob'
  h1 my name is #{name}
else
  h1 hello Bob

3.case...when

這個(gè)起始等同于switch...case

- name = 'Bob'
case name
  when 'Bob'
    p Hi Bob!
  when 'Alice'
    p Hi Alice
  default
    p Hello #{name}!

4.for loops

和js中for一樣

- list = ['one', 'two', 'three']

ul
  - for (var i = 0, i < list.length; i++) {
      li= list[i]
  - }

// 等同于
ul>li*3

5.Each loops

語(yǔ)法為 each VAL[, KEY] in OBJ, 上面的for循環(huán)可寫為：

- list = ['one', 'two', 'three']  
ul
  each item in list
    li=item

// 另一個(gè)例子
- books = ['A', 'B', 'C']
select
  each book, i in books
    option(value=i) Book name: #{book}

// 寫成對(duì)象的形式也可以
- books = {'001': 'A', '002': 'B', '003': 'C'}
select
  each book, i in books
    option(value=i) Book name: #{book}

6.while loops

本質(zhì)上和上面的for loops沒(méi)有什么差別

- list = ['one', 'two', 'three']
- i = 0

ul
  while i < list.length
    li=list[i]
    i++; // 注意這里的;不能省略

四.Mixins

這個(gè)功能和sass中的一樣，都是為了代碼重用設(shè)計(jì)的。jade中的mixin有以下幾種形式：

1.一般形式

mixin book(name, price)
  li #{name}: #{price}$

使用mixin,用 +

ul#books-list
  +book('Pride and Prejudice', 25.00)
  +book('Jane Eye', 13.67)

2.不帶參數(shù)的mixin

mixin copyright // 沒(méi)有參數(shù)
  | ?

// 調(diào)用   
p
  +copyright
  |  2015-2016

3.傳遞 block

除了傳遞參數(shù)以外，還可以傳遞整個(gè)塊作為mixin，block當(dāng)作占位符

mixin input(name)
  li(id=name.replace(/\s/g, '-'))
    label= name + ':'
    block    //這里的 block 本質(zhì)上是占位符

form: ul
  +input('favorite color')
    input('type'='text') // 取代上面的block
  +input('cpmments')
    textarea Type your comment here. // 取代上面的block

4.arguments類數(shù)組對(duì)象

jade中也可以使用arguments對(duì)象，實(shí)現(xiàn)mixin參數(shù)可變的情況

mixin list()
  ul
    - var args = [].slice.call(arguments);
    for item in args // 注意這里的for...in
      li= item

// 調(diào)用
+list('one', 'two', 'three')

五.模板繼承

使用Jade可以將頁(yè)面分成各個(gè)小的部分，然后通過(guò) extends, include， mixin 組裝在一起。

1.blocks 函數(shù)

blocks函數(shù)在jade中是一個(gè)小的容器， 通過(guò)block我們可以 追加(append), 向前添加(prepend)， 取代(replace) 某些內(nèi)容。其實(shí)上面我們已經(jīng)使用到blocks充當(dāng)占位符的功能了。

比如：

// layout.jade
doctype html
html
  head
    block scripts
      script(src='jquery.js')
    block styles
  body
    block content
      p there's no content here

等價(jià)于：

<doctype html>
<html>
  <head>
    <script src='jquery.js'></script>
  </head>
  <body>
    there's no content here
  </body>
</html>

extends

extends 關(guān)鍵詞允許我們指定一個(gè)特定的模板擴(kuò)展其他模板

例如下面表示

1.替代(replace)原有的模板：

// page1.jade（假設(shè)和layout.jade相同路徑）

extends layout // .jade擴(kuò)展名可以省略

block scripts  // 替代原模板中的 block scripts
  script(src='jquery.js')
  script(src='underscore.js')

block content // 替代原模板中的 block content

等價(jià)于

<doctype html>
<html>
  <head>
    <script src='jquery.js'></script>
    <script src='underscore.js'></script>
  </head>
  <body>
  </body>
</html>

2.追加append:

// page2.jade
extends layout

append scripts
  script(src='underscore.js')

block content
// 結(jié)果同上

3.向前追加

// page3.jade
extends layout

prepend scripts
  script(src='underscore.js')

block content

// 結(jié)果
<doctype html>
<html>
  <head>
    <script src='underscore'></script> // 注意兩者的順序
    <script src='jquery.js'></script>
  </head>
  <body>
    there's no content here
  </body>
</html>

2.include 關(guān)鍵詞

通過(guò)include關(guān)鍵詞是最簡(jiǎn)單的組合方式，當(dāng)這樣會(huì)使語(yǔ)言動(dòng)態(tài)性降低， 當(dāng)然這也是一種好的方法。可以include 各種類型的文件， 如html, js, css等

比如：

style.css文件

p {
  color： white;
  text-decoration: underline;
}

content.html文件

<h1>includes something</h1>
<p>this is a file for demonstrationg the use of includes</p>

example.jade文件

doctype html
html
  head
    style(type='text/css')
      include style.css
  body
    include content.html

等同于：

<doctype html>
<html>
  <head>
    <style type='text/css'>
        p {
          color: white;
          text-decoration: underline; 
        }
    </style>
  </head>
  <body>
    <h1>includes something</h1>
    <p>this is a file for demonstrationg the use of includes</p>
  </body>
</html>

當(dāng)然最常用的還是將頁(yè)面的header, footer等各部分分成各個(gè)小的組件來(lái)寫，來(lái)組成一個(gè)頁(yè)面，實(shí)現(xiàn)重用。

總結(jié)

Jade作為模板語(yǔ)言寫html感覺(jué)還是十分的簡(jiǎn)潔的，同時(shí)語(yǔ)法也十分容易上手，學(xué)習(xí)成本低，用處大?，F(xiàn)在Jade更名為pug了，原來(lái)漂亮的兔子圖標(biāo)也沒(méi)有了，但是語(yǔ)言本身沒(méi)有太多的變化。

參考連接：

• Jade語(yǔ)言文檔
• Pug官網(wǎng)
• 個(gè)人的jade學(xué)習(xí)筆記