Express.js / Express.js with Template Engines
Using Partials and Layouts in Template Engines
Partials and layouts are powerful features of most template engines that allow for code reuse. This tutorial will guide you through creating and using partials and layouts in your…
Section overview
5 resourcesCovers using template engines like EJS, Pug, and Handlebars to render dynamic views.
Using Partials and Layouts in Template Engines
1. Introduction
In this tutorial, we're going to learn about using partials and layouts in template engines.
Partials are reusable blocks of code that can be included in multiple templates. This helps in reducing code duplication and improving maintainability. Layouts, on the other hand, are the skeleton or structure of the page that stays constant across different pages, like headers, footers, or navigation bars.
By the end of this tutorial, you will have learned:
- What are partials and layouts
- How to create and use partials and layouts
Prerequisites:
- Basic understanding of HTML
- Some experience with a programming language
- Familiarity with the concept of templates
2. Step-by-Step Guide
Partials
Partials are like functions, they make large websites easier to maintain. You don't have to repeat the same code in multiple locations. If you need to make a change, you make it in one place, and it propagates to all the instances.
Here's how you can create a partial. We'll use Handlebars.js for this example:
// This is the partial, a small reusable piece of code
Handlebars.registerPartial('myPartial', '<p>This is a partial</p>');
And here's how you can use it:
<div>
{{> myPartial}}
</div>
Layouts
A layout is a high-level structure that houses different views. It often includes components like headers, footers, and sidebars.
Here's a simple example using the Express.js framework and the EJS template engine:
// This is your layout file (layout.ejs)
<html>
<head>
<title>My Website</title>
</head>
<body>
<%- body %>
</body>
</html>
In the above code, <%- body %> is where your views will be injected.
3. Code Examples
Here are some practical examples:
- Creating and using a partial:
// Registering a partial
Handlebars.registerPartial('link', '<a href="{{url}}">{{text}}</a>');
// Using the partial
var template = Handlebars.compile('<div>{{> link }}</div>');
console.log(template({url: 'http://google.com', text: 'Google'}));
// Output: <div><a href="http://google.com">Google</a></div>
- Creating and using a layout:
<!-- layout.ejs -->
<html>
<head>
<title>My Website</title>
</head>
<body>
<header>
<h1>Welcome to my website!</h1>
</header>
<%- body %>
<footer>
<p>Copyright 2021</p>
</footer>
</body>
</html>
<!-- index.ejs -->
<p>This is the home page</p>
<!-- server.js -->
app.get('/', function (req, res) {
res.render('index', {layout : 'layout'});
});
In the above example, when you visit the home page, you will see the header and footer from the layout, and the content from index.ejs.
4. Summary
We have covered how to create and use partials and layouts in template engines. They are powerful features that help you create reusable blocks of code and maintain the structure of your website.
Next, you could explore different template engines and their unique features. You could also learn more about Express.js, a popular web application framework that works well with various template engines.
5. Practice Exercises
- Create a partial for a navigation bar and use it in multiple pages.
- Create a layout that includes a header, a footer, and a sidebar. Use this layout in a home page and an about page.
- Modify the layout from exercise 2 to include a different sidebar for the about page.
Remember, practice is key when learning a new concept, so try to complete these exercises without referring back to the tutorial. Good luck!
Need Help Implementing This?
We build custom systems, plugins, and scalable infrastructure.
Related topics
Keep learning with adjacent tracks.
Popular tools
Helpful utilities for quick tasks.
Latest articles
Fresh insights from the CodiWiki team.
AI in Drug Discovery: Accelerating Medical Breakthroughs
In the rapidly evolving landscape of healthcare and pharmaceuticals, Artificial Intelligence (AI) in drug dis…
Read articleAI in Retail: Personalized Shopping and Inventory Management
In the rapidly evolving retail landscape, the integration of Artificial Intelligence (AI) is revolutionizing …
Read articleAI in Public Safety: Predictive Policing and Crime Prevention
In the realm of public safety, the integration of Artificial Intelligence (AI) stands as a beacon of innovati…
Read articleAI in Mental Health: Assisting with Therapy and Diagnostics
In the realm of mental health, the integration of Artificial Intelligence (AI) stands as a beacon of hope and…
Read articleAI in Legal Compliance: Ensuring Regulatory Adherence
In an era where technology continually reshapes the boundaries of industries, Artificial Intelligence (AI) in…
Read article