- Stable
3.0.0
Toggle Menu
Eleventy
1.93sGatsby
29.05sTransforms
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.
eleventy.config.js
export default 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.
});
};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
Added in v3.0.0 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
eleventy.config.js
import htmlmin from "html-minifier-terser";
export default 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;
});
};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.