Introduction to Pug syntax

February 22, 2021

A HTML response that responsed by the web server application is create by HTML template engine. In this article, learning the syntax of the HTML template engine Pug.

Introduction

Pug is an HTML template engine. It use with Express.js.

Prerequisite

Not required macOS. But this article depends it.

1
2
3
4


$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.7
BuildVersion:	19H524

Software

In this article, it depends on the below software:

Pug v3.0.0
Pug CLI v1.0.0-alpha6

Install with NPM.

1
2


npm install pug
npm install pug-cli

Directory

It doesn't have to be this way, but I'm writing with this assumption.

1
2
3
4
5
6


.
├── package.json
├── dst
│   └── scratch.html
└── src
    └── scratch.pug

package.json

1
2
3
4
5


{
  "scripts": {
    "pug": "pug src/ --hierarchy -o dst/ -P",
  }
}

Build html

Run it.

1
2
3
4
5
6
7


$ npm run pug

> sample@1.0.0 pug /Users/johndoe/workdir
> pug src/ --hierarchy -o pub -P


  rendered /Users/johndoe/workdir/pub/sample.html

Syntax

variable

Pug code

1
2


- var name = "John"
p Hello #{name}-san.

Result

1

<p>Hello John-san.</p>

comment

Pug code

1
2
3
4
5
6
7
8
9


// Comment
// p Hoge1
p Hoge2
p Hoge3

//- Commnet
//- p foo1
p foo2
p foo3

Result

1
2
3
4
5
6


<!-- Comment-->
<!-- p Hoge1-->
<p>Hoge2</p>
<p>Hoge3</p>
<p>foo2</p>
<p>foo3</p>

if

Pug code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


- var person = { name: "Bright Noa", age: 45 }

if person.name=="Bright Noa"
  p He is Bright Noa who is captain of Ra Cailum.
  
if person.name!="Hathaway Noa"
  p He is not Hathaway Noa.

if person.name=="Hathaway Noa"
  p He is Hathaway Noa
else if person.name=="Cheemin Noa"
  p She is Cheemin Noa
else 
  p Do you know Bright Noa? He is 生証人 in the UC of GUNDAM.

if person.age >= 40
  p #{person.name} is over 40

Result

1
2
3
4


<p>He is Bright Noa who is captain of Ra Cailum.</p>
<p>He is not Hathaway Noa.</p>
<p>Do you know Bright Noa? He is 生証人 in the UC of GUNDAM.</p>
<p>Bright Noa is over 40</p>

for

Pug code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


-
  var menus = [
    { name: 'Pixar RenderMan', url: '/prman' },
    { name: 'V-Ray', url: '/vray' },
    { name: 'Arnold', url: '/arnold' },
    { name: 'Mental Ray', url: '/mentalray' },
    { name: 'OctaneRender', url: '/octanerender' },
    { name: 'Maxwell Render', url: '/maxwellrender' }	
  ]
 
ul#global-menu
  - for (var x = 0; x < menus.length; x++)
    li.global-menu-item: a(href=menus[x].url) #{menus[x].name}

Result

1
2
3
4
5
6
7
8


<ul id="global-menu">
  <li class="global-menu-item"><a href="/prman">Pixar RenderMan</a></li>
  <li class="global-menu-item"><a href="/vray">V-Ray</a></li>
  <li class="global-menu-item"><a href="/arnold">Arnold</a></li>
  <li class="global-menu-item"><a href="/mentalray">Mental Ray</a></li>
  <li class="global-menu-item"><a href="/octanerender">OctaneRender</a></li>
  <li class="global-menu-item"><a href="/maxwellrender">Maxwell Render</a></li>
</ul>

Note

1
2
3
4
5


# Bad
li.global-menu-item: a(href=#{menus[x].url}) #{menus[x].name}

# Good
li.global-menu-item: a(href=menus[x].url) #{menus[x].name}

foreach

Pug code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


-
  var menus = [
    { name: 'Pixar RenderMan', url: '/prman' },
    { name: 'V-Ray', url: '/vray' },
    { name: 'Arnold', url: '/arnold' },
    { name: 'Mental Ray', url: '/mentalray' },
    { name: 'OctaneRender', url: '/octanerender' },
    { name: 'Maxwell Render', url: '/maxwellrender' }	
  ]
 
ul#global-menu
  each menu in menus
    li.global-menu-item: a(href=menu.url) #{menu.name}

Result

1
2
3
4
5
6
7
8


<ul id="global-menu">
  <li class="global-menu-item"><a href="/prman">Pixar RenderMan</a></li>
  <li class="global-menu-item"><a href="/vray">V-Ray</a></li>
  <li class="global-menu-item"><a href="/arnold">Arnold</a></li>
  <li class="global-menu-item"><a href="/mentalray">Mental Ray</a></li>
  <li class="global-menu-item"><a href="/octanerender">OctaneRender</a></li>
  <li class="global-menu-item"><a href="/maxwellrender">Maxwell Render</a></li>
</ul>

switch

Pug code

1
2
3
4
5
6
7
8


- var type = 2
case type
  when 1
    - break
  when 2
    p This type is 2
  default
    p type #{type}

Result

1

<p>type 2</p>

Conclusion

This post has reviewed the basic syntax of Pug.
Pug has other syntaxes as follows:

If you are interested, try to read it.

Introduction to Pug syntax

Introduction

Prerequisite

Syntax

variable

comment

if

for

foreach

switch

Conclusion

References

カテゴリ

タグ

案内