EJS (Embedded JavaScript) is a popular templating engine that allows you to generate HTML markup with plain JavaScript. It’s often used in Node.js applications for rendering dynamic pages. One common requirement when designing web pages is to include a footer that appears on multiple pages. This article will guide you through the process of including a footer in your EJS templates, ensuring a consistent look and feel across your web application.
Understanding the Problem
You may find yourself needing to replicate the same footer across various pages of your website. Rather than rewriting the footer code in each EJS file, you can use EJS’s include feature to streamline the process. This not only saves you time but also reduces the risk of errors and inconsistencies.
Scenario and Original Code
Imagine you are building a web application with multiple routes, and each route requires a common footer at the bottom. The original code for an EJS page without a reusable footer might look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Application</title>
</head>
<body>
<h1>Welcome to My Web Application</h1>
<p>This is the home page content.</p>
<footer>
<p>© 2023 My Web Application</p>
<p><a href="/privacy">Privacy Policy</a></p>
</footer>
</body>
</html>
As you can see, the footer is hard-coded into the HTML. Let’s explore how to make this more efficient by using EJS includes.
How to Include a Footer in EJS
- Create a Footer File: First, create a separate EJS file for your footer. Let’s name it
footer.ejs.
<footer>
<p>© 2023 My Web Application</p>
<p><a href="/privacy">Privacy Policy</a></p>
</footer>
- Include the Footer in Other Templates: Now, you can include this footer in any of your EJS templates using the
<%- include %>syntax.
Here’s how the revised home page code looks:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Application</title>
</head>
<body>
<h1>Welcome to My Web Application</h1>
<p>This is the home page content.</p>
<%- include('footer') %>
</body>
</html>
Important Notes:
-
Path: Ensure that the path provided in the
includefunction is relative to the views folder. If yourfooter.ejsfile is located in a subdirectory, you will need to adjust the path accordingly (e.g.,include('partials/footer')). -
Safe HTML: Use
<%-to include raw HTML without escaping it. This is particularly useful for including components like footers that may contain HTML elements.
Unique Insights
By using EJS’s include feature, you are not only optimizing your code but also promoting maintainability. Any changes made to the footer will automatically reflect across all pages that include it, saving you from repetitive updates.
Example of a Dynamic Footer
You can also pass data to your included footer for dynamic content. For instance, if you want to display different copyright years based on the current year, you can do the following:
In your footer file (footer.ejs):
<footer>
<p>© <%= year %> My Web Application</p>
<p><a href="/privacy">Privacy Policy</a></p>
</footer>
And include it like this in your main template:
<%- include('footer', { year: new Date().getFullYear() }) %>
Conclusion
Including a footer in EJS is a straightforward process that enhances the efficiency and consistency of your web application. By creating a separate footer file and leveraging the include feature of EJS, you can ensure that your website maintains a uniform appearance while simplifying the codebase.
For further reading, consider checking out the EJS documentation for more examples and best practices.
Remember, clean and maintainable code is the hallmark of a great developer, so start optimizing your templates today!
