Создание пользовательского фильтра Eleventy

Хорошо, я хотел сделать эту статью немного больше, но столкнулся с препятствием при попытке использовать фильтры в Eleventy.

Поэтому я решил посвятить эту статью демонстрации того, как фильтры могут работать в Eleventy.

Фильтр — это, по сути, функция, которую мы можем расширить в нашем интерфейсе, вызвав разделитель канала |, за которым следует функция.

{
 {
 someVar | uppercase;
 }
}

Затем uppercase считается нашим фильтром.

Одиннадцать типов фильтров

На самом деле Eleventy знает довольно много типов фильтров, как указано в их документации по фильтрам.

module.exports = function(eleventyConfig) {
 // Liquid Filter
 eleventyConfig.addLiquidFilter(“uppercase”, function(value) { … });
 // Nunjucks Filter
 eleventyConfig.addNunjucksFilter(“uppercase”, function(value) { … });
 // Handlebars Filter
 eleventyConfig.addHandlebarsHelper(“uppercase”, function(value) { … });
 // JavaScript Template Function
 eleventyConfig.addJavaScriptFunction(“uppercase”, function(value) { … });
 // or, use a Universal filter (an alias for all of the above)
 eleventyConfig.addFilter(“uppercase”, function(value) { … });
};

Мы собираемся использовать метод универсального фильтра.

Чего мне не хватало в документации, так это возможности добавлять параметры в функцию.

Добавление аргументов в фильтр

До сих пор мы говорили о фильтре uppercase, но на самом деле мы хотим сделать фильтр filteredPosts.

Что он должен делать:

Отфильтруйте сообщения и вырежьте первые {x} из результатов.

Вы можете задаться вопросом, почему?

Поскольку мой макет использует три отдельных макета, было бы разумнее разделить их.

{% set firstItem = pagination.items[0] %}
{% set secondItem = pagination.items[1] %}
{% set postListItems = pagination.items | filteredPosts(2) %}

Здесь вы можете увидеть, как я устанавливаю свои переменные.

Возможно, вы уже заметили фильтр! И, что более важно, как аргумент передается ему.

filteredPosts(argument)

Построение отфильтрованного постфильтра

Чтобы построить этот фильтр, нам нужно изменить наш файл .eleventy.js.

config.addFilter(‘filteredPosts’, function(value, argument) {
 return modifiedValue;
});

Это наш универсальный фильтр, который принимает аргумент. Он всегда получает значение, но вторая часть является аргументом.

Мы хотим удалить первые 2 элемента, для чего мы можем использовать метод slice.

У меня были некоторые проблемы при использовании slice vs splice, но быстрое обновление информации о них заставило меня понять, что мы можем использовать splice для изменения входящего значения, удаления первых двух элементов и возврата его.

config.addFilter(‘filteredPosts’, function(value, limit) {
 value.splice(0, limit);
 return value;
});

Это гарантирует, что первые два элемента будут вырезаны из массива, поскольку мы уже присвоили им собственные переменные.

Добавление нескольких аргументов

Конечно, мы также можем отправить несколько аргументов нашему фильтру Eleventy.

{% set postListItems = collections.posts | filteredPosts(0, 2) %}

И получить их как таковые:

config.addFilter(‘filteredPosts’, function(value, from, limit) {
 value.splice(from, limit);
 return value;
});

Мы могли бы даже установить значения по умолчанию:

config.addFilter(‘filteredPosts’, function(value, from = 0, limit = 2) {
 value.splice(from, limit);
 return value;
});

Ну вот, я надеюсь, что это поможет кому-то создавать свои собственные крутые фильтры с Eleventy 🤩.

Спасибо за чтение, и давайте подключаться!

Спасибо за чтение моего блога. Не стесняйтесь подписываться на мою рассылку по электронной почте и подключаться к Facebook или Twitter.

Первоначально опубликовано на https://daily-dev-tips.com 23 января 2021 г.