---
title: "[NJS] Layouts"
slug: njs-layouts
section: tech
date: 2016-07-23T12:35:00.000Z
canonical: https://roland.leth.ro/blog/tech/njs-layouts
---
Express 2.0 apparently had layouts and partials included, but they were removed in 3.0. Luckily, [ejs-mate](https://www.npmjs.com/package/ejs-mate) has us covered.
Let's quickly cover partials, because it feels a bit easier. First, the partial, inside an `example.ejs` file, located in the same `views` folder where all your views are kept (preferably inside a nested `partials` folder):
```html
I am a partial
And I will be included too
```
Then, when we want this bit of code in another file, we can just include it where it's needed:
```html
About me
<% include ./partials/example >
More stuff here
```
This will be rendered as:
```html
About me
I am a partial
And I will be included too
More stuff here
```
Partials are really handy when you have bits of code that will be used in several places. But what about layouts? You can define a whole *layout*, common to different pages: using my website as an example, here's the `layout.ejs` file:
```html
<% include ./partials/head %>
<%- block('head') %>
<% include ./partials/header %>
<%- body %>
<% include ./partials/footer %>
```
Here we see the `head`, the `header` (navigation) and the `footer` as partials, like we discussed above; these are common for all pages. To quickly explain the two foreign calls, `<%- block('head') >`, and `<%- body >`, I'll just paste in my `404` page:
```html
<% layout('layout') %>
<% block('head').append('') %>
404
This isn't the page you are looking for.
```
All of this means "take `layout.ejs`, replace `<%- body >` with the code in this file (except any layout handling, of course), and replace `<%- block('head') >` with the string from the `.append` call(s)", thus the `404` page will render like this:
```html
// Everything inside head partial
// Our 404 styles:
// Everything inside the header partial
// Our 404 "body":