當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jade模板引擎入门教程

發布時間：2024/8/1 编程问答 52 豆豆

生活随笔收集整理的這篇文章主要介紹了 jade模板引擎入门教程小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Jade是一款高性能簡潔易懂的模板引擎，Jade是Haml的Javascript實現，在服務端（NodeJS）及客戶端均有支持。

Jade是一款高性能簡潔易懂的模板引擎，Jade是Haml的Javascript實現，在服務端（NodeJS）及客戶端均有支持。功能客戶端支持超強的可讀性靈活易用的縮進塊擴展代碼默認經過編碼處理以增強安全性編譯及運行時的上下文錯誤報告命令行編譯支持 HTML5模式（使用!!!5文檔類型）可選的內存緩存聯合動態和靜態標記類利用過濾器解析樹的處理

功能

客戶端支持
超強的可讀性
靈活易用的縮進
塊擴展
代碼默認經過編碼處理以增強安全性
編譯及運行時的上下文錯誤報告
命令行編譯支持
HTML5模式（使用!!!5文檔類型）
可選的內存緩存
聯合動態和靜態標記類
利用過濾器解析樹的處理
支持 Express JS
利用each透明的循環objects,arrays甚至不可枚舉對象
塊注釋
不需要標記前綴
AST過濾器
過濾器
- :sass 需要安裝 sass.js
- :less 需要安裝 less.js
- :markdown 需要安裝 markdown-js 或 node-discount
- :cdata
- :coffeescript 需要安裝 coffee-script
Vim語法文件
TextMate包
Screencasts

其它語言實現

php
Scala
Ruby

安裝

通過npm：

npm install jade

瀏覽器支持

可以通過下面命令將jade編譯為客戶端瀏覽器兼容的文件：

$ make jade.js

或者，如果你已經通過npm安裝了uglifyjs（npminstalluglify-js），可以通過下面的命令同時創建兩個文件：

$ make jade.min.js

公開API

Options

scope 執行作用域（this）
locals 本地變量對象
filename 處理異常及緩存時使用
cache 通過文件名將Javascript緩存在內存中
debug 輸出生成的標記和函數體
compiler 替換jade默認編譯引擎

語法

行尾

在解析前會將 CRLF 和 CR 轉換為 LF.

標記

標記是一行的第一個單詞：

html

會被轉換為?<html></html>

標記也可以有id：

div#container

這將被渲染成<div id="container"></div>

如何處理類？

div.user-details

渲染為:?<div class="user-details"></div>

多個class？并且還有id？

div#foo.bar.baz

渲染為：<div id="foo" class="bar baz"></div>

總寫div確實很煩人，可以省略之：

#foo .bar

輸出：?<div id="foo"></div><div class="bar"></div>

標記文本

只需要將文本內容放在標記后面：

p wahoo!

渲染為?<p>wahoo!</p>.

酷，但是如何處理大段文本呢？

p| foo bar baz| rawr rawr| super cool| go jade go

渲染為?<p>foo bar baz rawr.....</p>

內插法？是的，這兩種類型的文本都可以使用內插法，如果我們傳入{ locals: { name: '一回', email: 'xianlihua[at]gmail.com' }}，可以這樣做：

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

輸出：<div id="user">一回 <xianlihua[at]gmail.com></div>

出于某種原因需要輸出#{}？轉義之：

p \#{CSSer, 關注Javascript技術}

這樣就得到了：<p>#{CSSer, 關注Javascript技術}</p>

也可以使用反轉義變量!{html}，下面的代碼將輸出script標記：

- var html = "<script></script>" | !{html}

包含文本的嵌套標記也可以使用文本塊：

label| Username:input(name='user[name]')

或者直接使用標記文本:

label Username:input(name='user[name]')

只接受純文本的標記，如script,style,以及textarea不需要開頭的|字符，例如：

htmlheadtitle CSSer, 關注Web前端技術scriptif (foo) {bar();} else {baz();}

再次作為替代方案，我們可以使用點號'.'來表示一個文本塊，例如：

p.foo asdfasdfasdfasdfafasdfasd.

輸出:

<p>foo asdfasdfasdfasdfafasdfasd.</p>

如果點號'.'與標記之間有空格，Jade解析其會忽略它，將其作為文本處理：

p .

輸出:

注釋

單行注釋當前看起來與Javascript一致，即“//”，單行注釋的內容必須放在同一行上：

// 一些段落 p foo p bar

將會輸出：

<p>foo</p> <p>bar</p>

