⓫ 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

• 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