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

编程问答

html jade文件,Jade模板

發布時間：2025/3/15 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 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模板視作文本域而保留換行符。例如：

第1行文本

第2行文本

第3行文本

第4行文本

//編譯出來的結果

第1行文本

第2行文本

第3行文本

第4行文本

但由于是文本域，因此用這種寫法的話，里面要嵌套標簽時，只能寫原生的HTML標簽了：

第1行文本

第2行文本

第3行文本

第4行文本

//編譯出來的結果

第1行文本

第2行文本

第3行文本

第4行文本

多行文本的第二種寫法是在每行前加上|豎線符。而且如果開發者覺得第一種寫法里寫原生HTML標簽不爽，用這種寫法，可以用Jade語法來嵌套標簽。例如：

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++']

each item in language

li #{item}

//編譯出來的結果

name: Jack

gender: male

Java
JavaScript
C++

循環遍歷也可以用while(同樣前面加不加-橫杠均可)：

- var n = 0

while n < 4

li= n++

//編譯出來的結果

Mixin

Mixin也不是個什么新的概念，例如sass里也用Mixin封裝css代碼，即能重用代碼，而且維護簡單。Jade也支持Mixin，可以理解為function，最簡單的無參數的代碼函數：

mixin sayHi

p Hi

+sayHi

//編譯出來的結果

上面聲明了一個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