I’m experimenting a lot with Eleventy lately, and with nunjucks, since it’s one of the supported template engines.
Today I wanted to create a reusable container macro to avoid repeating the same wrapper over and over. I first tried with a macro like this:
{% macro section(items = []) %}
<section class="my-section">
{%- for item in items -%}
{{ item | safe }}
{%- endfor -%}
</section>
{% endmacro %}It worked. But the downside was that I had to write the HTML in strings. Ugh!
c.section([
'<p>My first paragraph</p>',
'<p>My second paragraph</p>'
])So I started reading the official documentation and stumbled upon the call tag. It’s not super-intuitive, but it was exactly what I was looking for.
It allows you to wrap a macro call around some content, so that it’s passed to the macro body. As always an example is worth a thousand words. We change the section definition as such:
{% macro section() %}
<section class="my-section">
{{ caller() }} {# This is where the content will be placed #}
</section>
{% endmacro %}And we can call it like this:
{% call c.section() -%}
<p>My first paragraph</p>
<p>My second paragraph</p>
{%- endcall %}Much cleaner, and we can also customize the section by passing in some arguments. But this will be the topic of another post.
