Getting started with Pug template engine

Tutorial Difficulty Level    

Clean and organized HTML is what Front-end Developers always aim for. Well with Pug (formerly known as “Jade” ),  a high performance and feature-rich templating engine, that’s easy to achieve. Simply put, Pug is a clean, white space/indentation sensitive syntax for writing html.

Just like the programming language Python, Pug works with indentation or white spaces, like this example:

As you can see it’s much cleaner and easy to read than an ordinary HTML document, there are no closing tags, Pug is handling this, everything is indented and you scan the file much quicker. Also by using Pug we can ensure that our HTML is well-formed and valid.

Computer Services use Pug to generate the login page for the Xen Orchestra Dashboard, which itself is completely coded in Node.js.

Installation

To use Pug in your projects, you’ll need to install it on your Node.js server (there’s a template in XOA, but make sure you have the latest release)

and if you plan to use it at the command line

You can then at any time run

You can also setup Pug to be the template engine in the Express module (pre-installed on the XOA template). When initializing your Express app, you need to set it… like this:

Syntax

As we already mentioned, Pug is a clean, whitespace sensitive syntax for writing HTML. Here is a simple example:

Pug transforms the above to:

API

For full API, see http://pugjs.org/api/reference.html

Examples of Use

Now that you understand what Pug is and how it works with a few examples of how to use it.

Create an about view

and the template in views/about.pug:

This template will create a p tag with the content Hello from ITLC.

Set variables

You can set variables in Pug templates:

Loops

Conditionals

Defining blocks

A well organized template system will define a base template, and then all the other templates extend from it.

The way a part of a template can be extended is by using blocks:

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.

For lot’s more, see the Language Reference section at https://pugjs.org/api/getting-started.html

Interpolation with Pug

It’s important to be able to use server-side variables in your website. Pug allows you to interpolate data generated by your server in HTML, CSS, and even JavaScript code.

Interpolating variables in Pug

You can interpolate a variable using

Interpolate a function return value

You can interpolate a function return value using

We’ll post some further, more specific tutorials on this later, but for now, please see https://pugjs.org/language/interpolation.html

Pug Ports

There are ports of Pug for use in other Programming Languages, including PHP. You can also use it in your WordPress theme development, via the Wordless plugin.

Tools

HTML To Pug is an online conversion tool for translating regular HTML into it’s equivalent Pug syntax. Very useful!