Skip to content

Latest commit

 

History

History
89 lines (75 loc) · 2.96 KB

layout-chaining.md

File metadata and controls

89 lines (75 loc) · 2.96 KB
eleventyNavigation
parent key excerpt
Layouts
Layout Chaining
Wrap layouts in other layouts.

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:

{% codetitle "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:

{%- codetitle "_includes/mainlayout.njk" %} {%- highlight "html" %} {%- include "examples/layout-chaining/mainlayout.njk" %} {%- endhighlight %}

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

{%- codetitle "_includes/mainlayout.11ty.js" %} {%- highlight "js" %} {%- include "examples/layout-chaining/mainlayout.11ty.js" %} {%- endhighlight %}

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

{% codetitle "_includes/mylayout.njk" %}

{% raw %}

<!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>

{% endraw %}

Used together, this would output:

{% codetitle "_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 {% raw %}{% extends %}{% endraw %}. 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.