Partials for Layouts in EJS
Using partials for layouts in EJS (Embedded JavaScript) involves creating and including common components like headers, footers, and sidebars across multiple pages of your application. This approach promotes code reuse and maintains a consistent layout throughout your site, simplifying the process of updating and managing your user interface.
Using Partials for Layouts in EJS
1. What Are Partials?
Partials are small, reusable EJS templates that represent parts of a webpage. They typically include components like:
- Headers
- Footers
- Sidebars
- Navigation Bars
- Common Sections
Partials are included in other EJS templates to build up the layout of the page.
2. Directory Structure
Organize your partials and layout templates into a directory structure that reflects their purpose. A common approach is to place reusable components in a partials
or layouts
directory.
Example Directory Structure:
views/
layouts/
header.ejs
footer.ejs
partials/
sidebar.ejs
index.ejs
about.ejs
contact.ejs
3. Create Layout Templates
Header Template (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>
<a href="/contact">Contact</a>
</nav>
</header>
Footer Template (views/layouts/footer.ejs
):
<footer>
<p>© 2024 Your Company. All rights reserved.</p>
</footer>
</body>
</html>
4. Create Partials
Sidebar Template (views/partials/sidebar.ejs
):
<aside>
<h3>Categories</h3>
<ul>
<% categories.forEach(category => { %>
<li><a href="/category/<%= category.slug %>"><%= category.name %></a></li>
<% }); %>
</ul>
</aside>
5. Use Partials in Layouts
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') %>
6. Benefits of Using Partials for Layouts
- Reusability: Common components like headers and footers are defined once and reused across multiple pages.
- Consistency: Ensures a uniform appearance across different pages of your site.
- Maintainability: Changes to a partial (e.g., updating the header) automatically apply to all pages that include it.
- Organization: Separates concerns by keeping the layout components (header, footer) and content (page-specific content) in different templates.
7. Dynamic Content with Partials
You can pass dynamic data to your partials to customize their content based on the context. For example, the sidebar.ejs
partial can receive different categories based on the current page.
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
header
andsidebar
templates are included with dynamic data, allowing for a customized and consistent layout.
Summary
- Partials: Reusable EJS templates for common components (headers, footers, sidebars).
- Directory Structure: Organize partials and layouts into directories like
layouts
andpartials
. - Creating Layouts: Define header and footer templates that are included in multiple views.
- Using Partials: Include partials in views with
<%- include('path/to/partial') %>
. - Dynamic Content: Pass data to partials to customize content based on the context.
By using partials for layouts, you streamline your template management, ensure consistency across pages, and make your application easier to maintain.