Filters #
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>`;
};This feature was New in v0.7.0.
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 (New in 0.7.0)
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 (New in 0.7.0), Nunjucks, Liquid, and Handlebars.
module.exports = function(eleventyConfig) {
// Universal filters add to:
// * Liquid
// * Nunjucks
// * Handlebars
// * JavaScript (New in 0.7.0)
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.slug:"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}">`;
});
};