0
0
Expressframework~5 mins

Template partials and layouts in Express

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Introduction

Template partials and layouts help you reuse parts of your web pages easily. They keep your code clean and save time by avoiding repetition.

When you want the same header or footer on many pages.
When you want to keep your page structure consistent across your site.
When you want to update a common part of your site in one place.
When you want to break a big page into smaller, manageable pieces.
When you want to organize your templates better for teamwork.
Syntax
Express
app.set('view engine', 'ejs');

// In your main layout file (e.g., layout.ejs):
<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <%- include('partials/header') %>
  <main>
    <%- body %>
  </main>
  <%- include('partials/footer') %>
</body>
</html>

Use <%- include('path/to/partial') %> to insert partial templates.

Layouts usually have a placeholder like <%- body %> where page content goes.

Examples
This inserts the navbar partial into your template.
Express
<%- include('partials/navbar') %>
A simple layout with header, footer, and a body placeholder.
Express
<!-- layout.ejs -->
<html>
  <body>
    <%- include('partials/header') %>
    <%- body %>
    <%- include('partials/footer') %>
  </body>
</html>
A page template whose rendered content is inserted into the layout (e.g., via manual rendering or a layout library).
Express
<!-- page.ejs -->
<h1>Welcome!</h1>
<p>This is the home page.</p>
Sample Program

This Express app uses EJS templates with a layout and partials for header and footer. The index.ejs page uses the layout, which includes the header and footer partials. This keeps the page structure consistent and easy to update.

Express
const express = require('express');
const app = express();
const path = require('path');

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

app.get('/', (req, res) => {
  res.render('index', {}, (err, indexHtml) => {
    if (err) {
      console.log(err);
      return res.status(500).send('Something went wrong');
    }
    res.render('layout', { title: 'Home Page', body: indexHtml });
  });
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

// Directory structure:
// views/
//   layout.ejs
//   index.ejs
//   partials/
//     header.ejs
//     footer.ejs

// layout.ejs content:
// <!DOCTYPE html>
// <html lang="en">
// <head>
//   <meta charset="UTF-8">
//   <meta name="viewport" content="width=device-width, initial-scale=1.0">
//   <title><%= title %></title>
// </head>
// <body>
//   <%- include('partials/header') %>
//   <main>
//     <%- body %>
//   </main>
//   <%- include('partials/footer') %>
// </body>
// </html>

// index.ejs content:
// <h1>Welcome to the Home Page</h1>
// <p>This page uses a layout and partials.</p>

// partials/header.ejs content:
// <header>
//   <h2>Site Header</h2>
// </header>

// partials/footer.ejs content:
// <footer>
//   <p>Site Footer © 2024</p>
// </footer>
OutputSuccess
Important Notes

Make sure your partials folder is inside your views folder for easy includes.

Use <%- include() %> to render raw HTML from partials, not escaped text.

Layouts help keep your site consistent and make updates faster.

Summary

Template partials let you reuse small parts like headers and footers.

Layouts provide a main structure where page content fits in.

Using both keeps your code clean and your site consistent.