How do I use LiquidJS Layout Blocks in Eleventy?

user_497438 0
Viewed 235

According to https://liquidjs.com/tags/layout.html#Blocks LiquidJS supports Layout Blocks I can call from my Layout Template.

My default template contains the {{content}} block.

When I attempt to add another block called "sidebar" with either the {% %} or {{ }} and define it in my .md file it does not render.

Does 11ty support layout blocks out of the box?

eleventy ssg
1 Answers

So I got this to work, but it's a bit messy I think. While Googling, I found folks saying that with Nunjucks, they could get this to work ONLY if they didn't use the layout front matter but specifically told Nunjucks to load the layout (https://github.com/11ty/eleventy/issues/1467). So I tried something similar in Markdown (remember that Liquid is the default processor).

Here's test2.md:

---
title: Test
---

{% layout main %}

{% block content %}
## this is test
<p>
{{ title }}
</p>
{% endblock %}

{% block sidebar %}
my sidebar is awesome
{% endblock %}

Note that I had to wrap my main content as well. Then in my layout, I noticed that: {{ content }} no longer worked. Instead, I had to use this:

{% block content %}{% endblock %}
{{ content }}

This seemed safe in my quick testing, as other templates not using the defined content block seemed to work ok. Just... be cautious.

user_521600
Related