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.jade

p hello jade

其上的 jade 模板會被解析成

<p>hello jade</p>

雖然日常咱們修改 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 種方式

• 1. #{表達式}
• 1. =表達式
• 1. !=表達式

注意：符號 - 開頭在 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 != 雷同，聽說前者會編碼字符串，如 <stdio.h> 變成 <stdio.h> 後者不會，不過博主沒試出來不知道什麼狀況。

除了直接在 jade 模板中定義變量，更常見的應用是在 express 中調用 res.render 方法的時候將變量一塊兒傳遞進模板的空間中，例如這樣：

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'

結果：

<h1>Markdown 標題</h1> <p>這裏使用的是 MarkDown 格式</p> <script>console.log('這裏是 coffee script')</script>

可重用的 jade 塊 (Mixins)

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

結果：

<ul> <li>foo</li> <li>bar</li> <li>baz</li> </ul> <ul> <li>foo</li> <li>bar</li> <li>baz</li> </ul>

你也能夠給這個重用塊指定參數

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>

再來搬運一發，原文地址：http://www.lellansin.com/Jade-模板引擎使用.html