1. 理解

pug是一款健壯、靈活、功能豐富的HTML模板引擎,專門為 Node.js 平臺開發。Pug是由Jade 改名而來。

是一種通過縮進(表示標簽間的嵌套關系)的方式來編寫代碼的過程，在編譯的過程中，不需要考慮標簽是否閉合的問題。可以加快寫代碼速度，也為代碼復用提供了便捷。

2. 命令行

將pug格式轉化為HTML的時候輸入命令pug -P xxx.pug

自動更新 pug -P -w xxx.pug

有自定義目錄的需求，則需要設置-o參數

3. 結構語法

結構語法：

1.?標簽：HTML 代碼的樹狀結構

2.?屬性：緊跟著標簽寫在括號里，用,隔開(不加逗號也是允許的)，class和id可以直接寫在元素后面，例如#pug.pug表示的就是一個div標簽

3. 內容：

????a. 直接在標簽后面加文本，注意文本和標簽之間要有空格?

?? b. 在標簽的下一行，對每一行內容前面加管道符號(|)

?? c. 大的純文本塊只需要在標簽后面緊接一個點?. (在標簽和點之間不要有空格)。塊內的純文本內容必須縮進一層

??? 注意：空格控制

Pug 刪掉縮進，以及所有元素間的空格。

Pug?保留符合以下條件的元素內的空格：

一行文本之中所有中間的空格；

在塊的縮進后的開頭的空格；

一行末尾的空格；

純文本塊、或者連續的管道文本行之間的換行。

4. 注釋：

//? 單行注釋?

//-? 非緩沖注釋

//(換行) 給模板寫的塊注釋

<!–[if IE 8]> … <![endif]–>? 條件注釋

5.?變量

(1).變量賦值：

? ?– var text = pug

?? 調用：

????[內容變量] ：div=text或div#{text}

????[屬性賦值]：value=text

(2). 變量獲取：

a. 命令行直接賦值 pug ./views/index.pug -P -w –obj “{‘text’:’pug’}”

b. 新建一個JSON文件，寫入{“text”:”study pug”}，然后通過命令行

pug ./views/index.pug -P -w -O ./views/text.json

(3).變量轉義

? ? ? 轉義div #{cont} 或 ?div=cont

? ? ? 不轉義 div!=cont 或 div !{cont}

? ? ? 輸出原內容div \#{cont} 或 ?div \！{cont}

6. 循環

a.?for循環:?必須加 – 標識

b.?each循環：–?標識可以省略, each value,key in test中的value和key不能換位置

c.?while 循環

d.?條件循環：if else 判斷 和 case 判斷

7. mixin混入

是一種允許您在 Pug 中重復使用一整個代碼塊的方法。

//mixin 定義

mixintest

???p study pug

//mixin 調用

+test

可傳參數、嵌套、內聯代碼塊、傳遞屬性(有兩種方法，第一種可以通過p(class=attributes.class)取到特定的屬性，第二種可以通過p&attributes(attributes)取到全部的屬性)、傳遞不確定數量的參數(用…items 表示)

8.?include包含

解決的是文件和文件之間，文件和區塊之間代碼復用的問題，可以引入.pug和原生的.html文件(記得帶上后綴)。

9.?繼承與擴展

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

//父文件.pug

block test

???代碼塊1

//子文件.pug

extends 父文件.pug

block test

???代碼塊2

//那在最后輸出的時候應該輸出代碼塊2的內容

總結

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

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