Revision history [back]

The process of using a custom nunjucks filter to filter collections in an eleventy template involves the following steps:

1. Define the custom filter function in a JavaScript file. This function should take a collection as input and return a filtered collection.

2. Register the filter function with nunjucks by adding it to the environment passed to eleventyConfig.addNunjucksFilters.

3. In the eleventy template, use the filter by chaining it after the collection variable and passing any arguments needed by the filter function.

For example, consider the following custom filter function that filters an array of objects to only include objects with a specific property:

function filterByProperty(array, prop, value) {
  return array.filter(obj => obj[prop] === value);
}

To use this filter in an eleventy template, register it with nunjucks:

const { DateTime } = require("luxon");
const customFilters = require('./_filters/customFilters.js');

module.exports = function(eleventyConfig) {
  eleventyConfig.addNunjucksFilters(customFilters);
};

Then, use it in a template to filter a collection:

{% assign filteredCollection = collection | filterByProperty('category', 'news') %}
<ul>
  {% for item in filteredCollection %}
    <li>{{ item.title }}</li>
  {% endfor %}
</ul>

In this example, the collection is filtered to only include objects with a 'category' property equal to 'news'. The resulting filtered collection is looped over to output the titles of the filtered items.