WebC Layouts with Layout Chaining

Updated: 21 April 2023

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.

<!DOCTYPE html>
<html>
	<head>
		...
	</head>
	<body @raw="content"></body>
</html>

layout.webc

You use WebC layouts the same way you use any layout in Eleventy: by setting layout in a template’s frontmatter.

---
layout: layout.webc
---

# Heading

Lorem ipsum…

index.md

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 content.

This is the result:

<!DOCTYPE html>
<html>
	<head>
		...
	</head>
	<body>
		<h1>Heading</h1>
		<p>Lorem ipsum…</p>
	</body>
</html>

index.html

Layout Chaining

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.

<!DOCTYPE html>
<html>
	<head>
		...
	</head>
	<body @raw="content"></body>
</html>

root.webc

---
layout: root.webc
---

<header>...</header>
<main @raw="content"></main>
<footer>...</footer>

main.webc

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.

---
layout: main.webc
---

# Heading

Lorem ipsum…

index.md

The final result of combining index.md, main.webc, and root.webc looks like this:

<!DOCTYPE html>
<html>
	<head>
		...
	</head>
	<body>
		<header>...</header>
		<main>
			<h1>Heading</h1>
			<p>Lorem ipsum…</p>
		</main>
		<footer>...</footer>
	</body>
</html>

index.html