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>&copy; 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 and sidebar 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 and partials.
  • 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.