⓫ Eleventy
10 Feb, 2023
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
- Built-in filters: https://mozilla.github.io/nunjucks/templating.html#builtin-filters
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 }}
Active class on links Jump to heading
<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