Relative url #2516
Replies: 3 comments 2 replies
-
|
I don't think there is an easy way to make links relative. There was a previous discussion in #2099 but that ended up being very specific to a project and felt a bit complex. Generally I just use
You can also set the module.exports = function(eleventyConfig) {
return {
pathPrefix: "/eleventy-base-blog/"
}
}; |
Beta Was this translation helpful? Give feedback.
-
|
I know this thread is old, but I was having the same issue, so dropping this here in case anybody stumbles on it, like me. Assuming my problem is the same as @koteswar-rao's, adding the Relative links in the source folder (eg I don't fully understand why, but adding that I haven't tested this on a live site yet. |
Beta Was this translation helpful? Give feedback.
-
|
With Eleventy 3.0.0 I found a solution that makes everything relative, including internal links, images, head link tags... everything with I can open a built html file without a server ( Should this be an official option? It would make github pages build not need a special I can't find docs for _config/relative-links.js/** Referring to HtmlBasePlugin.js
*
* This plugin tries to make all URLs in the HTML output relative to the page.
*
* Useful for:
* * browsing via file://
* * gh-pages in subdirectory repo
* * unsure where in the directory structure the site will be hosted
*
* We're expecting the internal links to start with "/"
*
* todo?
* * option to include "index.html" for those directory links, for extra file:// compat
*
*/
import path from "path";
export default function (eleventyConfig) {
// Apply to all HTML output in your project
eleventyConfig.htmlTransformer.addUrlTransform(
"html",
function makeUrlRelative(urlInMarkup) {
// Skip empty URLs, non-root-relative URLs, and dev server image transform URLs
if (
!urlInMarkup
|| !urlInMarkup.startsWith("/")
|| urlInMarkup.startsWith("/.11ty/")
|| urlInMarkup.startsWith("//")
) {
return urlInMarkup;
}
// Get base directory path (keep trailing slash for index pages)
const fromDir = this.url.endsWith("/") ? this.url : path.dirname(this.url);
let relativePath = path.relative(fromDir, urlInMarkup);
// Add ./ for same-directory references
if (!relativePath.startsWith(".")) {
relativePath = "./" + relativePath;
}
// Preserve trailing slash from original URL
if (urlInMarkup.endsWith("/") && !relativePath.endsWith("/")) {
relativePath += "/";
}
// console.log(this.url, fromDir, urlInMarkup, relativePath);
return relativePath;
},
{
priority: -1, // run last last (after PathToUrl)
},
);
}eleventy.config.jsimport relativeLinks from "./_config/relative-links.js";
export default async function (eleventyConfig) {
// ... other config
// At end
eleventyConfig.addPlugin(relativeLinks);
} |
Beta Was this translation helpful? Give feedback.
-
|
I had a use case beyond file:// browsing. I needed to publish a subset of my site to a course site with a bunch of subdirectories. |
Beta Was this translation helpful? Give feedback.
-
|
Even without HtmlBasePlugin all my links start with "/" on build. Plus it's easy to write templates with eg |
Beta Was this translation helpful? Give feedback.
-
How to make URL's be relative in 11ty?
Beta Was this translation helpful? Give feedback.
All reactions