Tutorials


Template inheritance and partials in EJS


Template inheritance and partials are powerful techniques for managing the structure and reusability of your EJS templates in an Express.js application. These concepts help you create a more organized and maintainable codebase by allowing you to reuse common elements across multiple templates.

1. Template Inheritance

Template inheritance allows you to define a base template that contains common layout elements (like headers and footers) and then extend this base template in other templates. This is useful for maintaining a consistent layout across different pages of your application.

Setup for Template Inheritance

  1. Create a Base Layout Template

    This template defines the common structure for your pages.

    views/layout.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>
</head>
<body>
    <header>
        <h1>My Website</h1>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
            <a href="/contact">Contact</a>
        </nav>
    </header>
    <main>
        <%- body %> <!-- This is where child templates will be injected -->
    </main>
    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>
</html>

    In this template:

    • The <%- body %> placeholder is where the content from other templates will be inserted.

  2. Render Child Templates

    When rendering a child template, the body placeholder in the base layout is replaced with the content from the child template.

    Example Route (Express):

    app.get('/home', (req, res) => {
    res.render('home', { title: 'Home Page' });
});

    Child Template (views/home.ejs):

    <h2>Welcome to the Home Page</h2>
<p>This is the main content of the home page.</p>

    In this example, the home.ejs content will replace <%- body %> in layout.ejs when the /home route is accessed.

2. Using Partials

Partials are reusable pieces of HTML that you can include in your templates. They are useful for common elements like headers, footers, or any other repeated HTML content.

Setup for Partials

  1. Create Partial Templates

    Partial templates are stored in a separate directory, often named partials.

    Example Partial (views/partials/header.ejs):

    <header>
    <h1>My Website</h1>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
    </nav>
</header>

    Example Partial (views/partials/footer.ejs):

    <footer>
    <p>&copy; 2024 My Website</p>
</footer>

  2. Include Partials in Templates

    Use the <%- include %> syntax to insert partials into your main templates.

    Example Template Using Partials (views/home.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>
</head>
<body>
    <%- include('partials/header') %>
    <main>
        <h2>Welcome to the Home Page</h2>
        <p>This is the main content of the home page.</p>
    </main>
    <%- include('partials/footer') %>
</body>
</html>

    In this example:

    • <%- include('partials/header') %> includes the header partial.
    • <%- include('partials/footer') %> includes the footer partial.

3. Combining Template Inheritance and Partials

You can combine template inheritance and partials to create a well-structured and maintainable template system. The base layout can use partials to include common elements, and specific templates can extend the layout and use additional partials as needed.

Base Layout Template (views/layout.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>
</head>
<body>
    <%- include('partials/header') %>
    <main>
        <%- body %>
    </main>
    <%- include('partials/footer') %>
</body>
</html>

Child Template (views/home.ejs):

<h2>Welcome to the Home Page</h2>
<p>This is the main content of the home page.</p>

In this setup:

  • The layout.ejs provides a consistent structure for all pages, including the header and footer via partials.
  • The home.ejs content is inserted into the body placeholder of layout.ejs.

Summary

  • Template Inheritance: Create a base layout template and extend it in other templates to maintain a consistent structure across your application.
  • Partials: Use partials to define reusable HTML elements that can be included in multiple templates.
  • Combining Techniques: Combine template inheritance and partials to create a flexible and maintainable template system.

By using template inheritance and partials effectively, you can build a consistent and well-organized front-end for your web applications.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about