Path prefix for relative paths in Eleventy markdown links

Question

How can I prefix relative links defined in markdown documents when I run eleventy to build static pages from my markdown and templates.

I use ./docs as the output directory to build the documentation pages from markdown documents and a html template in the ./eleventy directory of my project.

npx eleventy --input ./eleventy --output ./docs --formats=md

How could I prefix all the relative links with /foo ?

I had a look at url filter and the pathprefix option for the build command but I don't get it.

Where would I set the url filter? In the markdown? In the eleventy config?

Answer 1

You can pass this as an environment variable, and then create a template function which you use in your templates.

1. prefix the shell command with the environment variable:

MY_PREFIX=/prefix npx eleventy --input ./eleventy --output ./docs --formats=md

2. add the following to your .eleventy.js:

eleventyConfig.addShortcode("myPrefix", () => process.env.MY_PREFIX);

3. use it in your template (assuming Nunjucks)

<a href="{% myPrefix %}/some-page"></a>

Answer 2

If you used relative path, url filter will only return the same path as explained in the docs, since no need to modify relative path right? It will always work

Assuming markdown use liquid/nunjucks:

// firstpost.md - relative path to second post

<a href="{{ '../secondpost/' | url }}">Second post</a> #return ../secondpost/

Consider using:

// firstpost.md - absolute path to second post

<a href="{{ '/secondpost/' | url }}">Second post</a> #return /docs/secondpost/

and in .eleventy.js

module.exports = {

    ...

    pathPrefix: "/docs/"
};