Intro to Templating with Pug (previously known as Jade)

Edit on GitHub
Sep 2, 2017
Last updated: Sep 3, 2017
Node
4 minutes

Pug is a templating engine for Node.js
Hierarchy is defined with indentation
Pug let’s you use JS inside the templates. You can loop and use logic. You can also do mixins and advanced templating
Pug is white-space sensitive. The pipe | character is used for whitespace control For example, if you want to start your content on a new line, it’ll treat the first word as a tag. So you use | at the beginning to avoid that. A dot . is also used

doctype html
html(lang="en")
	head
		title= pageTitle
		script(type='text/javascript').
			if (foo) bar(1 + 5)
	
	//- This comment will only show inside the template, will NOt be rendered with HTML
	// This comment will be rendered in HTML

	body
		h1.title you just rendered a Pug template!
		#container.col
			- const youAreUsingPug = true //- Locally defined varaible

			if youAreUsingPug
				p You are amazing!
			else
				p Looks like you don't used Pug. Get on it!
			p.
				Pug is a terse and simple templating language with a 
				strong focus on performance and powerful features. Here is some #[strong bold text] and here's some #[em italic text].

			- const name = "Jake". toUpperCase(); //- Locally defined variable with some more JS

			p
			| You can have local variables as well as have data passed down via the render function. For example, my name is: #{name}

			p #{name} has a cat named #[strong #{cat}]

Getting started

1npm i -S pug pug-cli

Usage in Express

1/*
2Set Pug as your view engine
3*/
4const app = require('express')
5// app.set('views', location_for_your_views_dir)
6app.set('views', path.join(__dirname, 'views')) // define views dir
7app.set('view engine', 'pug') // define view engine for .render()

1/*
2Rendering a Pug template
3*/
4const router = express.Router()
5router.get('/', (request, response) => {
6  response.render('hello') // a template file in views dir, no need for file extension
7})

1/*
2Sample Pug template
3*/ 
4div.container
5  h1.title You just rendered a Pug template!

For divs, you don’t need to explicitly say it’s a div, just mentioning the divs and classes will do since it’ll assume by default that the block is a div (i.e. div.container and .container are the same)

classes and IDs

.container
  h1.title This is an H1 heading with a class of `.title` inside a `div.container`
  span#attention This is a span with the ID `#attention`
    p.copy.class.anotherclass This is a p tag inside the span tag with multiple classes

attributes and values

attributes go in parantheses ()

Here’s a div.container containing an image

.container
  img(src="dog.jpeg" alt="Dog")

You can of course assign both classes and attributes like so

img.dog(src="dog.jpeg" alt="Dog")

Here is an input field with attributes specified on multiple lines, works just fine

input(
  type='checkbox'
  name='agreement'
  checked
)

comments

// will output in markup
//- will be hidden in HTML markup, is for use within Pug templates only

strong and em text

You’ll use what’s called Tag Interpolation
#[strong word] and #[em word] is the syntax

p #{name} has a cat named #[strong #{cat}]

p.
  This is a very long and boring paragraph that spans multiple lines.
  Suddenly there is a #[strong strongly worded phrase] that cannot be
  #[em ignored].
p.
  And here's an example of an interpolated tag with an attribute:
  #[q(lang="es") ¡Hola Mundo!]

Passing data to your templates

Data is passed as the second argument when you’re rendering your template with the render() function (the first argument is the template file name).
#{} is used to interpolate variables inside templates

1router.get('/', (request, response) => {
2  response.render('hello', {
3    name: 'Aamnah',
4    cat: 'whiskers'
5  })
6})

1router.get('/', (request, response) => {
2  response.render('hello', {
3    name: 'Aamnah',
4    cat: request.query.cat // make it dynamic, pass the cat's name as a URL query
5  })
6})

p #{name} has a cat named #{cat}

Declaring variables inside templates

start the line with a -

- const city = "Lahore".toUpperCase();

p I live in #{city} //- I live in LAHORE

Putting variables inside attributes

You use a JS template literal, ES6 style

img.dog(src="dog.jpg" alt="Dog `${dog}`")

Blocks

Blocks are sections that can be filled in by other templates
You both define and overwrite a block with the block keyword

body
	block header
	  header.top
	    nav.main

	.content
	  block content

extending layout

extends layout

block content
  p This is some content

Notes