/

Pug指南

Pug指南

如何使用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
2
3
4
5
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的視圖:

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

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

1
p 您好,來自Flavio

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

在Pug中插入變量

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

1
2
3
app.get('/about', (req, res) => {
res.render('about', { name: 'Flavio' })
})
1
p 您好,#{name}

插入函數返回值

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

1
2
3
app.get('/about', (req, res) => {
res.render('about', { getName: () => 'Flavio' })
})
1
p 您好,#{getName()}

為元素添加id和class屬性

1
2
p#title
p.title

設置doctype

1
doctype html

Meta標籤

1
2
3
4
5
6
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')

添加腳本和樣式

1
2
3
4
5
6
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')

內聯腳本

1
2
3
4
5
6
7
8
9
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');

循環

1
2
3
4
5
6
7
ul
each color in ['Red', 'Yellow', 'Blue']
li= color

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

條件語句

1
2
3
4
if name
h2 您好,#{name}
else
h2 您好

else-if也可以使用:

1
2
3
4
5
6
if name
h2 您好,#{name}
else if anotherName
h2 您好,#{anotherName}
else
h2 您好

另一個示例:

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

設置變量

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

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

增加變量的值

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

1
age++

將變量賦值給元素值

1
p= name
1
span.age= age

迭代變量

您可以使用foreach,它們是可以互換的,沒有什麼區別:

1
2
for dog in dogs
li= dog
1
2
3
ul
each dog in dogs
li= dog

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

1
p 有#{values.length}個項目

while是另一種類型的循環:

1
2
3
4
5
- var n = 0;

ul
while n <= 5
li= n++

包含其他Pug文件

在Pug文件中,您可以包含其他Pug文件:

1
include otherfile.pug

定義塊

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

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

1
2
3
4
5
6
7
8
9
10
11
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關鍵字將模板擴展為基礎模板:

1
extends home.pug

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

示例:

1
2
3
4
5
6
7
8
extends home.pug

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

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

注釋

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

可見

行內:

1
// 一些注釋

塊:

1
2
3
//
一些
注釋

不可見

行內:

1
//- 一些注釋

塊:

1
2
3
//-
一些
注釋

tags: [“Pug”, “template engine”, “Node.js”]