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的內容