Фильтры шаблонов 11ty — это способы манипулирования данными в теге переменной на выбранном вами языке шаблонов. Каждый язык шаблонов предлагает свой собственный набор, а 11ty также добавляет несколько фильтров по умолчанию.
Использование встроенного фильтра
Чтобы использовать встроенный фильтр, напишите переменную или выражение на выбранном вами языке, вот жидкий шаблон, который будет отображать строку «hi there» на странице.
<body>
<h1>11ty Second 11ty: Filter Example</h1>
<h2>{{ "hi there" }}</h2>
</body>
Получив это, добавьте символ трубы и имя фильтра. В данном случае встроенный фильтр slugify преобразует строку в подходящую для url строку.
<body>
<h1>11ty Second 11ty: Filter Example</h1>
<h2>{{ "hi there" | slugify }}</h2>
</body>
<!-- Outputs: <h2>hi-there</h2>
Создание пользовательских фильтров
Чтобы создать пользовательский фильтр, нам понадобится конфигурационный файл. Мы создадим .eleventy.js в корне нашего проекта.
Оттуда мы экспортируем функцию с объектом eleventyConfig и используем метод addFilter на этом объекте.
Метод принимает два свойства, имя фильтра для использования в шаблоне и функцию, которая будет использоваться для изменения данных.
В данном случае мы создадим фильтр верхнего регистра, чтобы преобразовать нашу строку в верхний регистр. Функция, которую мы создадим, принимает в качестве первого аргумента строку, к которой применяется фильтр. В данном случае мы будем использовать string.toUpperCase() в Javascript, чтобы вернуть измененную строку.
module.exports = function(eleventyConfig) {
eleventyConfig.addFilter("uppercase", function(string) {
return string.toUpperCase();
})
}
Затем мы можем использовать это в шаблоне:
<h1>11ty Second 11ty: Filter Example</h1>
<h2>{{ "hi there" | uppercase }}</h2>
Вы также можете настроить разметку вокруг строки. В данном случае мы воспользуемся плохой идеей настройки цвета строки в нашем фильтре. Любой аргумент после первого в нашем фильтре будет опциями, которые могут быть переданы фильтру. В данном случае это строка цвета. Мы можем обернуть строку в span и установить цвет в строке.
module.exports = function(eleventyConfig) {
eleventyConfig.addFilter("uppercase", function(string) {
return string.toUpperCase();
})
eleventyConfig.addFilter("color", function(string, color) {
return `<span style="color: ${color}">${string}</span>`;
})
}
Затем мы можем использовать это в шаблоне:
<h1>11ty Second 11ty: Filter Example</h1>
<h2>{{ "hi there" | color: "red" }}</h2>
И многое другое!
Фильтры могут быть очень мощным элементом ваших 11ty билдов. Они позволяют изменять данные на лету, независимо от источника. Все, что вы можете сделать на Javascript, вы можете сделать в фильтре, поэтому поиграйте с такими вещами, как создание фильтра строки даты для Nunjucks (доступно только в Liquid) или переупорядочивание массива или создание сильного набора HTML шаблонов для общих случаев использования в вашей разметке или разметке.