Jade模板引擎教程
一、簡(jiǎn)介
jade是超高性能的node JavaScript模板引擎,有著非常強(qiáng)大的API和大量杰出的特性。它主要針對(duì)node的服務(wù)端。
下面是它的一些特性
●?客戶端支持
●?代碼高可讀
●?靈活的縮進(jìn)
●?塊展開(kāi)
●?混合
●?靜態(tài)包含
●?屬性改寫(xiě)
●?安全,默認(rèn)代碼是轉(zhuǎn)義的
●?運(yùn)行時(shí)和編譯時(shí)上下文錯(cuò)誤報(bào)告
●?命令行下編譯jade模板
●?html 5 模式 (使用 !!! 5 文檔類型)
●?在內(nèi)存中緩存(可選)
●?合并動(dòng)態(tài)和靜態(tài)標(biāo)簽類
●?可以通過(guò) filters 修改樹(shù)
●?模板繼承
●?原生支持 Express JS
●?通過(guò) each 枚舉對(duì)象、數(shù)組甚至是不能枚舉的對(duì)象
●?塊注釋
●?沒(méi)有前綴的標(biāo)簽
●?AST filters
●?過(guò)濾器
? ? ●?:sass 必須已經(jīng)安裝sass.js
? ? ●?:less 必須已經(jīng)安裝less.js
? ? ●?:markdown 必須已經(jīng)安裝markdown-js 或者node-discount
? ? ●?:cdata
? ? ●?:coffeescript 必須已經(jīng)安裝coffee-script
●?Vim Syntax
●?TextMate Bundle
●?Screencasts
●?html2jade 轉(zhuǎn)換器
jade中,分清什么是靜態(tài)的,什么是動(dòng)態(tài)的
?●? 靜態(tài)的原封不動(dòng)的表現(xiàn)在html中,動(dòng)態(tài)的會(huì)轉(zhuǎn)換表現(xiàn)
?●? js代碼會(huì)執(zhí)行,js表達(dá)式會(huì)取值,標(biāo)簽會(huì)轉(zhuǎn)換,文本直接輸出
?? ? ? ??○?標(biāo)簽后是文本,文本可以單行和多行
?? ? ? ??○?文本中可嵌入jade表達(dá)式;使用#{},里面是后臺(tái)js表達(dá)式
?? ? ? ??○?-開(kāi)頭的,隨后是后臺(tái)js代碼
? ? ? ? ?○?幾個(gè)特定的jade關(guān)鍵詞,例如循環(huán)控制等,隨后的都是后臺(tái)表達(dá)式
? ? ? ? ?○?html標(biāo)簽緊跟著=,后面的是js表達(dá)式
jade中,分清什么是標(biāo)簽、文本和代碼
?●?jade的任何一段文本,都要區(qū)分是標(biāo)簽、文本和代碼
?●?jade以-開(kāi)頭的,隨后是后臺(tái)js代碼
?●?jade的格式總體是標(biāo)簽+文本,有三種
? ? ?○?標(biāo)簽(縮進(jìn)) :隨后的縮進(jìn)是文本
? ? ?○?標(biāo)簽=(縮進(jìn)):隨后的縮進(jìn)是js表達(dá)式
? ? ?○?標(biāo)簽. : 隨后的多行縮進(jìn)都是文本,不必使用|
●jade的多行文本每行以|開(kāi)頭
●jade的多行文本,每行又可以交叉使用=或者-(有bug)
二、安裝jade
通過(guò) npm安裝:
npm install -g jade
執(zhí)行上面的命令,全局安裝。
三、一個(gè)簡(jiǎn)單的例子
在D盤(pán)下創(chuàng)建一個(gè)myproject目錄。
通過(guò)命令行進(jìn)入該目錄下執(zhí)行: ?express 創(chuàng)建一個(gè)express項(xiàng)目(默認(rèn)創(chuàng)建的是jade的)
完整的目錄結(jié)構(gòu):
package.json的內(nèi)容為
{"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的內(nèi)容為
extends layoutblock contenth1= titlep Welcome to #{title}
測(cè)試:
先安裝依賴:npm install
再運(yùn)行項(xiàng)目: npm start
訪問(wèn):?http://localhost:3000/
修改index.jade為
index.js修改為
重新啟動(dòng)項(xiàng)目,刷新瀏覽器,輸入如下
完整的demo:?http://download.csdn.net/detail/u011781521/9707783
四、Jade語(yǔ)法規(guī)則
官方文檔:?https://pugjs.org/api/getting-started.html
文檔聲明和頭尾標(biāo)簽的定義在jade中直接使用向下面的語(yǔ)法
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.標(biāo)簽
默認(rèn)情況下,在一行的開(kāi)頭的文本(或空格后)代表了一個(gè)HTML標(biāo)簽??s進(jìn)標(biāo)記嵌套,形成樹(shù)形結(jié)構(gòu)的HTML。
在 Jade 中創(chuàng)建一個(gè)列表:
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 標(biāo)簽必須被正確地關(guān)閉
img
生成的 HTML:
<img/>
2.1塊擴(kuò)張
為了節(jié)省空間,jade為嵌套標(biāo)簽提供了一個(gè)內(nèi)聯(lián)的語(yǔ)法。
a: img
生成的 HTML:
<a><img/></a>
2.2自關(guān)閉的標(biāo)簽
標(biāo)簽,比如img,元,和鏈接會(huì)自動(dòng)自閉(除非你使用XML文檔類型)。你也可以顯式地自我關(guān)閉標(biāo)簽通過(guò)附加/字符。
foo/
foo(bzr='baz')/
生成的 HTML:
<foo/>
<foo bar= />
3.注釋
Jade 支持兩種注釋:單行注釋和多行注釋。每種注釋支持兩種模式:輸出到源文件和不輸出到源文件。
在 Jade 中創(chuàng)建一個(gè)單行輸出注釋和單行不輸出注釋:
// 這個(gè)單行注釋會(huì)輸出到編譯后的文件中
p 單行輸出注釋
//- 這個(gè)單行注釋不會(huì)輸出到編譯后的文件中
p 單行不輸出注釋
生成的 HTML:
<!-- 這個(gè)單行注釋會(huì)輸出到編譯后的文件中-->
<p>單行輸出注釋</p>
<p>單行不輸出注釋</p>
由上可見(jiàn),輸出和不輸出的差別就在于多了一個(gè) -
相比起單行注釋,多行注釋的內(nèi)容要在注釋符號(hào)的下一行,以相同的縮進(jìn)來(lái)編寫(xiě)。多行注釋的輸出和不輸出模式和單行注釋相同,需要使用 - 標(biāo)記:
//?
這個(gè)多行注釋會(huì)輸出到編譯后的文件中
這個(gè)多行注釋會(huì)輸出到編譯后的文件中
p 多行輸出注釋
//-?
這個(gè)多行注釋不會(huì)輸出到編譯后的文件中
這個(gè)多行注釋不會(huì)輸出到編譯后的文件中
p 多行不輸出注釋
生成的 HTML:
<!--?
這個(gè)多行注釋會(huì)輸出到編譯后的文件中
這個(gè)多行注釋會(huì)輸出到編譯后的文件中
-->
<p>多行輸出注釋</p>
<p>多行不輸出注釋</p>
4.屬性
在 Jade 中填寫(xiě)屬性,基本上和 HTML 保持了一致:
input(type='checkbox', checked)
input(
? type='checkbox'
? name='agreement'
? checked
)
生成的 HTML:
<input type="checkbox" checked>
<input type="checkbox" name="agreement" checked>
還可以根據(jù)條件設(shè)置屬性
- 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">
對(duì)于頻繁使用到的類名和 ID 名,Jade 提供了兩種字面量:類名字面量和 ID 字面量——非常類似 Emmet 的用法。
如果不在字面量前邊指定標(biāo)簽名,則默認(rèn)使用 div :
.link
a.link
#button
a#button
生成的 HTML:
<div class="link"></div>
<a class="link"></a>
<div id="button"></div>
<a id="button"></a>
另一個(gè)常常會(huì)被 JavaScript 修改的屬性就是 style 。為了更方便地修改該屬性,Jade 接收一個(gè)類似 JavaScript 對(duì)象類型的參數(shù):
a(style={color: 'red', background: 'green'})
生成的 HTML:
<a style="color:red;background:green"></a>
為了更方便地添加其他自定義屬性,jade 特意增加了一個(gè)語(yǔ)法格式 &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 支持三種文本輸出方式:單行文本、管道文本和多行文本:
// 單行文本內(nèi)容直接跟在標(biāo)簽名后面
p 這里是單行文本內(nèi)容
// 管道文本使用管道符
p?
| 這是一行管道文本,行數(shù)無(wú)限制
| 這是一行管道文本,行數(shù)無(wú)限制
| 這是一行管道文本,行數(shù)無(wú)限制
| ……
// 多行文本需要在標(biāo)簽名后添加點(diǎn)號(hào)
p.
這是多行文本,注意縮進(jìn)
這是多行文本,注意縮進(jìn)
這是多行文本,注意縮進(jìn)
生成的 HTML:
<!-- 單行文本內(nèi)容直接跟在標(biāo)簽名后面-->
<p>這里是單行文本內(nèi)容</p>
<!-- 管道文本使用管道符-->
<p>
? 這是一行管道文本,行數(shù)無(wú)限制
? 這是一行管道文本,行數(shù)無(wú)限制
? 這是一行管道文本,行數(shù)無(wú)限制
? ……
</p>
<!-- 多行文本需要在標(biāo)簽名后添加點(diǎn)號(hào)-->
<p>
? 這是多行文本,注意縮進(jìn)
? 這是多行文本,注意縮進(jìn)
? 這是多行文本,注意縮進(jìn)
</p>
6.代碼嵌入
將 JavaScript 嵌入到 Jade 中,一共有三種方法。第一種方式是使用 - ,代碼中的特殊字符不會(huì)被轉(zhuǎn)義:
- for (var x = 0; x < 3; x++)
? li <a></a>
生成的 HTML:
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
第二種方法是使用 = ,代碼中的特殊字符將會(huì)被轉(zhuǎn)義:
p
? = 'This code is <escaped>!'
生成的 HTML:
<p>This code is <escaped>!</p>
第三種方法是使用 != ,代碼中的特殊字符不會(huì)被轉(zhuǎn)義:
p
? = 'This code is <escaped>!'
生成的 HTML:
<p>This code is <escaped>!</p>
7.條件語(yǔ)句
if ... else if ... else 這個(gè)經(jīng)典的條件判斷,它也是 Jade 最基本的條件語(yǔ)句:
- 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 還提供了一個(gè) unless 條件語(yǔ)句。如果說(shuō) if 可以通過(guò)判斷 給定條件是否符合要求 來(lái)執(zhí)行下一步,那么 unless 完全是相反的一件事,它會(huì)判斷 給定條件是否不符合要求 ,如果不符合,就執(zhí)行下一步。
- var con = false
unless con
? p Hello, World
生成的 HTML:
<p>Hello, World</p>
8.分支語(yǔ)句
當(dāng)需要 if 判斷的條件過(guò)多時(shí),其他語(yǔ)言會(huì)提供類似 switch 的分支判斷語(yǔ)句。在 Jade 中,也提供了類似的語(yǔ)法—— 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 中并沒(méi)有提供類似 break 的語(yǔ)法,對(duì)于所有的條件默認(rèn)只有一種輸出結(jié)果,如果沒(méi)有符合條件的就輸出 defualt 中的內(nèi)容。但是,有一個(gè)特例:
- var friends = 0
case friends
? when 0
? when 1
? default
? ? p you have #{friends} friends
生成的 HTML:
<p>you have very 0 friends</p>
9.遍歷語(yǔ)句
Jade 使用 each 對(duì)數(shù)組和對(duì)象遍歷,用法與 JavaScript 大同小異。
// 遍歷數(shù)組
ul
? each val, index in ['zero', 'one', 'two']
? ? li= index + ': ' + val
// 遍歷對(duì)象
ul
? each val, index in {1:'one',2:'two',3:'three'}
? ? li= index + ': ' + val
生成的 HTML:
<!-- 遍歷數(shù)組-->
<ul>
? <li>0: zero</li>
? <li>1: one</li>
? <li>2: two</li>
</ul>
<!-- 遍歷對(duì)象-->
<ul>
? <li>1: one</li>
? <li>2: two</li>
? <li>3: three</li>
</ul>
10.循環(huán)語(yǔ)句
Jade 使用 while 實(shí)現(xiàn)循環(huán),用法還是中規(guī)中矩的與 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
實(shí)現(xiàn)高度復(fù)用的另一種方式就是將代碼片段保存到不同文件中,然后在需要的地方導(dǎo)入這些片段,為此,Jade 提供了 include 指令,下面是一個(gè) index 頁(yè)面:
//- 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 來(lái)繼承代碼片段,與 include 本本分分地引用代碼段不同,繼承可以修改代碼片段。
首先,在 layout 頁(yè)面使用 block 標(biāo)識(shí)符,設(shè)置一個(gè)可修改的代碼片段,緊跟 block 標(biāo)識(shí)符之后的是該代碼片段的名字:
//- layout.jade
doctype html
html
? head
? ? block title
? ? ? title Default title
? body
? ? block content
然后,在 index 頁(yè)面繼承 layout ,并可以根據(jù)代碼片段的名字修改相關(guān)代碼:
//- 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>
上述這種繼承方式,會(huì)抹除原來(lái)代碼片段的部分,如果想要追加代碼片段,可以使用 append 和 prepend 指令。 append 用于在原有代碼片段之后追加, prepend 用于在原有代碼片段之前追加。一個(gè)初始頁(yè)面:
//- 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>
總結(jié)
以上是生活随笔為你收集整理的Jade模板引擎教程的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 底层逻辑 MATLAB 的句柄是什么
- 下一篇: JAVA NIO 实现群聊