跟完了Scott老師幾年之前關于node.js、MongoDB建站以及帶你學習Jade模板引擎的視頻，害怕自己忘性太大，寫一個總結記錄一下關于pug的使用方法。

當時老師用的還是jade，現在已經改名為Pug了，內容基本沒有變化，在node中引用模板引擎的時候要記得使用app.set('view engine', 'pug');然后把所有視圖文件的后綴改成.pug。

Pug環境配置

打開項目所在文件夾，shift+右鍵打開命令行，輸入npm install pug -g就可以在全局安裝pug。

但此時如果想在命令行中使用pug命令還是會報錯，提示pug不是內部或者外部命令。

解決方案：使用npm工具安裝pug-cli，npm install pug-cli,就可以在命令行中使用pug命令了。

接下來，為了便于看到pug生成的HTML文檔，可以使用pug -P -w xxx.pug,會自動在xxx.pug文件夾下生成一個xxx.html的文件，-P參數可以讓html文檔變得有可讀性，-w可以實時監控.pug文件的修改，如果有變化就自動更新相應的html文件。常用的還有-o用來指定輸出的html的目錄。

Pug語法

標簽

元素和標簽：比如<div>...</div>是一個標簽，用來標記div這個塊狀元素，元素是由開始和結束標簽，以及其中包含的內容組成的，許多這樣的元素構成了一個html頁面。

pug中不管標簽是不是自閉和的，只用寫元素名就可以，不用關閉，不用寫尖括號。但是一定要注意元素的縮進，pug里面用元素的縮進來表示嵌套結構。

屬性

屬性的語法和CSS是一樣的，緊跟著標簽寫在括號里，用,隔開，class和id比較特殊可以直接拿出來寫在元素后面，例如div#pug.pug對于div來說直接寫#pug.pug表示的就是一個div標簽

內容

有三種常用的格式

一、直接在標簽后面加文本，注意文本和標簽之間要有空格
div(class='pug',id='pug') imooc

二、在標簽的下一行，對每一行內容前面加 |

p| 1.aa| 2.bb| 3.cc| 4.dd

三、在標簽的后面加 . 表示之后的的內容全屬于這個標簽，可以用來添加文字、腳本和樣式，但是.和標簽之前一定不可以有空格

