Evbogue.com


A simple guide to creating Jade layouts

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 --global flag

% 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:

include file.jade

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 post route.

To do these routes without includes, you'd have to repeat a lot of code.

index.jade

doctype html
html
  head
    title Index
    link(rel='stylesheet' href='style.css')
  body
    h1 Index
    p This is the front page

post.jade

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.

layout.jade

doctype html
html
  head
    block header
    link(rel='stylesheet' href='style.css')
  body
    block content

index.jade

extends layout

block header
  title Index

block content
  h1 Index
  p This is the front page

post.jade

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.

layout.jade

doctype html
html
  head
    include header.jade
  body
    block content

header.jade

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.

IPFS for package management (ipm.js the ghetto way) →

← The cryptographic divide


about | blog | ssb | decent | ev@evbogue.com | gitmx