The Pug Guide
How to use the Pug templating engine
Nội Dung Chính
Introduction to Pug
What is Pug? It’s a template engine for server-side Node.js applications.
Express is capable of handling server-side template engines. Template engines allow us to add data to a view and generate HTML dynamically.
Pug is the new name for an old thing. It’s Jade 2.0.
Due to a trademark issue, the name was changed from Jade to Pug when the project released version 2 in 2016. You can still use Jade (aka Pug 1.0), but going forward it’s best to use Pug 2.0.
Also see the differences between Jade and Pug
Express uses Jade as the default. As mentioned above, Jade is the old version of Pug – specifically Pug 1.0.
Although the last version of Jade is 3 years old (at the time of writing, summer 2018), it’s still the default in Express for backward compatibility reasons.
Pug’s official website is https://pugjs.org/.
How does Pug look?
p
Hello from Flavio
This template will create a p tag with the content Hello from Flavio.
As you can see, Pug is quite special. It takes the tag name as the first thing in a line, and the rest is the content that goes inside it.
If you are used to template engines that use HTML and interpolate variables; like Handlebars (described next), you might run into issues, especially when you need to convert existing HTML to Pug. This online converter from HTML to Jade (which is very similar, but a little different to Pug) will be a great help: https://jsonformatter.org/html-to-jade
Install Pug
Installing Pug is as simple as running npm install:
npm install pug
Setup Pug to be the template engine in Express
and when initializing the Express app, we need to set it:
const
path
=
require
(
'path'
)
const
express
=
require
(
'express'
)
const
app
=
express
()
app.
set
(
'view engine'
,
'pug'
)
app.
set
(
'views'
, path.
join
(__dirname,
'views'
))
Your first Pug template
Create an about view:
app.
get
(
'/about'
, (
req
,
res
)
=>
{
res.
render
(
'about'
)
})
and the template in views/about.pug:
p
Hello from Flavio
This template will create a p tag with the content Hello from Flavio.
Interpolating variables in Pug
You can interpolate a variable using:
app.
get
(
'/about'
, (
req
,
res
)
=>
{
res.
render
(
'about'
, { name:
'Flavio'
})
})
p
Hello from
#{
name
}
Interpolate a function return value
You can interpolate a function return value using:
app.
get
(
'/about'
, (
req
,
res
)
=>
{
res.
render
(
'about'
, {
getName
: ()
=>
'Flavio'
})
})
p
Hello from
#{
getName
()}
Adding id and class attributes to elements
p
#title
p
.title
Set the doctype
doctype html
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'
)
Adding scripts and styles
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'
)
Inline scripts
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'
);
Loops
ul
each
color
in
[
'Red'
,
'Yellow'
,
'Blue'
]
li
=
color
ul
each
color, index
in
[
'Red'
,
'Yellow'
,
'Blue'
]
li
=
'Color number '
+
index
+
': '
+
color
Conditionals
if
name
h2
Hello from
#{
name
}
else
h2
Hello
else-if works too:
if
name
h2
Hello from
#{
name
}
else if
anotherName
h2
Hello from
#{
anotherName
}
else
h2
Hello
Another example:
if
users.
length
>
2
each
user
in
users
.
.
.
Set variables
You can set variables in Pug templates:
-
var
name
=
'Flavio'
-
var
age
=
35
-
var
roger
=
{ name:
'Roger'
}
-
var
dogs
=
[
'Roger'
,
'Syd'
]
Incrementing variables
You can increment a numeric variable using ++:
age
++
Assigning variables to element values
p
=
name
span
.age=
age
Iterating over variables
You can use for or each, they are interchangeable and there is no difference:
for
dog
in
dogs
li
=
dog
ul
each
dog
in
dogs
li
=
dog
You can use .length to get the number of items:
p
There are
#{
values
.
length
}
while is another kind of loop:
-
var
n
=
0
;
ul
while
n
<=
5
li
=
n
++
Including other Pug files
In a Pug file you can include other Pug files:
include
otherfile.pug
Defining blocks
A well-organized template system will define a base template, and then all the other templates will extend from it.
Part of a template can be extended by using blocks:
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
Home page
p
welcome
In this case one block, body, has some content, while head does not. head is intended to be used to add additional content to the heading, while the body content is made to be overridden by other pages.
Extending a base template
A template can extend a base template by using the extends keyword:
extends
home.pug
Once this is done, you need to redefine blocks. All the content of the template must go into blocks, otherwise the engine does not know where to put them.
Example:
extends
home.pug
block
body
h1
Another page
p
Hey!
ul
li
Something
li
Something else
You can redefine one or more blocks. The ones not redefined will be kept with the original template content.
Comments in Pug can be of two types: visible or invisible in the resulting HTML.
Visible
Inline:
// some comment
Block:
//
some
comment
Invisible
Inline:
//- some comment
Block:
//-
some
comment
