Url filter that outputs relative paths (e.g. ../ or ../../) #648

stingray21 · 2019-08-08T10:38:53Z

I am currently working on a 11ty project and really like it. But I have a problem with the links when I deploy the output. I'd like to deploy it to 2 different locations on separate servers. One of the locations is in the root directory, the other one in a sub-folder. It works like a charm for the one that is located in the root directory, but the other doesn't since all the paths are incorrect.

Is it possible to have relative links in the output?

I already tried pathPrefix, but either I don't use it properly or it just doesn't give me the result I am looking for.

.eleventy.js:

module.exports = eleventyConfig => {

    ...

    // Include our static assets
    eleventyConfig.addPassthroughCopy("images")

    return {
        pathPrefix: "/subfolder/",
        templateFormats: ["md", "njk"],
        markdownTemplateEngine: 'njk',
        htmlTemplateEngine: 'njk',
        passthroughFileCopy: true,

        dir: {
            input: 'site',
            output: 'dist',
            includes: 'includes',
            data: 'globals',
        }
    }

}

When I run eleventy --config=eleventy.config.js --serve, an additional folder gets generated with the name _eleventy_redirect, including an index.html file with:

<!doctype html>
  <meta http-equiv="refresh" content="0; url=/subfolder/">
  <title>Browsersync pathPrefix Redirect</title>
  <a href="/subfolder/">Go to /subfolder/</a>

When I run eleventy --config=eleventy.config.js (without the --serve), that folder isn't there.
However, either way all the links are absolute (e.g. Home is href="/"), and the site doesn't work on the server.

Is there a way to have either relative links (e.g. Home is href="./" on the root index.html and href="../" on sub pages) or at least include the subfolder in the urls (e.g. Home is href="./subfolder/")?

The text was updated successfully, but these errors were encountered:

rolandtoth · 2019-08-10T22:40:24Z

Try href="{{ "/" | url ))", the url filter should take care of this. Imo always add the url filter to links to avoid issues later.

illycz · 2019-09-25T20:22:01Z

I'm trying solve same problem, and I'm actually using root variable.
Not perfect but it's working.

I set root = "../" for page in subfolder in front matter.
I link stylesheet stylesheet with this variable <link rel="stylesheet" href="{{ root }}assets/styles/index.css">

Maybe it's good enough for you too :)

mpalpha · 2020-03-09T18:51:06Z

My solution was to add a relative path filter.

add the filter to .eleventy.js:

  eleventyConfig.addFilter(
    "relative",
    (page, root = "/") =>
      `${require("path").relative(page.filePathStem, root)}/`
  );

Use the filter in "your_layout".njk:

<link rel="stylesheet" href="{{ page | relative }}styles/index.css">

xuhcc · 2020-05-08T17:36:16Z

Thanks @mpalpha !

I tinkered a bit with the filter, here's my version of it:

eleventyConfig.addFilter('relativeUrl', (url, page) => {
    if (!url.startsWith('/')) {
        throw new Error('URL is already relative')
    }
    const relativeUrl = path.relative(page.filePathStem, url)
    return path.relative('..', relativeUrl)
})

<link rel="stylesheet" href="{{ '/css/vendor.css' | relativeUrl(page) }}">

edgarasben · 2020-05-20T16:42:07Z

I don't know if this is related, but I am running into issues using Typora with 11ty.

My markdown links in Typora are like this: [My page](my-page.md). The top links work fine, but if I am on a subpage, the link slug gets added to that subpage.

For example if I am on example.com/pages/cool-page and I click the link My page, I get to a wrong url example.com/pages/cool-page/my-page.

Is there a way to make it so all links are at example.com/pages?

mpalpha · 2020-05-20T18:00:50Z

I have no idea, I don't use Typora. Maybe you could create a markdown function to replace a string with the current relative path.

[My page](@relative@my-page.md)

pdehaan · 2020-05-20T18:04:33Z

For example if I am on example.com/pages/cool-page and I click the link My page, I get to a wrong url example.com/pages/cool-page/my-page.

Isn't that the correct behavior [since the markdown link is relative and not absolute)? If you want it to be example.com/my-page, style, I think you'd have to do [My page](/my-page.md).

edgarasben · 2020-05-20T18:06:29Z

If I change my markdown links, then I am not able to navigate in my markdown editor (Typora). Doing [My page](/my-page.md) brakes the link.

For every page I define a permalink: /posts/my-page/ or /articles/some-article/ . But all markdown files are in the same directory: my-page.md and some-article.md.

mpalpha · 2020-05-20T18:34:11Z

I'm not sure then, sorry.

zachleat · 2020-07-07T12:49:15Z

Sounds like this was resolved, thanks folks!

@edgarasben please file your issue separately!

edgarasben · 2020-07-07T14:43:45Z

@zachleat I think I did? #1197

mpalpha · 2020-07-23T21:28:15Z

I ended up going with a global {{ rootPath }} variable which is relative to the current page.
Inside your data directory create a file called eleventyComputed.js

edited: switched to .reduce and added a filter

module.exports = {
  rootPath: (data) =>
    data.page.url
    .split('/')
    .reduce((a, b) => a+(b && '../'),)
}

{{ rootPath }}

or

const Path = require('path')
eleventyConfig.addFilter("relative", function (url) {
  return Path.join(
    './',
    this.ctx.page.url.split('/').reduce((a, b) => a + (b && '../')),
    url
  )
})

