Pug指南
如何使用Pug模板引擎
- Pug介紹
- Pug長什麼樣子?
- 安裝Pug
- 設置Pug作為Express的模板引擎
- 你的第一個Pug模板
- 在Pug中插入變量
- 插入函數返回值
- 為元素添加id和class屬性
- 設置doctype
- Meta標籤
- 添加腳本和樣式
- 內聯腳本
- 循環
- 條件語句
- 設置變量
- 增加變量的值
- 將變量賦值給元素值
- 迭代變量
- 包含其他Pug文件
- 定義塊
- 擴展基礎模板
- 注釋
Pug介紹
什麼是Pug?它是一個用於服務端Node.js應用程序的模板引擎。
Express有能力處理服務端模板引擎。模板引擎允許我們將數據添加到視圖中,動態生成HTML。
Pug是一個舊東西的新名字。它是Jade 2.0。
由於商標問題,當該項目在2016年發布2.0版本時,名稱從Jade更改為Pug。您仍然可以使用Jade(又名Pug 1.0),但未來最好使用Pug 2.0。
也可以參考Jade和Pug之間的差異
Express使用Jade作為默認的模板引擎。如上所述,Jade是Pug的舊版本 - 具體而言是Pug 1.0。
儘管Jade的最後一個版本已經是3年前(在撰寫本文時,2018年夏季),但出於向後兼容的原因,它仍然是Express的默認版本。
Pug的官方網站是https://pugjs.org/。
Pug長什麼樣子?
1 | p 您好,來自Flavio |
此模板將創建一個內容為“您好,來自Flavio”的p
標簽。
如您所見,Pug非常特殊。它將標簽名作為行中的第一個內容,其餘內容作為標簽中的內容。
如果您習慣使用使用HTML並插入變量的模板引擎(例如Handlebars,下面將進行介紹),您可能會遇到問題,尤其是當您需要將現有的HTML轉換為Pug時。這款將HTML轉換為Jade(非常相似,但與Pug稍有不同)的在線轉換器將非常有幫助:https://jsonformatter.org/html-to-jade
安裝Pug
安裝Pug非常簡單,只需運行npm install
:
1 | npm install pug |
設置Pug作為Express的模板引擎
在初始化Express應用程序時,我們需要設置它:
1 | const path = require('path') |
您的第一個Pug模板
創建一個名為about的視圖:
1 | app.get('/about', (req, res) => { |
並在views/about.pug
中使用以下模板:
1 | p 您好,來自Flavio |
此模板將創建一個內容為“您好,來自Flavio”的p
標簽。
在Pug中插入變量
您可以使用以下方式插入變量:
1 | app.get('/about', (req, res) => { |
1 | p 您好,#{name} |
插入函數返回值
您可以使用以下方式插入函數返回值:
1 | app.get('/about', (req, res) => { |
1 | p 您好,#{getName()} |
為元素添加id和class屬性
1 | p#title |
設置doctype
1 | doctype html |
Meta標籤
1 | html |
添加腳本和樣式
1 | html |
內聯腳本
1 | script alert('test') |
循環
1 | ul |
條件語句
1 | if name |
else-if也可以使用:
1 | if name |
另一個示例:
1 | if users.length > 2 |
設置變量
您可以在Pug模板中設置變量:
1 | - var name = 'Flavio' |
增加變量的值
您可以使用++
遞增數字變量:
1 | age++ |
將變量賦值給元素值
1 | p= name |
1 | span.age= age |
迭代變量
您可以使用for
或each
,它們是可以互換的,沒有什麼區別:
1 | for dog in dogs |
1 | ul |
您可以使用.length
獲取項目的數量:
1 | p 有#{values.length}個項目 |
while
是另一種類型的循環:
1 | - var n = 0; |
包含其他Pug文件
在Pug文件中,您可以包含其他Pug文件:
1 | include otherfile.pug |
定義塊
良好組織的模板系統將定義一個基礎模板,然後所有其他模板將從基礎模板擴展出來。
可以使用塊來擴展模板的某一部分:
1 | html |
在本例中,一部分模板使用塊來實現,而另一部分沒有。塊旨在用於添加額外的內容到標題中,而body
內容則是希望被其他頁面覆蓋的內容。
擴展基礎模板
可以使用extends
關鍵字將模板擴展為基礎模板:
1 | extends home.pug |
完成此操作後,您需要重新定義塊。所有模板的內容都必須放入塊中,否則引擎不知道將它們放在哪裡。
示例:
1 | extends home.pug |
您可以重新定義一個或多個塊。未重新定義的內容將保持原始模板的內容。
注釋
Pug中的注釋可以直接在HTML中可見或不可見。
可見
行內:
1 | // 一些注釋 |
塊:
1 | // |
不可見
行內:
1 | //- 一些注釋 |
塊:
1 | //- |
tags: [“Pug”, “template engine”, “Node.js”]