🇺🇦🇺🇦🇺🇦 Stand with Ukraine 🇺🇦🇺🇦🇺🇦
Eleventy
The possum is Eleventy’s mascot
Eleventy Documentation
Menu
Eleventy 5.81s
Astro 12.52s

InputPath to URL Pre-release only: v3.0.0-alpha.5

Contents

This plugin allows you to use file system paths in your HTML and they will be automatically transformed to their output URLs. Very useful for robust hyperlinking allowing you to change your output URLs without breaking content links! Works out of the box with permalink remapping, the HTML <base> plugin, etc.

INFO:
This plugin is an implicit alternative to the inputPathToUrl filter. The filter is faster but a bit more verbose.

Inspired by GitHub issue #84.

Usage Jump to heading

You can link to inputPath in any a[href], video[src], audio[src], source, img[src], [srcset] and a whole bunch more (via posthtml-urls) and this plugin will render the correct URL for the template in your output directory.

This uses an Eleventy Transform to modify the output of all template syntaxes that output an .html file.

View this example in: HTML Markdown Liquid Nunjucks 11ty.js Handlebars
Syntax HTML
<a href="my-template.md">Home</a>
Syntax Markdown
[Home](my-template.md)
Syntax Liquid
<a href="my-template.md">Home</a>
Syntax Nunjucks
<a href="my-template.md">Home</a>
Syntax JavaScript (CommonJS)
module.exports = function(data) {
return `<a href="my-template.md">Home</a>`;
}
Syntax JavaScript (ESM)
export default function(data) {
return `<a href="my-template.md">Home</a>`;
}
Syntax Handlebars
<a href="my-template.md">Home</a>

The above all render as the following in your output:

<a href="/my-template/">Home</a>

Installation Jump to heading

Pre-release only: v3.0.0-alpha.5 This plugin is bundled with Eleventy 3.0 and does not require you to install anything from npm. However, the plugin is opt-in (requires you to use addPlugin). It is compatible with all template languages via an Eleventy Transform.

Note that the inputPathToUrl filter is available by default and does not require use of addPlugin.

Open up your Eleventy config file (probably .eleventy.js) and use addPlugin:

View this example in: ESM CommonJS
Filename .eleventy.js (ESM)
import { PathToUrlTransformPlugin } from "@11ty/eleventy";

export default function(eleventyConfig) {
eleventyConfig.addPlugin(PathToUrlTransformPlugin);
};

You’re only allowed one export default in your configuration file, so make sure you only copy the import and the addPlugin lines above!

Expand for full options list
Filename .eleventy.js (ESM)
import { PathToUrlTransformPlugin } from "@11ty/eleventy";

export default function(eleventyConfig) {
eleventyConfig.addPlugin(PathToUrlTransformPlugin, {
// Comma separated list of outputPath file extensions to apply the transform
extensions: "html",
});
};
Filename .eleventy.js (CommonJS)
module.exports = async function(eleventyConfig) {
const { PathToUrlTransformPlugin } = await import("@11ty/eleventy");

eleventyConfig.addPlugin(PathToUrlTransformPlugin);
};

You’re only allowed one module.exports in your configuration file, so make sure you only copy the import and the addPlugin lines above!

Expand for full options list
Filename .eleventy.js (CommonJS)
module.exports = async function(eleventyConfig) {
const { PathToUrlTransformPlugin } = await import("@11ty/eleventy");

eleventyConfig.addPlugin(PathToUrlTransformPlugin, {
// Comma separated list of outputPath file extensions to apply the transform
extensions: "html",
});
};

Other pages in Plugins: