Creating Reusable Templates in EJS
Creating reusable templates in EJS (Embedded JavaScript) helps you maintain a consistent look and feel across your application and makes your code more manageable and modular. Reusable templates typically include components like headers, footers, sidebars, or any other elements that are used in multiple views.
Creating Reusable Templates in EJS
1. Organize Your Templates
Organize your templates into a directory structure that reflects their purpose. Commonly used templates are often placed in a partials or layouts directory.
Example Directory Structure:
views/
layouts/
header.ejs
footer.ejs
partials/
sidebar.ejs
index.ejs
about.ejs
2. Create Reusable Components
Header (views/layouts/header.ejs):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title>
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<header>
<h1><%= title %></h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
Footer (views/layouts/footer.ejs):
<footer>
<p>© 2024 Your Company. All rights reserved.</p>
</footer>
</body>
</html>
Sidebar (views/partials/sidebar.ejs):
<aside>
<h3>Categories</h3>
<ul>
<% categories.forEach(category => { %>
<li><a href="/category/<%= category.slug %>"><%= category.name %></a></li>
<% }); %>
</ul>
</aside>
3. Include Reusable Templates in Views
Use the <%- include %> statement to include reusable templates in your main view templates.
Index Page (views/index.ejs):
<%- include('layouts/header', { title: 'Home Page' }) %>
<%- include('partials/sidebar', { categories: ['Tech', 'Health', 'Lifestyle'] }) %>
<main>
<h2>Welcome to the Home Page</h2>
<p>This is the main content of the home page.</p>
</main>
<%- include('layouts/footer') %>
About Page (views/about.ejs):
<%- include('layouts/header', { title: 'About Us' }) %>
<%- include('partials/sidebar', { categories: ['Tech', 'Health', 'Lifestyle'] }) %>
<main>
<h2>About Us</h2>
<p>This is the about page content.</p>
</main>
<%- include('layouts/footer') %>
In these examples:
- The
header.ejsandfooter.ejstemplates are included in bothindex.ejsandabout.ejs, ensuring a consistent layout across pages. - The
sidebar.ejstemplate is also included, and data (categories) is passed to it for rendering.
4. Passing Data to Reusable Templates
You can pass data to reusable templates to customize their content based on the context in which they are used.
Example:
Server-Side Code (Express):
app.get('/products', (req, res) => {
const categories = [
{ name: 'Electronics', slug: 'electronics' },
{ name: 'Books', slug: 'books' },
{ name: 'Clothing', slug: 'clothing' }
];
res.render('products', { title: 'Products', categories });
});
Products Page (views/products.ejs):
<%- include('layouts/header', { title: title }) %>
<%- include('partials/sidebar', { categories: categories }) %>
<main>
<h2>Product Listings</h2>
<p>Browse our range of products.</p>
</main>
<%- include('layouts/footer') %>
In this example:
- The
titleandcategoriesdata are passed to theheaderandsidebartemplates respectively.
5. Benefits of Reusable Templates
- Maintainability: Changes made to a reusable template (e.g.,
header.ejs) automatically apply to all views that include it, reducing the need for repetitive updates. - Consistency: Ensures a consistent look and feel across different pages of your application.
- Modularity: Allows you to break down complex layouts into smaller, manageable components.
Summary
- Organize: Structure your templates into directories such as
layoutsandpartials. - Create Components: Define reusable components like headers, footers, and sidebars.
- Include: Use
<%- include('path/to/template') %>to include reusable templates in your views. - Pass Data: Customize reusable templates by passing data to them.
- Benefits: Reusable templates improve maintainability, consistency, and modularity.
By creating and utilizing reusable templates in EJS, you streamline your development process and enhance the maintainability of your application.