Layout Chaining #

Your layouts can also use a layout! Add the same layout front matter data to your layout template file and it’ll chain. You do not have to use the same template engine across layouts and content, you can mix and match.

To chain a layout, let’s look at an example:

Filename layout-chain-example.md

---
layout: mainlayout.njk
title: My Rad Blog
---
# My Rad Markdown Blog Post

We want to add a main element around our post’s content because we like accessibility.

Language: Nunjucks 11ty.js

Here’s what mainlayout.njk would look like:

Filename _includes/mainlayout.njk

---
layout: mylayout.njk
myOtherData: hello
---
<main>
  {{ content | safe }}
</main>
```

Here’s what mainlayout.11ty.js would look like:

Filename _includes/mainlayout.11ty.js

exports.data = {
  layout: "mylayout.njk",
  myOtherData: "hello"
};

exports.render = function(data) {
  return `<main>
    ${data.content}
  </main>`;
};

This layout would then be itself wrapped in the same mylayout.njk we used in our previous example:

Filename _includes/mylayout.njk

<!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>
    {{ content | safe }}
  </body>
</html>

Used together, this would output:

Filename _site/layout-chain-example/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Rad Blog</title>
  </head>
  <body>
    <main>
      <h1>My Rad Markdown Blog Post<h1>
    </main>
  </body>
</html>

Addendum about existing Templating features #

It is worth noting that existing template reuse mechanisms built into different templating languages are still available to you. For instance, Nunjucks calls it Template Inheritance and exposes with {% extends %}. Eleventy’s layout system exists a layer above this and exposes a nice multi-template-language mechanism to configure layouts in your content’s front matter and share data between them.