Tutorials


EJS include statement


In EJS (Embedded JavaScript), the <%- include %> statement is used to include and render other EJS templates within a parent template. This feature is useful for reusing common HTML structures, such as headers, footers, or any reusable components, across multiple pages. It helps keep your templates DRY (Don't Repeat Yourself) and makes them more manageable and organized.

Syntax and Usage of <%- include %> in EJS

1. Basic Syntax

The basic syntax for including another EJS template is:

<%- include('path/to/template') %>
  • <%- include('path/to/template') %>: Includes the EJS template specified by the path. The - (dash) before include is used to render unescaped content. If you want to escape the included content, you can use <%= include('path/to/template') %>.

2. Example Usage

Suppose you have a common header and footer that you want to include in multiple pages.

Directory Structure:

views/
    layouts/
        header.ejs
        footer.ejs
    index.ejs
    about.ejs

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>
</head>
<body>
    <header>
        <h1>Welcome to <%= title %></h1>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
        </nav>
    </header>

Footer Template (views/layouts/footer.ejs):

    <footer>
        <p>&copy; 2024 Your Company. All rights reserved.</p>
    </footer>
    </body>
</html>

Index Page (views/index.ejs):

<%- include('layouts/header', { title: 'Home Page' }) %>

<main>
    <h2>Index Page Content</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' }) %>

<main>
    <h2>About Us</h2>
    <p>This is the about page content.</p>
</main>

<%- include('layouts/footer') %>

In this example:

  • The header.ejs and footer.ejs templates are included in both index.ejs and about.ejs.
  • The title variable is passed to header.ejs to customize the page title and header content for different pages.

3. Passing Data to Included Templates

You can pass data to the included template by providing an object as the second argument:

<%- include('path/to/template', { key: value }) %>

Example:

Sidebar Template (views/layouts/sidebar.ejs):

<aside>
    <h3>Categories</h3>
    <ul>
        <% categories.forEach(category => { %>
            <li><a href="/category/<%= category.slug %>"><%= category.name %></a></li>
        <% }); %>
    </ul>
</aside>

Main Page (views/main.ejs):

<%- include('layouts/sidebar', { categories: ['Tech', 'Health', 'Lifestyle'] }) %>

<main>
    <h1>Main Content</h1>
    <p>This is the main content area.</p>
</main>

In this example:

  • The sidebar.ejs template is included in main.ejs with a list of categories passed as data.

4. Relative Paths and Views Directory

  • Relative Paths: The path to the included template is relative to the views directory, so you usually don’t need to specify views/ in the path.
  • File Extensions: You can omit the .ejs extension in the path; EJS will automatically look for .ejs files.

Summary

  • Basic Syntax: Use <%- include('path/to/template') %> to include and render other EJS templates.
  • Passing Data: Pass data to the included template with <%- include('path/to/template', { key: value }) %>.
  • File Structure: Organize your templates in a directory structure that reflects their usage and include them as needed.

The <%- include %> statement in EJS allows you to modularize your templates, making it easier to maintain and update common parts of your site, and ensuring consistency across different pages.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about