Jade模板引擎基本語法

《原文地址》

---

在 Express 中調用 jade 模板引擎
jade 變量調用
if 判斷
循環
Case 選擇
在模板中調用其他語言
可重用的 jade 塊 (Mixins)
模板包含 (Includes)
模板引用 (Extends)

在 Express 中調用 jade 模板引擎

var express = require('express');
var http = require('http');
var app = express();
app.set('view engine', 'jade'); // 設置模板引擎
app.set('views', __dirname);  // 設置模板相對路徑(相對當前目錄)

app.get('/', function(req, res) {
    res.render('test'); // 調用當前路徑下的 test.jade 模板
})

var server = http.createServer(app);
server.listen(3002);
console.log('server started on http://127.0.0.1:3002/');

test.jp hello jade jade 模板會被

hello jade

常我們修改 node.js 代碼之後需要重啓來查看變化，但是 jade 引擎不在此列，因爲是動態加載的，所以我們修改完 jade 文件之後可以直接刷新網頁來查看效果的。

如果文本比較長可以使用

p
  | foo bar baz
  | rawr rawr

或者

p.
  foo bar baz
  rawr rawr

兩種情況都可以處理爲

<p>foo bar baz rawr rawr</p>

jade 變量調用

jade 的變量調用有 3 種方式

    #{表達式}
    =表達式
    !=表達式

注意：符號 - 開頭在 jade 中屬於服務端執行- console.log(‘hello’); // 這段代碼在服務端執行
- var s = ‘hello world’ // 在服務端空間中定義變量
p #{s}
p= s染成爲

<p>hello world</p>
<p>hello world</p>

以下代碼效果相同

- var s = 'world'
p hello #{s}
p= 'hello' + s

方式1可以自由的嵌入各個地方
方式2返回的是表達式的值
= 與 方式3 != 雷同，據說前者會編碼字符串，如

res.render(test, {
    s: 'hello world'
});

調用模板的時候，在 jade 模板中也可以如上方那樣直接調用 s 這個變量

if 判斷

方式1

- var user = { description: '我喜歡貓' }
- if (user.description)
    h2 描述
    p.description= user.description
- else
    h1 描述
    p.description 用戶無描述

結果：

<div id="user">
  <h2>描述</h2>
  <p class="description">我喜歡貓</p>
</div>

方式2

上述的方式有種省略寫法

• var user = { description: ‘我喜歡貓’ }

#user
  if user.description
    h2 描述
    p.description= user.description
  else
    h1 描述
    p.description 用戶無描述

方式3

使用 Unless 類似於 if 後的表達式加上了 ! 取反

- var user = { name: 'Alan', isVip: false }
unless user.isVip
  p 親愛的 #{user.name} 您並不是 VIP

結果

<p>親愛的 Alan 您並不是 VIP</p>

注意這個 unless 是 jade 提供的關鍵字，不是運行的 js 代碼

**

循環

**

for 循環

- var array = [1,2,3]
ul
  - for (var i = 0; i < array.length; ++i) {
    li hello #{array[i]}
  - }

結果

<ul>
    <li>hello 1</li>
    <li>hello 2</li>
    <li>hello 3</li>
</ul>

each

同樣的 jade 對於循環液提供了省略 “-” 減號的寫法

ul
  each val, index in ['西瓜', '蘋果', '梨子']
    li= index + ': ' + val

結果

<ul>
  <li>0: 西瓜</li>
  <li>1: 蘋果</li>
  <li>2: 梨子</li>
</ul>

該方法同樣適用於 json 數據

ul
  each val, index in {1:'蘋果',2:'梨子',3:'喬布斯'}
    li= index + ': ' + val

結果：

<ul>
  <li>1: 蘋果</li>
  <li>2: 梨子</li>
  <li>3: 喬布斯</li>
</ul>

Case

類似 switch 裏面的結果，不過這裏的 case 不支持case 穿透，如果 case 穿透的話會報錯。

- var friends = 10
case friends
  when 0
    p you have no friends
  when 1
    p you have a friend
  default
    p you have #{friends} friends

結果：

<p>you have 10 friends</p>

簡略寫法：

