Express 2.0 apparently had layouts and partials included, but they were removed in 3.0. Luckily, 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):
<p>I am a partial</p>
And I will be included tooThen, when we want this bit of code in another file, we can just include it where it's needed:
<h1>About me</h1>
<% include ./partials/example >
More stuff hereThis will be rendered as:
<h1>About me</h1>
<p>I am a partial</p>
And I will be included too
More stuff herePartials 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:
<!DOCTYPE html>
<html>
<head>
<% include ./partials/head %>
<%- block('head') %>
</head>
<body>
<% include ./partials/header %>
<%- body %>
<% include ./partials/footer %>
</body>
</html>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:
<% layout('layout') %>
<% block('head').append('<link rel="stylesheet" href="/assets/sections/404.css">') %>
<h1 class="the-404"><span class="the-404">404</span></h1>
<p class="error-message">This isn't the page you are looking for.</p>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:
<!DOCTYPE html>
<html>
<head>
// Everything inside head partial
// Our 404 styles:
<link rel="stylesheet" href="/assets/sections/404.css">
</head>
<body>
// Everything inside the header partial
// Our 404 "body":
<h1 class="the-404"><span class="the-404">404</span></h1>
<p class="error-message">This isn't the page you are looking for.</p>
// Everything inside the footer partial
</body>
</html>