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的內容
總結
- 上一篇： HTML第七章作业
- 下一篇： linux stm32 虚拟串口驱动安装