- var friends = 1
case friends
  when 0: p you have no friends
  when 1: p you have a friend
  default: p you have #{friends} friends

結果：

<p>you have a friend</p>

在模板中調用其他語言

:markdown
# Markdown 標題
這裏使用的是 MarkDown 格式
script
:coffee
console.log ‘這裏是 coffee script’

結果：

Markdown 標題

這裏使用的是 MarkDown 格式

可重用的 jade 塊 (Mixins)

//- 申明可重用的塊
mixin list
ul
li foo
li bar
li baz

//- 調用
+list()
+list()

結果：

• foo
• bar
• baz

• foo
• bar
• baz

你也可以給這個重用塊指定參數

mixin pets(pets)
ul.pets
- each pet in pets
li= pet

+pets([‘cat’, ‘dog’, ‘pig’])

結果：

<ul class="pets">
  <li>cat</li>
  <li>dog</li>
  <li>pig</li>
</ul>

Mixins 同時也支持在外部傳入 jade 塊

mixin article(title)
  .article
    .article-wrapper
      h1= title
      //- block 爲 jade 關鍵字代表外部傳入的塊
      if block
        block
      else
        p 該文章沒有內容

+article('Hello world')

+article('Hello Jade')
  p 這裏是外部傳入的塊
  p 再寫兩句

結果：

<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>該文章沒有內容</p>
  </div>
</div>
<div class="article">
  <div class="article-wrapper">
    <h1>Hello Jade</h1>
    <p>這裏是外部傳入的塊</p>
    <p>再寫兩句</p>
  </div>
</div>

Mixins 同時也可以從外部獲取屬性。

mixin link(href, name)
  a(class!=attributes.class, href=href)= name

+link('/foo', 'foo')(class="btn")

結果：

<a href="/foo" class="btn">foo</a>

模板包含 (Includes)

你可以使用 Includes 在模板中包含其他模板的內容。就像 PHP 裏的 include 一樣。

index.jade

doctype html
html
  include includes/head
body
  h1 我的網站
  p 歡迎來到我的網站。
  include includes/foot

includes/head.jade

head
  title 我的網站
  script(src='/javascripts/jquery.js')
  script(src='/javascripts/app.js')

includes/foot.jade

footer

p Copyright (c) foobar

調用 index.jade 的結果：

<!doctype html>
<html>
  <head>
    <title>我的網站</title>
    <script src='/javascripts/jquery.js'></script>
    <script src='/javascripts/app.js'></script>
  </head>
  <body>
    <h1>我的網站</h1>
    <p>歡迎來到我的網站。</p>
    <div id="footer">
      <p>Copyright (c) foobar</p>
    </div>
  </body>
</html>

模板引用 (Extends)

通過 Extends 可以引用外部的 jade 塊，感覺比 include 要好用

layout.jade

doctype html
html
  head
    title 我的網站
    meta(http-equiv="Content-Type",content="text/html; charset=utf-8")
    link(type="text/css",rel="stylesheet",href="/css/style.css")
    script(src="/js/lib/jquery-1.8.0.min.js",type="text/javascript")
  body
    block content

article.jade

//- extends 拓展調用 layout.jade
extends ../layout
block content
  h1 文章列表
  p 習近平憶賈大山 李克強:將啓動新核電項目
  p 朴槿惠:"歲月號"船長等人棄船行爲等同於殺人
  p 普京疑換膚：眼袋黑眼圈全無 領導人整容疑雲
  p 世界最大兔子重45斤長逾1米 1年吃2萬元食物

res.render(‘article’) 的結果：

<html>
  <head>
    <title>我的網站</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
    <link type="text/css" rel="stylesheet" href="/css/style.css"></head>
    <script src="/js/lib/jquery-1.8.0.min.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>文章列表</h1>
    <p>習近平憶賈大山 李克強:將啓動新核電項目</p>
    <p>朴槿惠:"歲月號"船長等人棄船行爲等同於殺人</p>
    <p>普京疑換膚：眼袋黑眼圈全無 領導人整容疑雲</p>
    <p>世界最大兔子重45斤長逾1米 1年吃2萬元食物</p>
  </body>
</html>