{{ page.url | relative }}

illycz · 2020-07-24T12:07:20Z

Thanks @mpalpha
I'm edited you solution little bit, because iť not working when the site is in folder.

module.exports = {
  rootPath: function(data) {
    return data.page.url
      .split('/')
      .filter(function(x) {
        return x;
      })
      .map(function() {
        return '../';
      })
      .join('');
  }
}

And then use it like this: {{ rootPath }}assets/styles.css

mluce194 · 2020-12-04T11:11:06Z

I am having the same issue since I am working with a Website hosted in a subfolder. I managed to change the urls for css stylesheets and thumbnails images, however I did not succeed in changing them for posts urls.

michaelfig · 2021-12-06T00:40:03Z

I put my solution for this problem, which is a mishmash of the other suggestions here, and fitting my own site's requirements at: https://www.npmjs.com/package/eleventy-filter-relative-url

btjanaka · 2021-12-14T21:02:55Z

I came up with another solution which tweaks some of the solutions from here. It doesn't seem like filters get the this.page context, so I used a shortcode instead.

  eleventyConfig.addShortcode("url2", function (url) {
    if (!url.startsWith("/")) {
      throw new Error("URL is already relative");
    }
    // See https://www.11ty.dev/docs/languages/liquid/ for more info on page
    // variables.
    const relativeUrl = path.relative(this.page.url, url); // Use page.url instead of page.filePathStem
    return relativeUrl;
  });

Usage:

{% url2 "/your/absolute/url" %}

graphicore · 2024-10-03T18:31:56Z

Thanks @mpalpha and @illycz

I put your rootPath solution directly into my eleventy.config.mjs.

    eleventyConfig.addGlobalData('eleventyComputed.rootPath', ()=>{
        return data=>data.page.url
                .split('/')
                .filter(x=>x)
                .map(()=>'../')
                .join('');
        }
    );

usage : {{ rooPath }}assets/styles.css

Note that the function passed to eleventyConfig.addGlobalData('eleventyComputed.rootPath' returns itself a function, it's documented.

stingray21 added the education label Aug 8, 2019

stingray21 changed the title ~~Is it possible to have relative paths the output?~~ Is it possible to have relative paths in the output? Aug 8, 2019

illycz mentioned this issue Sep 25, 2019

Relative assets path ianrose/deventy#6

Closed

edgarasben mentioned this issue May 20, 2020

Absolute link paths based on input folder #1197

Open

adamduncan mentioned this issue Jun 6, 2020

Apache Content Negotiation and Eleventy #761

Closed

zachleat changed the title ~~Is it possible to have relative paths in the output?~~ Url filter that outputs relative paths (e.g. ../ or ../../) Jul 7, 2020

zachleat closed this as completed Jul 7, 2020

theecrit mentioned this issue Jan 15, 2022

Fix link paths openoakland/funding-public-safety#51

Closed

jaedoak mentioned this issue Feb 17, 2022

Get relative paths working for images openoakland/funding-public-safety#66

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Url filter that outputs relative paths (e.g. ../ or ../../) #648

Url filter that outputs relative paths (e.g. ../ or ../../) #648

stingray21 commented Aug 8, 2019

rolandtoth commented Aug 10, 2019

illycz commented Sep 25, 2019

mpalpha commented Mar 9, 2020

xuhcc commented May 8, 2020

edgarasben commented May 20, 2020 •

edited

Loading

mpalpha commented May 20, 2020

pdehaan commented May 20, 2020

edgarasben commented May 20, 2020 •

edited

Loading

mpalpha commented May 20, 2020

zachleat commented Jul 7, 2020

edgarasben commented Jul 7, 2020

mpalpha commented Jul 23, 2020 •

edited

Loading

illycz commented Jul 24, 2020 •

edited

Loading

mluce194 commented Dec 4, 2020

michaelfig commented Dec 6, 2021

btjanaka commented Dec 14, 2021 •

edited

Loading

graphicore commented Oct 3, 2024

Url filter that outputs relative paths (e.g. ../ or ../../) #648

Url filter that outputs relative paths (e.g. ../ or ../../) #648

Comments

stingray21 commented Aug 8, 2019

rolandtoth commented Aug 10, 2019

illycz commented Sep 25, 2019

mpalpha commented Mar 9, 2020

xuhcc commented May 8, 2020

edgarasben commented May 20, 2020 • edited Loading

mpalpha commented May 20, 2020

pdehaan commented May 20, 2020

edgarasben commented May 20, 2020 • edited Loading

mpalpha commented May 20, 2020

zachleat commented Jul 7, 2020

edgarasben commented Jul 7, 2020

mpalpha commented Jul 23, 2020 • edited Loading

illycz commented Jul 24, 2020 • edited Loading

mluce194 commented Dec 4, 2020

michaelfig commented Dec 6, 2021

btjanaka commented Dec 14, 2021 • edited Loading

graphicore commented Oct 3, 2024

edgarasben commented May 20, 2020 •

edited

Loading

edgarasben commented May 20, 2020 •

edited

Loading

mpalpha commented Jul 23, 2020 •

edited

Loading

illycz commented Jul 24, 2020 •

edited

Loading

btjanaka commented Dec 14, 2021 •

edited

Loading