- Stable
2.0.1
- Beta
3.0.0-beta.1
- Canary
3.0.0-alpha.18
Toggle Menu
5.81s
43.36s
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.
inputPathToUrl
filter. The filter is faster but a bit more verbose.Inspired by GitHub issue #84.
Usage
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.
<a href="my-template.md">Home</a>
[Home](my-template.md)
<a href="my-template.md">Home</a>
<a href="my-template.md">Home</a>
module.exports = function (data) {
return `<a href="my-template.md">Home</a>`;
};
export default function (data) {
return `<a href="my-template.md">Home</a>`;
}
<a href="my-template.md">Home</a>
The above all render as the following in your output:
<a href="/my-template/">Home</a>
- The paths used here should be relative to the input directory though they can be relative to the project root (the former is simpler and more robust).
- As this transform is implicit it does not error when an inputPath match is not found—it only returns the original URL string.
- When pointing to a Pagination template, the first URL in the pagination set is returned.
Installation
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
:
import { InputPathToUrlTransformPlugin } from "@11ty/eleventy";
export default function (eleventyConfig) {
eleventyConfig.addPlugin(InputPathToUrlTransformPlugin);
}
You’re only allowed one export default
in your configuration file, so make sure you only copy the import
and the addPlugin
lines above!
module.exports = async function (eleventyConfig) {
const { InputPathToUrlTransformPlugin } = await import("@11ty/eleventy");
eleventyConfig.addPlugin(InputPathToUrlTransformPlugin);
};
You’re only allowed one module.exports
in your configuration file, so make sure you only copy the import
and the addPlugin
lines above!