如何使用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長什麼樣子？

p 您好，來自Flavio

此模板將創建一個內容為“您好，來自Flavio”的p標簽。

如您所見，Pug非常特殊。它將標簽名作為行中的第一個內容，其餘內容作為標簽中的內容。

如果您習慣使用使用HTML並插入變量的模板引擎（例如Handlebars，下面將進行介紹），您可能會遇到問題，尤其是當您需要將現有的HTML轉換為Pug時。這款將HTML轉換為Jade（非常相似，但與Pug稍有不同）的在線轉換器將非常有幫助：https://jsonformatter.org/html-to-jade

安裝Pug

安裝Pug非常簡單，只需運行npm install：

npm install pug

設置Pug作為Express的模板引擎

在初始化Express應用程序時，我們需要設置它：

const path = require('path')
const express = require('express')
const app = express()
app.set('view engine', 'pug')
app.set('views', path.join(\_\_dirname, 'views'))

您的第一個Pug模板

創建一個名為about的視圖：

app.get('/about', (req, res) => {
 res.render('about')
})

並在views/about.pug中使用以下模板：

p 您好，來自Flavio

此模板將創建一個內容為“您好，來自Flavio”的p標簽。

在Pug中插入變量

您可以使用以下方式插入變量：

app.get('/about', (req, res) => {
 res.render('about', { name: 'Flavio' })
})

p 您好，#{name}

插入函數返回值

您可以使用以下方式插入函數返回值：

app.get('/about', (req, res) => {
 res.render('about', { getName: () => 'Flavio' })
})

p 您好，#{getName()}

為元素添加id和class屬性

p#title
p.title

設置doctype

doctype html

Meta標籤

html
 head
 meta(charset='utf-8')
 meta(http-equiv='X-UA-Compatible', content='IE=edge')
 meta(name='description', content='Some description')
 meta(name='viewport', content='width=device-width, initial-scale=1')

添加腳本和樣式

html
 head
 script(src="script.js")
 script(src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js')

 link(rel='stylesheet', href='css/main.css')

內聯腳本

script alert('test')

script.
 (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
 function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
 e=o.createElement(i);r=o.getElementsByTagName(i)[0];
 e.src='//www.google-analytics.com/analytics.js';
 r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
 ga('create','UA-XXXXX-X');ga('send','pageview');

循環

ul
 each color in ['Red', 'Yellow', 'Blue']
 li= color

ul
 each color, index in ['Red', 'Yellow', 'Blue']
 li= 'Color number ' + index + ': ' + color

條件語句

if name
 h2 您好，#{name}
else
 h2 您好

else-if也可以使用：

if name
 h2 您好，#{name}
else if anotherName
 h2 您好，#{anotherName}
else
 h2 您好

另一個示例：

if users.length > 2
 each user in users
 ...

設置變量

您可以在Pug模板中設置變量：

- var name = 'Flavio'
- var age = 35
- var roger = { name: 'Roger' }
- var dogs = ['Roger', 'Syd']

增加變量的值

您可以使用++遞增數字變量：

age++

將變量賦值給元素值

p= name

span.age= age

迭代變量

您可以使用for或each，它們是可以互換的，沒有什麼區別：

for dog in dogs
 li= dog

ul
 each dog in dogs
 li= dog

您可以使用.length獲取項目的數量：

p 有#{values.length}個項目

while是另一種類型的循環：

- var n = 0;

ul
 while n <= 5
 li= n++

包含其他Pug文件

在Pug文件中，您可以包含其他Pug文件：

include otherfile.pug

定義塊

良好組織的模板系統將定義一個基礎模板，然後所有其他模板將從基礎模板擴展出來。

可以使用塊來擴展模板的某一部分：

html
 head
 script(src="script.js")
 script(src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js')

 link(rel='stylesheet', href='css/main.css')
 block head
 body
 block body
 h1 主頁
 p 歡迎

在本例中，一部分模板使用塊來實現，而另一部分沒有。塊旨在用於添加額外的內容到標題中，而body內容則是希望被其他頁面覆蓋的內容。

擴展基礎模板

可以使用extends關鍵字將模板擴展為基礎模板：

extends home.pug

完成此操作後，您需要重新定義塊。所有模板的內容都必須放入塊中，否則引擎不知道將它們放在哪裡。

示例：

extends home.pug

block body
 h1 另一個頁面
 p 嘿！
 ul
 li 某事
 li 其他事

您可以重新定義一個或多個塊。未重新定義的內容將保持原始模板的內容。

注釋

Pug中的注釋可以直接在HTML中可見或不可見。

可見

行內：

// 一些注釋

塊：

//
 一些
 注釋

不可見

行內：

//- 一些注釋

塊：

//-
 一些
 注釋