Pug學習
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的內容