Jade也支持非緩沖注釋，只需增加一個橫杠：

//- 該行注釋將不會被輸出到解析后的頁面中 p foo p bar

輸出：

塊注釋

塊注釋會依據縮進進行處理：

body//#contenth1 CSSer,關注Web前端技術

輸出：

<body> </body>

Jade也支持條件注釋，例如：

body/if IEa(href='http://www.mozilla.com/en-US/firefox/') Get Firefox

輸出:

<body> </body>

嵌套

Jade支持通過嵌套來以自然的方式定義標記：

ulli.firsta(href='#') foolia(href='#') barli.lasta(href='#') baz

塊擴展

塊擴展允許創建單行的簡潔嵌套標記，下面的示例與上例輸出相同：

ulli.first: a(href='#') fooli: a(href='#') barli.last: a(href='#') baz

特性

目前Jade支持'('和')'的特性定界符。

a(href='/login', title='View login page') Login

另外我們也可以使用冒號（:）來作為分割符：

a(href: '/login', title: '注冊成為CSSer.com會員') Login

Boolean特性也被支持：

input(type="checkbox", checked)

值為變量的Boolean特性只有在值為true時輸出：

input(type="checkbox", checked: someValue)

分拆在多行也能正常解析：

input(type='checkbox',name='agreement',checked)

文檔類型

利用!!!來增加頁面的文檔類型：

!!!

將會輸出過渡型文檔類型，然而：

!!! 5

將會輸出HTML5的文檔類型，下面是默認定義的文檔類型，這也可以很容易的被擴展：

var doctypes = exports.doctypes = {'5': '<!DOCTYPE html>','xml': '<?xml version="1.0" encoding="utf-8" ?>','default': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">','transitional': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">','strict': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">','frameset': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">','1.1': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">','basic': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">','mobile': '<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">' };

要修改默認值只需改變：

jade.doctypes.default = 'whatever you want';

過濾器

過濾器以冒號（:）作為前綴，如 :markdown 將會對文本進行函數處理，（一回注：類似Smarty的變量調節器），本頁開始處列出了目前Jade支持的過濾器。

body:markdownWoah! jade _and_ markdown, very **cool**we can even link to [CSSer](http://www.csser.com)

渲染后:

<body><p>Woah! jade <em>and</em> markdown, very <strong>cool</strong> we can even link to <a href="http://www.csser.com">CSSer</a></p></body>

過濾器也可以處理解析樹，通常過濾器可以正常處理文本塊，但是通過傳入規則的塊過濾器可以做任何它能做的。

bodyconditionals:if role == 'admin'p You are amazingelsep Not so amazing

代碼

Jade目前支持三種類型的可執行代碼，第一種以-為前綴，不會被緩沖：

- var foo = 'bar';

這可被用于條件或循環：

- for (var key in obj)p= obj[key]

由于Jade的緩沖技術，下面的代碼是有效的：

- if (foo)ulli yayli fooli worked - elsep oh no! you are not in csser.com

甚至詳細的迭代循環：

- if (items.length)ul- items.forEach(function(item){li= item- })

任何你希望的都可以實現！

接下來我們轉義了緩沖代碼，用于緩沖返回值，以等號（=）作為前綴：

- var foo = 'bar' = foo h1= foo

輸出： bar<h1>bar</h1>. 被'='緩沖的代碼會默認經過轉義以增強安全性，要輸出為轉義的值需要使用 !=：

p!= aVarContainingMoreHTML

一個允許使用"vanilla"Javascript的例外，是 - each 標記，其表現形式為：

- each VAL[, KEY] in OBJ

實現循環數組的例子：

- var items = ["one", "two", "three"] - each item in itemsli= item

輸出:

<li>one</li> <li>two</li> <li>three</li>

循環對象的鍵和值：

- var obj = { foo: 'bar' } - each val, key in objli #{key}: #{val}

這會輸出?<li>foo: bar</li>

也可以進行嵌套循環：

- each user in users- each role in user.rolesli= role

當一個屬性為undefined，Jade會輸出空串，例如：

textarea= user.signature

近期的Jade版本會輸出空字符串而不是undefined：

命令行工具：bin/jade

輸出html到標準輸出（stdout）：

jade examples/*.jade --pipe

生成 examples/*.html ：

jade examples/*.jade

傳入參數：

jade examples/layout.jade --options '{ locals: { title: "CSSer" }}'

[完]

總結

以上是生活随笔為你收集整理的jade模板引擎入门教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。