WebC Layouts with Layout Chaining
WebC can be used for layouts in your Eleventy site.
You simply write your HTML and then add
@raw="content" to whatever element you want to contain the page content.
You use WebC layouts the same way you use any layout in Eleventy: by setting
layout in a template’s frontmatter.
When Eleventy builds your site, it will process index.md in the usual fashion.
First, it processes the frontmatter.
Then it processes the Markdown into HTML.
Then it passes all of that as data to the layout it found in your frontmatter.
The HTML generated from the Markdown is provided to the layout in the
content variable, which, in WebC, is available on
This is the result:
You can also use layout chaining with WebC Layouts. In fact, since WebC doesn’t really have template inheritance like Nunjucks and Liquid do, this may be the simplest way to reuse layouts and boilerplate.
In the above example, we create a template — root.webc — that contains all of our HTML boilerplate: doctype, metadata, etc.
Then we create a template — main.webc — that provides the scaffolding for our site: the site header, a main section, and the site footer.
main.webc uses root.webc as its layout so that it will get wrapped inside of the
<body> tag with all the necessary boilerplate around it.
If we then use main.webc as a layout for a Markdown template, we’ll get the whole kit-n-caboodle in our final HTML.
The final result of combining index.md, main.webc, and root.webc looks like this: