Ask Your Question
4

What is the process of using a custom nunjucks filter to filter collections in an eleventy template?

asked 2022-04-06 11:00:00 +0000

david gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
0

answered 2021-06-08 20:00:00 +0000

plato gravatar image

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.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2022-04-06 11:00:00 +0000

Seen: 24 times

Last updated: Jun 08 '21