Using Partials and Layouts in Template Engines

Tutorial 5 of 5

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!