⓫ Eleventy

On this page

Eleventy config Jump to heading

Add a filter Jump to heading

eleventyConfig.addFilter('readableDate', (dateObj) => {
return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat('dd LLL, yyyy')
})

Usage:

{{ page.date | readableDate }}

Nunjucks Jump to heading

Tags Jump to heading

If Jump to heading

{% if variable %}
It is true
{% endif %}

For Jump to heading

<ul>
{% for item in items %}
<li>{{ item.title }}</li>
{% else %}
<li>This would display if the 'item' collection were empty</li>
{% endfor %}
</ul>

Debugging Jump to heading

There are two useful ways to debug data in Nunjucks templates.

dump filter Jump to heading

Prints the data to the page

{{ data | dump }}

log filter Jump to heading

Logs the data to your terminal

{{ data | log }}

They can be used together:

{{ data | dump | log }}
<a
class="{{ 'active' if '/' === page.url }}"
href="{{ '/' | url }}"
>
Home
</a>

<!-- or to set an active link for all items in a subdirectory -->

{{ 'active' if '/blog' in page.url }}

More examples: https://bryanlrobinson.com/blog/using-nunjucks-if-expressions-to-create-an-active-navigation-state-in-11ty/


← Back home