style.body{ color: red}.pug{ width: 200px; height: 200px; border: 1px solid #000}

注：也可以在pug中直接使用尖括號的標簽

p| 1.aastrong 我是尖括號| 2.bb| 3.cc&lt;strong>我是尖括號&lt;/strong>| 4.dd p.1.aa2.bb&lt;strong>我是尖括號&lt;/strong>3.cc4.dd

注釋

一、單行注釋 //：會輸入到html文檔中去
// 我是單行注釋

二、非緩沖注釋 //-：在html文檔中是完全隱藏的
//- 我是非緩沖注釋

三、塊注釋 //-：注釋掉上層元素，就會默認把父元素包含的內容都注釋掉

//-p.1.aa2.bb3.cc4.dd

四、條件注釋：為了兼容IE 比較低的版本，需要加上下面的條件注釋，但要注意如果用了條件注釋，html標簽在節結尾處是需要閉合的。

&lt;!--[if IE 8]>&lt;html class='ie8'>&lt;![endif]>--> &lt;!--[if IE 9]>&lt;html class='ie9'>&lt;![endif]>--> &lt;!--[if !IE]>&lt;!-->&lt;html>&lt;!--&lt;![endif]>--> ... &lt;html>

變量

變量賦值

在pug里面定義變量特別簡單，比如- var text = pug
[內容變量]
在其他地方調用這個變量的時候有兩種方法，可以直接用等號賦值div=text,也可以使用#{ 變量名}的方法，比如div #{text}，如果#{}內部有函數的話，會先執行{}的操作，再將結果輸出，比如div #{text.toUpperCase()}

[屬性賦值]
只能使用“=變量名”的方式進行賦值

變量獲取

正常開發的時候，我們一般是在后臺拿到數據，然后傳遞到這個模板，有兩種方式

第一種是命令行直接賦值pug ./views/index.pug -P -w --obj "{'text':'pug'}"
注意：Windows環境下要求比較苛刻，”“和”的位置一定不要寫反了

第二種是通過JSON文件的方式，我們可以在新建一個JSON文件，寫入{"text":"study pug"}，然后通過命令行pug ./views/index.pug -P -w -O ./views/text.json就可以拿到JSON文件中的數據

注：這里有一點，當外部傳入的參數和.pug文件內部定義的參數同名時，會優先選擇內部參數。

變量轉義

假如變量里面帶有一些特殊符號，在賦值的時候就會被轉義掉，例如定義一個變量：

-var cont = '<strong>Pug 很簡潔</strong><script>alert(pug);</script>'

直接賦值輸出的話，會在頁面上打印出來變量內的內容，如果不想做任何轉義，可以使用，但這樣是非常不安全的

div!=cont div !{cont}

如果我們想在變量里輸出#{，那我們可以在#{之前加一個 \，比如div \#{cont}
！！但是這里有一個問題！！div \#{cont}以及div \！{cont}的輸出內容是一樣的？

循環

for循環：for前面必須加 -標識，如下就可以取出變量的屬性值

- var test={lcation: 'beijing', content: 'jade'} - for (var k in test) p= test[k]

each循環：-標識可以省略，也可以以此定義兩個參數，取出變量的key value值，這里面比較神奇的是，each value,key in test中的value和key不能換位置，否則會出現就去不到正確對應的值

- var test={lcation: 'beijing', content: 'jade'} each item in testp= item each value,key in testp #{key}: #{value}

注意 each之后的標簽要注意縮進，否則會報錯

while循環：

- var n=0 ulwhile (n<5)li=n++

條件

if else判斷：
if-else的語法和JS原生代碼基本一致，if和else前面的 -可以省略，判斷主體上的括號也可以省略，寫起來非常的方便，也支持unless，不過我覺得那個用起來沒有if-else順手

case判斷：

case 變量名when a代碼塊when b: 代碼塊default： 代碼塊

mixin重用

mixin定義和調用：

//mixin 定義 mixin testp study pug //mixin 調用 +test +test

mixin傳遞參數：

mixin嵌套：

mixin內聯代碼塊：
下面block中代碼塊就指+test下面的內容，如果有內容，就將代碼塊直接放在block的位置，如果沒有代碼塊就執行…所表示的代碼

mixin testif block blockelse... +testp= 'aaa' +test

mixin傳遞屬性：有兩種方法，第一種可以通過p(class=attributes.class)取到特定的屬性，第二種可以通過p&attributes(attributes)取到全部的屬性。使用的時候需要注意+test(參數)(屬性)

mixin傳遞不確定數量的參數：在聲明mixin的時候加入參數數量不確定，可以用…items來表示，調用的時候正常帶入參數就可以了

包含和繼承

include包含：解決的是文件和文件之間，文件和區塊之間代碼復用的問題，可以引入.pug和原生的.html文件。當引入的是.html文件時，一定要記得帶上后綴。

block繼承：解決的是子文件和父文件之間的代碼復用問題，子文件的代碼可以覆蓋和擴展父文件的代碼

//父文件.pug block test代碼塊1 //子文件.pug extends 父文件.pug block test代碼塊2 //那在最后輸出的時候應該輸出代碼塊2的內容

在上面圖片里面，定義了三個block：scripts、content和footer。
對于footer，沒有在index.pug中進行引用，但是生成的index.html中卻能看到，也就是說如果子文件沒有對父文件的block進行修改，那就是默認引用
對于content，index.html中輸出的是在index.pug中修改的內容，所有說如果子文件引用了父文件的block，那么就會用自己的覆蓋掉繼承過來的內容
對于scripts，如果你只想在父文件中內容的基礎上添加一點內容，那就可以考慮使用prepend和append，分別是向block的頂部和底部插入內容，使用它們時可以省略關鍵字block。

總結

以上是生活随笔為你收集整理的Pug学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

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