By Ev Bogue - June 20th 2016
A reader had questions about how to do layouts in the Jade template engine, so I decided to write a simple guide to creating Jade layouts.
Jade is a templating language you can use with Node. You can install it using
% npm install jade
There's also a command line tool you can install using the
% sudo npm install -g jade
Jade works best when used with a web framework such as Express, Koa, or Metalsmith.
First, let's write an entire layout in jade, and then figure out how to break it up into layouts.
doctype html html head title Hello World link(rel='stylesheet' href='style.css') body h1 Hello World p This is content
Above is a full layout for a website. As you can see, Jade is taking the <>'s out of HTML, because we are lazy and hate typing <>'s.
The only thing you need to know about Jade is it removes the <>'s, and you use indents (two spaces or one tab) to put html elements within other html elements.
There are two types of Jade includes. You can use these two types of includes interchangably.
The first is a file include:
And the next is block include:
extends layout block content h1 Hello World p This is content
Imagine you want to have two routes on your website, an
index route, and a
To do these routes without includes, you'd have to repeat a lot of code.
doctype html html head title Index link(rel='stylesheet' href='style.css') body h1 Index p This is the front page
doctype html html head title Post link(rel='stylesheet' href='style.css') body h1 Post p This is a page for posts
As you can see, the two routes above share almost all of their code.
It'd be much easier to use a block include, and then define content blocks for the different pages.
doctype html html head block header link(rel='stylesheet' href='style.css') body block content
extends layout block header title Index block content h1 Index p This is the front page
extends layout block header title Post block content h1 Post p This is a post.
Now, obviously your average web page is going to have a lot more links and content than the two examples above. But as you can see, the block include saves you from having to repeat the overall layout of the page twice.
Now let's say you want to do a file include on this layout.
doctype html html head include header.jade body block content
title Hello World link(rel='stylesheet' href='style.css')
In some cases, an include can save you time by abstracting a certain section of a website into a seperate file. You can also use file includes within block includes.
The above example would render the contents of the
header.jade file where you've specified in the head of the HTML document.
Once you compile your templates using Jade, and perhaps some sort of framework such as Koa, Express, or Metalsmith, you'll be presented with an end product of fully formed HTML that can be read by any web browser.
You, the human coder, are meanwhile saved a lot of time and effort by never having to duplicate code or write the <>'s we all hate to write.