- Stable
2.0.1- Canary
3.0.0-alpha.17
Toggle Menu
Eleventy
1.93sNext.js
70.65sTransforms
Transforms can modify a template’s output. For example, use a transform to format/prettify an HTML file with proper whitespace.
INFO:
The provided transform function must return the original or transformed content.
Filename .eleventy.js
module.exports = function (eleventyConfig) {
// Can be sync or async
eleventyConfig.addTransform("transform-name", async function (content) {
console.log(this.page.inputPath);
console.log(this.page.outputPath);
return content; // no changes made.
});
};Access to Eleventy’s page variable (via this.page) was added in Eleventy v2.0. For previous versions, consult the older versions of the docs.
Running Transforms Manually
Pre-release only: v3.0.0-alpha.11 The renderTransforms universal filter allows projects to run transforms manually on blocks of arbitrary HTML content.
Order of Execution
Transforms are executed in order of insertion in your configuration file.
eleventyConfig.addTransform("first", () => {});
eleventyConfig.addTransform("second", () => {});
eleventyConfig.addTransform("third", () => {});Plugins
Transforms added via plugins are inserted via the second configuration stage for plugins.
eleventyConfig.addPlugin(eleventyConfig => {
eleventyConfig.addTransform("third", () => {});
});
eleventyConfig.addTransform("first", () => {});
eleventyConfig.addTransform("second", () => {});Examples
Minify HTML Output
Filename .eleventy.js
const htmlmin = require("html-minifier-terser");
module.exports = function (eleventyConfig) {
eleventyConfig.addTransform("htmlmin", function (content) {
if ((this.page.outputPath || "").endsWith(".html")) {
let minified = htmlmin.minify(content, {
useShortDoctype: true,
removeComments: true,
collapseWhitespace: true,
});
return minified;
}
// If not an HTML output, return content as-is
return content;
});
};Note that html-minifier-terser has a significant number of options, most of which are disabled by default.