zachleatFilters #
A filter is a function which can be used within templating syntax to transform data into a more presentable format. Filters are typically designed to be chained, so that the value returned from one filter is piped into the next filter.
Various template engines can be extended with custom filters to modify content. Here are a few examples:
<h1>{{ name | makeUppercase }}</h1><h1>{{ name | makeUppercase }}</h1><h1>{{ makeUppercase name }}</h1>module.exports = function({name}) {
return `<h1>${this.makeUppercase(name)}</h1>`;
};These can be added using the Configuration API. Here are a few examples:
module.exports = function(eleventyConfig) {
// Liquid Filter
eleventyConfig.addLiquidFilter("makeUppercase", function(value) { … });
// Nunjucks Filter
eleventyConfig.addNunjucksFilter("makeUppercase", function(value) { … });
// Handlebars Filter
eleventyConfig.addHandlebarsHelper("makeUppercase", function(value) { … });
// JavaScript Template Function
eleventyConfig.addJavaScriptFunction("makeUppercase", function(value) { … });
// or, use a Universal filter (an alias for all of the above)
eleventyConfig.addFilter("makeUppercase", function(value) { … });
};Read more about filters on the individual Template Language documentation pages:
Universal Filters #
Universal filters can be added in a single place and are available to multiple template engines, simultaneously. This is currently supported in JavaScript, Nunjucks, Liquid, and Handlebars.
module.exports = function(eleventyConfig) {
// Universal filters add to:
// * Liquid
// * Nunjucks
// * Handlebars
// * JavaScript
eleventyConfig.addFilter("myFilter", function(value) {
return value;
});
};Eleventy Provided Universal Filters #
We also provide a few universal filters, built-in:
url: Normalize absolute paths in your content, allows easily changing deploy subdirectories for your project.slugify:"My string"to"my-string"for permalinks.log:console.loginside templates.get*CollectionItem: Get next or previous collection items for easy linking.
Access existing filters New in v0.11.0 #
If you’d like to reuse existing filters in a different way, consider using the new Configuration API getFilter method. You can use this to alias a filter to a different name. You can use this to use a filter inside of your own filter. You can use this to use a filter inside of a shortcode.
module.exports = function(eleventyConfig) {
eleventyConfig.addShortcode("myCustomImage", function(url, alt) {
return `<img src="${eleventyConfig.getFilter("url")(url)}" alt="${alt}">`;
});
};