1. 理解

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

是一種通過縮進(jìn)(表示標(biāo)簽間的嵌套關(guān)系)的方式來編寫代碼的過程，在編譯的過程中，不需要考慮標(biāo)簽是否閉合的問題?？梢约涌鞂懘a速度，也為代碼復(fù)用提供了便捷。

2. 命令行

將pug格式轉(zhuǎn)化為HTML的時(shí)候輸入命令pug -P xxx.pug

自動(dòng)更新 pug -P -w xxx.pug

有自定義目錄的需求，則需要設(shè)置-o參數(shù)

3. 結(jié)構(gòu)語法

結(jié)構(gòu)語法：

1.?標(biāo)簽：HTML 代碼的樹狀結(jié)構(gòu)

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

3. 內(nèi)容：

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

?? b. 在標(biāo)簽的下一行，對(duì)每一行內(nèi)容前面加管道符號(hào)(|)

?? c. 大的純文本塊只需要在標(biāo)簽后面緊接一個(gè)點(diǎn)?. (在標(biāo)簽和點(diǎn)之間不要有空格)。塊內(nèi)的純文本內(nèi)容必須縮進(jìn)一層

??? 注意：空格控制

Pug 刪掉縮進(jìn)，以及所有元素間的空格。

Pug?保留符合以下條件的元素內(nèi)的空格：

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

在塊的縮進(jìn)后的開頭的空格；

一行末尾的空格；

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

4. 注釋：

//? 單行注釋?

//-? 非緩沖注釋

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

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

5.?變量

(1).變量賦值：

? ?– var text = pug

?? 調(diào)用：

????[內(nèi)容變量] ：div=text或div#{text}

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

(2). 變量獲取：

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

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

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

(3).變量轉(zhuǎn)義

? ? ? 轉(zhuǎn)義div #{cont} 或 ?div=cont

? ? ? 不轉(zhuǎn)義 div!=cont 或 div !{cont}

? ? ? 輸出原內(nèi)容div \#{cont} 或 ?div \！{cont}

6. 循環(huán)

a.?for循環(huán):?必須加 – 標(biāo)識(shí)

b.?each循環(huán)：–?標(biāo)識(shí)可以省略, each value,key in test中的value和key不能換位置

c.?while 循環(huán)

d.?條件循環(huán)：if else 判斷 和 case 判斷

7. mixin混入

是一種允許您在 Pug 中重復(fù)使用一整個(gè)代碼塊的方法。

//mixin 定義

mixintest

???p study pug

//mixin 調(diào)用

+test

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

8.?include包含

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

9.?繼承與擴(kuò)展

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

//父文件.pug

block test

???代碼塊1

//子文件.pug

extends 父文件.pug

block test

???代碼塊2

//那在最后輸出的時(shí)候應(yīng)該輸出代碼塊2的內(nèi)容

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。