While working on the Saga11 project a SSG built on 11ty & DecapCMS, I made the transition from Nunjucks to Liquid for the templates. I found Nunjucks to be a bit outdated, whereas Liquid is widely used and supported by Shopify (caching) simplifying the number of template languages I have to remember
It’s not that difficult to remember {{ var | filter }}, but it’s still another flavor. Moreover, as far as I know, Liquid is now the default template language in Eleventy.
{% for item in collections.foo %}
{{ forloop.index }}
{{ item.data.title }}
{% endfor %}
Liquid > Custom functions
Previously, if I needed to do some magic with a collection in Nunjucks, I had to write a eleventyConfig.addCollection() in the eleventy.config.js file. However, with Liquid, I can avoid context shifting when deeply involved in the markup. It was frustrating to create special collections each time, or perhaps I overlooked something in the Nunjucks documentation ? Selecting and outputting data from collections.all is straightforward with plain Liquid.
Queries in 11ty Collections
Now, data queries have become much simpler. For example, to retrieve all content tagged with “foo” and having a title containing “superduper,” limited to the last 2 items:
{% assign value = "superduper" %}
{% assign items = collections.foo | where: "data.title", value %}
{% for item in items reversed limit: 2 %}
<article>
<h3>{{ item.data.title }}</h3>
<p>{{ item.templateContent }}</p>
</article>
{% endfor %}
I feel like a complete badass, effortlessly grabbing and manipulating data in templates.
Headaches after changing to liquid
My biggest issue so far is that eleventys liquid implementation dosnt yet support named arguments and to rember the syntax have changed a bit.
{{ nunjucks | replace("foo", "bar") }}
{{ liquid | replace: "foo", "bar" }}The good thing is that if a plugin requires the named syntax, you can temporarily fix it with the render plugin and change the template language whenever it’s needed, as I had to do with the Eleventy Favicon Generation plugin.
{% renderTemplate "njk"%}
{% set icon = "src/_system/icon.png" %}
{% favicons icon, appleIconBgColor="#bada55", appleIconPadding=10, generateManifest=false %}
{% endrenderTemplate %}