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.
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
to incude the actual page.
layer.njk would look like this:
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/