パグガイド

パグテンプレートエンジンの使用方法

パグ入門

パグとは？これは、サーバー側のNode.jsアプリケーション用のテンプレートエンジンです。

Expressは、サーバー側のテンプレートエンジンを処理できます。テンプレートエンジンを使用すると、ビューにデータを追加してHTMLを動的に生成できます。

パグは古いものの新しい名前です。それはジェイド2.0。

商標の問題により、プロジェクトが2016年にバージョン2をリリースしたときに、名前がJadeからPugに変更されました。Jade（別名Pug 1.0）は引き続き使用できますが、今後はPug2.0を使用することをお勧めします。

また、翡翠とパグの違い

ExpressはデフォルトとしてJadeを使用します。上記のように、JadeはPugの古いバージョン、具体的にはPug1.0です。

Jadeの最後のバージョンは3年前（執筆時点、2018年夏）ですが、下位互換性の理由から、Expressでは依然としてデフォルトです。

パグの公式サイトはhttps://pugjs.org/。

パグはどのように見えますか？

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
Meta tags


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')</code></pre>

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


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  

  
Download my free Node.js Handbook

  




More node tutorials:

Tech Wiki Online！