Jade模板引擎教程
一、簡介
jade是超高性能的node JavaScript模板引擎，有著非常強大的API和大量杰出的特性。它主要針對node的服務端。
下面是它的一些特性
●?客戶端支持
●?代碼高可讀
●?靈活的縮進
●?塊展開
●?混合
●?靜態包含
●?屬性改寫
●?安全，默認代碼是轉義的
●?運行時和編譯時上下文錯誤報告
●?命令行下編譯jade模板
●?html 5 模式 (使用 !!! 5 文檔類型)
●?在內存中緩存(可選)
●?合并動態和靜態標簽類
●?可以通過 filters 修改樹
●?模板繼承
●?原生支持 Express JS
●?通過 each 枚舉對象、數組甚至是不能枚舉的對象
●?塊注釋
●?沒有前綴的標簽
●?AST filters
●?過濾器
? ? ●?:sass 必須已經安裝sass.js
? ? ●?:less 必須已經安裝less.js
? ? ●?:markdown 必須已經安裝markdown-js 或者node-discount
? ? ●?:cdata
? ? ●?:coffeescript 必須已經安裝coffee-script
●?Vim Syntax
●?TextMate Bundle
●?Screencasts
●?html2jade 轉換器
jade中，分清什么是靜態的，什么是動態的
?●? 靜態的原封不動的表現在html中，動態的會轉換表現
?●? js代碼會執行，js表達式會取值，標簽會轉換，文本直接輸出
?? ? ? ??○?標簽后是文本，文本可以單行和多行
?? ? ? ??○?文本中可嵌入jade表達式；使用#{}，里面是后臺js表達式
?? ? ? ??○?-開頭的，隨后是后臺js代碼
? ? ? ? ?○?幾個特定的jade關鍵詞，例如循環控制等，隨后的都是后臺表達式
? ? ? ? ?○?html標簽緊跟著=，后面的是js表達式
jade中，分清什么是標簽、文本和代碼
?●?jade的任何一段文本，都要區分是標簽、文本和代碼
?●?jade以-開頭的，隨后是后臺js代碼
?●?jade的格式總體是標簽+文本，有三種
? ? ?○?標簽(縮進) ：隨后的縮進是文本
? ? ?○?標簽=(縮進)：隨后的縮進是js表達式
? ? ?○?標簽. ： 隨后的多行縮進都是文本，不必使用|
●jade的多行文本每行以|開頭
●jade的多行文本，每行又可以交叉使用=或者-（有bug）
二、安裝jade
通過 npm安裝:
npm install -g jade
執行上面的命令，全局安裝。
三、一個簡單的例子
在D盤下創建一個myproject目錄。
通過命令行進入該目錄下執行: ?express 創建一個express項目(默認創建的是jade的)
完整的目錄結構:
package.json的內容為
{"name": "myproject","version": "0.0.0","private": true,"scripts": {"start": "node ./bin/www"},"dependencies": {"body-parser": "~1.15.2","cookie-parser": "~1.4.3","debug": "~2.2.0","express": "~4.14.0","jade": "~1.11.0","morgan": "~1.7.0","serve-favicon": "~2.3.0"} }
views/index.jade的內容為
extends layoutblock contenth1= titlep Welcome to #{title}
測試:
先安裝依賴:npm install
再運行項目: npm start
訪問:?http://localhost:3000/
修改index.jade為
index.js修改為
重新啟動項目,刷新瀏覽器,輸入如下
完整的demo:?http://download.csdn.net/detail/u011781521/9707783
四、Jade語法規則
官方文檔:?https://pugjs.org/api/getting-started.html
文檔聲明和頭尾標簽的定義在jade中直接使用向下面的語法
1.Doctype 文檔類型
常用的有這么幾種格式
doctype html ??
生成的是這種類型 <!DOCTYPE html>
doctype xml ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
<?xml version="1.0" encoding="utf-8" ?>
doctype transitional ? ? ? ? ? ? ? ? ? ? ??
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
doctype strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
doctype frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
2.標簽
默認情況下，在一行的開頭的文本（或空格后）代表了一個HTML標簽。縮進標記嵌套，形成樹形結構的HTML。
在 Jade 中創建一個列表：
ul
? li Item A
? li Item B
? li Item C
生成的 HTML：
<ul>
? <li>Item A</li>
? <li>Item B</li>
? <li>Item C</li>
</ul>
像這種img 標簽必須被正確地關閉
img
生成的 HTML：
<img/>
2.1塊擴張
為了節省空間,jade為嵌套標簽提供了一個內聯的語法。
a: img
生成的 HTML：
<a><img/></a>
2.2自關閉的標簽
標簽,比如img,元,和鏈接會自動自閉(除非你使用XML文檔類型)。你也可以顯式地自我關閉標簽通過附加/字符。
foo/
foo(bzr='baz')/
生成的 HTML：
<foo/>
<foo bar= />
3.注釋
Jade 支持兩種注釋：單行注釋和多行注釋。每種注釋支持兩種模式：輸出到源文件和不輸出到源文件。
在 Jade 中創建一個單行輸出注釋和單行不輸出注釋：
// 這個單行注釋會輸出到編譯后的文件中
p 單行輸出注釋
//- 這個單行注釋不會輸出到編譯后的文件中
p 單行不輸出注釋
生成的 HTML：
<!-- 這個單行注釋會輸出到編譯后的文件中-->
<p>單行輸出注釋</p>
<p>單行不輸出注釋</p>
由上可見，輸出和不輸出的差別就在于多了一個 -
相比起單行注釋，多行注釋的內容要在注釋符號的下一行，以相同的縮進來編寫。多行注釋的輸出和不輸出模式和單行注釋相同，需要使用 - 標記：
//?
這個多行注釋會輸出到編譯后的文件中
這個多行注釋會輸出到編譯后的文件中
p 多行輸出注釋
//-?
這個多行注釋不會輸出到編譯后的文件中
這個多行注釋不會輸出到編譯后的文件中
p 多行不輸出注釋
生成的 HTML：
<!--?
這個多行注釋會輸出到編譯后的文件中
這個多行注釋會輸出到編譯后的文件中
-->
<p>多行輸出注釋</p>
<p>多行不輸出注釋</p>
4.屬性
在 Jade 中填寫屬性，基本上和 HTML 保持了一致：
input(type='checkbox', checked)
input(
? type='checkbox'
? name='agreement'
? checked
)
生成的 HTML：
<input type="checkbox" checked>
<input type="checkbox" name="agreement" checked>
還可以根據條件設置屬性
- var authenticated = true
body(class=authenticated ? 'authed' : 'anon')
- var currentUrl = '/about'
a(class={active: currentUrl === '/'} href='/') Home
a(class={active: currentUrl === '/about'} href='/about') About
生成的 HTML：
<body class="authed"></body>
<a href="/">Home</a><a href="/about" class="active">
對于頻繁使用到的類名和 ID 名，Jade 提供了兩種字面量：類名字面量和 ID 字面量——非常類似 Emmet 的用法。
如果不在字面量前邊指定標簽名，則默認使用 div :
.link
a.link
#button
a#button
生成的 HTML：
<div class="link"></div>
<a class="link"></a>
<div id="button"></div>
<a id="button"></a>
另一個常常會被 JavaScript 修改的屬性就是 style 。為了更方便地修改該屬性，Jade 接收一個類似 JavaScript 對象類型的參數：
a(style={color: 'red', background: 'green'})
生成的 HTML：
<a style="color:red;background:green"></a>
為了更方便地添加其他自定義屬性，jade 特意增加了一個語法格式 &attributes:
- var attributes = {'data-foo': 'bar'};
div#foo(data-bar="foo")&attributes(attributes)
生成的 HTML：
<div id="foo" data-bar="foo" data-foo="bar"></div>
5.文本
Jade 支持三種文本輸出方式：單行文本、管道文本和多行文本：
// 單行文本內容直接跟在標簽名后面
p 這里是單行文本內容
// 管道文本使用管道符
p?
| 這是一行管道文本，行數無限制
| 這是一行管道文本，行數無限制
| 這是一行管道文本，行數無限制
| ……
// 多行文本需要在標簽名后添加點號
p.
這是多行文本，注意縮進
這是多行文本，注意縮進
這是多行文本，注意縮進
生成的 HTML：
<!-- 單行文本內容直接跟在標簽名后面-->
<p>這里是單行文本內容</p>
<!-- 管道文本使用管道符-->
<p>
? 這是一行管道文本，行數無限制
? 這是一行管道文本，行數無限制
? 這是一行管道文本，行數無限制
? ……
</p>
<!-- 多行文本需要在標簽名后添加點號-->
<p>
? 這是多行文本，注意縮進
? 這是多行文本，注意縮進
? 這是多行文本，注意縮進
</p>
6.代碼嵌入
將 JavaScript 嵌入到 Jade 中，一共有三種方法。第一種方式是使用 - ，代碼中的特殊字符不會被轉義：
- for (var x = 0; x < 3; x++)
? li <a></a>
生成的 HTML：
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
第二種方法是使用 = ，代碼中的特殊字符將會被轉義：
p
? = 'This code is <escaped>!'
生成的 HTML：
<p>This code is <escaped>!</p>
第三種方法是使用 != ，代碼中的特殊字符不會被轉義：
p
? = 'This code is <escaped>!'
生成的 HTML：
<p>This code is <escaped>!</p>
7.條件語句
if ... else if ... else 這個經典的條件判斷，它也是 Jade 最基本的條件語句：
- var user = { description: 'foo bar baz' }
- var authorised = false
#user
? if user.description
? ? h2 Description
? ? p.description= user.description
? else if authorised
? ? h2 Description
? ? p.description.
? ? ? User has no description,
? ? ? why not add one...
? else
? ? h1 Description
? ? p.description User has no description
生成的 HTML：
<div id="user">
? <h2>Description</h2>
? <p class="description">foo bar baz</p>
</div>
此外，Jade 還提供了一個 unless 條件語句。如果說 if 可以通過判斷 給定條件是否符合要求 來執行下一步，那么 unless 完全是相反的一件事，它會判斷 給定條件是否不符合要求 ，如果不符合，就執行下一步。
- var con = false
unless con
? p Hello, World
生成的 HTML：
<p>Hello, World</p>
8.分支語句
當需要 if 判斷的條件過多時，其他語言會提供類似 switch 的分支判斷語句。在 Jade 中，也提供了類似的語法—— 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
生成的 HTML：
<p>you have 10 friends</p>
在 Jade 中并沒有提供類似 break 的語法，對于所有的條件默認只有一種輸出結果，如果沒有符合條件的就輸出 defualt 中的內容。但是，有一個特例：
- var friends = 0
case friends
? when 0
? when 1
? default
? ? p you have #{friends} friends
生成的 HTML：
<p>you have very 0 friends</p>
9.遍歷語句
Jade 使用 each 對數組和對象遍歷，用法與 JavaScript 大同小異。
// 遍歷數組
ul
? each val, index in ['zero', 'one', 'two']
? ? li= index + ': ' + val
// 遍歷對象
ul
? each val, index in {1:'one',2:'two',3:'three'}
? ? li= index + ': ' + val
生成的 HTML：
<!-- 遍歷數組-->
<ul>
? <li>0: zero</li>
? <li>1: one</li>
? <li>2: two</li>
</ul>
<!-- 遍歷對象-->
<ul>
? <li>1: one</li>
? <li>2: two</li>
? <li>3: three</li>
</ul>
10.循環語句
Jade 使用 while 實現循環，用法還是中規中矩的與 JavaScript 相似：
- var n = 0
ul
? while n < 4
? ? li= n++
生成的 HTML：
<ul>
? <li>0</li>
? <li>1</li>
? <li>2</li>
? <li>3</li>
</ul>
11.includes
實現高度復用的另一種方式就是將代碼片段保存到不同文件中，然后在需要的地方導入這些片段，為此，Jade 提供了 include 指令，下面是一個 index 頁面：
//- index.jade
doctype html
html
? include ./includes/head.jade
? body
? ? h1 My Site
? ? p Welcome to my super lame site.
? ? include ./includes/foot.jade
head 代碼片段：
//- includes/head.jade
head
? title My Site
? script(src='/javascripts/jquery.js')
? script(src='/javascripts/app.js')
footer 代碼片段：
//- includes/foot.jade
#footer
? p Copyright (c) foobar
生成的 HTML：
<!doctype html>
<html>
? <head>
? ? <title>My Site</title>
? ? <script src='/javascripts/jquery.js'></script>
? ? <script src='/javascripts/app.js'></script>
? </head>
? <body>
? ? <h1>My Site</h1>
? ? <p>Welcome to my super lame site.</p>
? ? <div id="footer">
? ? ? <p>Copyright (c) foobar</p>
? ? </div>
? </body>
</html>
12.繼承
Jade 中使用 extends 來繼承代碼片段，與 include 本本分分地引用代碼段不同，繼承可以修改代碼片段。
首先，在 layout 頁面使用 block 標識符，設置一個可修改的代碼片段，緊跟 block 標識符之后的是該代碼片段的名字：
//- layout.jade
doctype html
html
? head
? ? block title
? ? ? title Default title
? body
? ? block content
然后，在 index 頁面繼承 layout ，并可以根據代碼片段的名字修改相關代碼：
//- index.jade
extends ./layout.jade
block title
? title Article Title
block content
? h1 My Article
生成的 HTML：
<!doctype html>
<html>
? <head>
? ? <title>Article Title</title>
? </head>
? <body>
? ? <h1>My Article</h1>
? </body>
</html>
上述這種繼承方式，會抹除原來代碼片段的部分，如果想要追加代碼片段，可以使用 append 和 prepend 指令。 append 用于在原有代碼片段之后追加， prepend 用于在原有代碼片段之前追加。一個初始頁面：
//- layout.jade
html
? head
? ? title Layout
? body
? ? block content
? ? ? p Hello
使用 append :
extend layout
block append content
? ? p World
生成的 HTML：
<html>
? <head>
? ? <script src="/vendor/jquery.js"></script>
? ? <script src="/vendor/caustic.js"></script>
? </head>
? <body>
? ? <p>Hello</p>
? ? <p>World</p>
? </body>
</html>
使用 prepend ：
extend layout
block prepend content
? ? p World
生成的 HTML：
<html>
? <head>
? ? <script src="/vendor/jquery.js"></script>
? ? <script src="/vendor/caustic.js"></script>
? </head>
? <body>
? ? <p>World</p>
? ? <p>Hello</p>
? </body>
</html>
總結
以上是生活随笔為你收集整理的Jade模板引擎教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 底层逻辑 MATLAB 的句柄是什么
- 下一篇： Bootstrap-CSS全样式