html jade文件,Jade模板
Express框架里內嵌了Jade模板引擎。正好項目里也要用到，本篇整理了下Jade的相關用法。
安裝與執行
標簽和屬性
多行文本
變量
語句
Mixin
模板
注釋
過濾器
安裝與執行
安裝很簡單：
npm install jade –global
安裝后本地隨便新建一個sample.jade文件，執行：
jade sample.jade
就能將其翻譯成標準的sample.html源文件了。執行時可以帶上參數，通過jade -h查看支持的命令參數：
常用的命令參數，比如-P(大寫，命令參數是大小寫敏感的)。Jade默認編譯出來的html源文件里是沒有縮進的，不便于開發。加上-P參數后，編譯出來的html源文件里就有縮進了：
jade -P sample.jade
還有-w用來watch監視jade文件，每次改動保存后自動編譯成html文件，省去手動執行命令的麻煩：
jade -P -w sample.jade
-O用來給jade文件傳遞對象或JSON文件，用以替換模板內的變量：
jade -P -w sample.jade -O sample.json
標簽和屬性
傳統的HTML標簽寫尖括號很麻煩，Jade里可以省略尖括號，直接寫標簽名。標簽間的嵌套關系用換行加空格來實現。緊接在標簽名后加上.xx或#xx，就能給標簽添加css類名和id。標簽名后第一個空格后面的內容會被編譯成標簽內的文本內容。例如：
doctype html
html
head
body
h1.titleClass#titleID My First Jade Page
//編譯出來的結果
My First Jade Page
是不是感覺寫起來簡單多了。因為css類名和id是最常用的標簽屬性，所以Jade簡化了它倆的寫法，可以緊接在標簽名后面。但標簽屬性的正統寫法應該是寫入()括號內，多個屬性用逗號隔開(css類名和id也可以寫入()括號內)：
a(href='http://www.jackzxl.net', target='_blank') 我的主頁
//編譯出來的結果
我的主頁
HTML里最常用的標簽就是div了，所以Jade提供了第二種簡化寫法，如果不寫標簽名默認就是div：
.divClass#divID 我是一個div
//編譯出來的結果
我是一個div多行文本
單行文本像上面這樣接在標簽名后的空格后面即可。多行文本有兩種寫法。第一種寫法是在標簽名后緊接一個.點。這樣后面的內容會被Jade模板視作文本域而保留換行符。例如：
p.
第1行文本
第2行文本
第3行文本
第4行文本
//編譯出來的結果
第1行文本
第2行文本
第3行文本
第4行文本
但由于是文本域，因此用這種寫法的話，里面要嵌套標簽時，只能寫原生的HTML標簽了：
p.
第1行文本
第2行文本
第3行文本
第4行文本
//編譯出來的結果
第1行文本
第2行文本
第3行文本
第4行文本
多行文本的第二種寫法是在每行前加上|豎線符。而且如果開發者覺得第一種寫法里寫原生HTML標簽不爽，用這種寫法，可以用Jade語法來嵌套標簽。例如：
p
span 第1行文本
| 第2行文本
| 第3行文本
| 第4行文本
//編譯出來的結果
第1行文本第2行文本
第3行文本
第4行文本
多行文本的寫法不僅可用于p標簽等，也常見于style和script標簽，例如：
script.
console.log("open mind");
console.log("learning quick");
console.log("work hard");
變量
如果僅僅上面這些快速編寫HTML的功能，那Jade也沒必要存在了。各種編輯器都有插件可以實現這種快速編寫的功能，例如sublime的Emmet插件。模板引擎的真正強大之處可以實現函數式的開發。先看變量。
變量聲明很簡單，前面加上-橫杠。使用變量只要#{變量名}就行了。例如：
- var cs = 'UTF-8'
meta(charset='#{cs}')
//編譯出來的結果
但注意用#{}輸出的變量數據會執行HTML轉碼，例如：
- var alertData = ''
p #{alertData}
//編譯出來的結果
原本想被執行的script腳本，被直接作為文本打印出來了。如果不想HTML轉碼，可以將#改成!嘆號：
- var alertData = ''
p !{alertData}
//編譯出來的結果
那如果頁面就想輸出#{}和!{}呢？可以前面加\反斜杠來讓Jade引擎不編譯變量：
p \#{alertData}
p \!{alertData}
//編譯出來的結果
#{alertData}
!{alertData}
除了用#{}和!{}外，也可以在標簽后面緊接=等號(不轉義用!=)來輸出變量。例如：
p= alertData
p!= alertData
效果和上面是一樣的。這兩種寫法#{}和=等號輸出的區別如下：
input(value='#{aaa}')
input(value=aaa)
//編譯出來的結果
可以看出用#{}如果變量未定義，將會編譯成undefined作為初始值。但用=等號來編譯變量的話，如果變量未定義就忽略。
有了變量就能輕松實現前后端分離。數據保存在JSON文件里。前端用Jade模板制作頁面，在需要顯示數據處用變量來實現。例如sample.json文件里：
{
"charset": "UTF-8",
"title": "My First Jade Page"
}
sample.jade文件里：
doctype html
html
head
meta(charset='#{charset}')
body
h1.titleClass#titleID #{title}
執行命令：jade -P -w sample.jade -O sample.json后Jade文件里的變量被自動替換。編譯出來的sample.html：
My First Jade Page
語句
Jade模板支持JavaScript語句：
if-else
unless
case-when
for-in
each-in
while
最常見的if-else：
- var author = 'Jack';
if author
p 作者：#{author}
else
p 無作者
//編譯出來的結果
作者：Jack
Jade還支持unless語句，它是if-else的反向，寫法都一樣，用的不多就不舉例了。
Jade里的case-when語句就是JavaScript里的switch-case語句(不知為何…)：
- var authors = ['Jack', 'Bill'];
case authors[0]
when 'Jack'
p 作者是Jack
when 'Bill'
p 作者是Bill
default
p 無作者
//編譯出來的結果
作者是Jack
循環遍歷用for-in(注意上面的if-else，case-when語句前不用像變量那樣加上-橫杠，但for的前面要加上-橫杠。如果漏寫-橫杠，會被解析為標簽)：
- var person = {name:'Jack', gender: 'Male'}
- for (var prop in person)
p= person[prop]
//編譯出來的結果
Jack
Male
循環遍歷也可以用each-in(each前的-橫杠加不加均可)：
- var employee = {name:'Jack', gender: 'male'}
- each value, key in person
p #{key}: #{value}
- var language = ['Java', 'JavaScript', 'C++']
ul
each item in language
li #{item}
//編譯出來的結果
name: Jack
gender: male
- Java
- JavaScript
- C++
循環遍歷也可以用while(同樣前面加不加-橫杠均可)：
- var n = 0
ul
while n < 4
li= n++
//編譯出來的結果
- 0
- 1
- 2
- 3
Mixin
Mixin也不是個什么新的概念，例如sass里也用Mixin封裝css代碼，即能重用代碼，而且維護簡單。Jade也支持Mixin，可以理解為function，最簡單的無參數的代碼函數：
mixin sayHi
p Hi
+sayHi
//編譯出來的結果
Hi
上面聲明了一個mixin無參函數sayHi，調用時函數名前加上+加號。現在給mixin加上參數：
mixin personInfo(name, hobbies)
p #{name}'s hobbies:
ul.hobby
each hobby in hobbies
li= hobby
+personInfo('Jack', ['movie', 'music'])
//編譯出來的結果
Jack's hobbies:
- movie
- music
函數內自然也可調用其他函數，例如上面兩個函數嵌套起來。這些和普通JavaScript的函數表現一致，沒啥好多介紹的：
mixin personInfo(name, hobbies)
+sayHi
p #{name}'s hobbies:
ul.hobby
each hobby in hobbies
li= hobby
+personInfo('Jack', ['movie', 'music'])
模板
mixin可以實現代碼的復用。文件與文件間常用模板來實現代碼復用。Jade用block和extends來實現模板的繼承。block塊就是定義一段HTML模塊：
block scripts
script(src='jquery.js')
script(src='underscore.js')
script(src='backbone.js')
//編譯出來的結果
上面的塊名就是scripts。定義好的block后，本文件內可以直接用block scripts來調用，這和mixin作用差不多，都能實現代碼復用。但block真正的作用在于占位，供子文件繼承，可以理解為傳統OO語言里的虛函數。父文件里定義的block，子文件里用extends來繼承并重寫。
例如每個文件的頁頭都一樣，就body里內容不一樣，可以寫一個header.jade：
doctype html
html
head
meta(charset='#{charset}')
block scripts
script(src='jquery.js')
script(src='underscore.js')
script(src='backbone.js')
body
block content
p please write content
每個頁面的header都長這樣。而body里定義了block content，這里block可以理解為一個占位符placeholder，需要繼承它的文件重寫block content。
根據業務需求寫頁面主體部分，例如sample.jade改成這樣：
extends header
block content
h1.titleClass#titleID #{title}
a(href='http://www.jackzxl.net', target='_blank') 我的主頁
……
在sample.jade里，開頭用extends表明和header.jade的繼承關系。然后根據業務重寫header.jade里的block content。
執行jade -P -w sample.jade -O sample.json就能看到和之前一模一樣的頁面。引擎加載流程是：解析sample.jade，發現開頭有extends，就去解析header.jade，將其編譯成html。此時html里的body里是
please write content
。解析完header.jade就繼續解析sample.jade，發現block content，于是會將定義在header.jade里的block content替換掉。最終輸出的是正確的頁面內容，而不是please write content
。(但如果你執行的是jade -P -w header.jade -O sample.json會發現body里內容為
please write content
)除繼承外還可以用include包含。Include會將內容無腦全拷貝進去。例如上面的sample.jade第一行extends header改成include header。編譯出來的結果：
please write content
My First Jade Page
我的主頁
可以看出與extends不同，include就是無腦將另一個文件里的內容直接拷貝進去，不像block + extends可以重寫block。所以結果是錯誤的。
小細節注意：include包括extends如果省略后綴名，Jade默認該文件時.jade會進行編譯。但如果另一個文件里寫的是原生的html，需要寫明后綴名為.html(例如include xx.html)，明確告訴Jade不要編譯。
注釋
Jade里加上//就能添加注釋，用雙斜杠的注釋會被輸出到html源碼里。例如：
//一行無意義的注釋
//編譯出來的結果
如果不想在html源碼里輸出注釋，用//-，在雙斜杠后加一橫杠。例如：
//-一行無意義的注釋，編譯時直接跳過該行，不會被輸出到HTML源碼里
我們知道html里還可以寫注釋型的條件語句，常用于兼容IE。Jade里你同樣可以寫這些條件語句，例如將上面header.jade改成能識別IE89，應用不同的class：
doctype html
head
meta(charset='#{charset}')
block scripts
script(src='jquery.js')
script(src='underscore.js')
script(src='backbone.js')
body
block content
p please write content
上面因為有了條件語句，所以html標簽用尖括號括了起來，因此最下面要手動加上來閉合標簽。而且Jade是空格縮進敏感的，需要將原先的head和body包括里面內容，全往前縮進2個空格。
過濾器
Jade同樣兼容其他模塊，例如寫博客愛用的markdown，寫css愛用的less，還有coffeeScript等。只要npm安裝好后，用:冒號+模塊名就能聲明使用這些模塊，例如：
:markdown
...
:less
...
:coffee
...
以:markdown 為例，會把下面塊里的文本交給markdown去進行處理。
總結
以上是生活随笔為你收集整理的html jade文件,Jade模板的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Struts Validator验证器使
- 下一篇： [?]Oracle 10g sqlplu