0

I have layout chaining on an 11ty site. When I add front matter to the base template, the front matter gets rendered and appears in the browser. I don't understand why. Note: Also using nunjucks.

base.njk:

---
test1: hello
---
<!doctype html>
HTML GOES HERE

layer.njk:

---
test2: goodbye
---

{% extends "base.njk" %}
HTML GOES HERE

page.html:

---
layout: layer.njk
---
HTML GOES HERE
{{test1}}
{{test2}}
HTML GOES HERE

When I view the page.html, the templates render properly, but the front matter from base.njk appears on the page. In other words, I see the dashes and the property/value declaration literally. The front matter from layer.njk does not appear on page.

What I am trying to accomplish is to establish global constants in the base.njk so that other pages can access those global constants.

Jcott
  • 1
  • 1
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Jan 18 '23 at 10:19

1 Answers1

0

base.njk should not include YAML header, beacause it's content will be the bases of the html files! Start the file with the html header and bilerplate "<!doctype html>".... then include

{{ content | safe }}

to incude the actual page.

layer.njk would look like this:

---
title: "Title goes here"
layout: "base.njk"
---

<h1>{{ title }} Home Page</h1>

11ty will create a new html page by insering the body of layer.njk to the base.njk

Here is a nice walkthrough: https://www.freecodecamp.org/news/learn-eleventy/

joealmond
  • 16
  • 3