Relative URLs

Description

The relative_urls plugin converts all URLs in your HTML documents to relative, so you can publish the same site under different domains, subdirectories, or even protocols (like opening the site from the filesystem under file://).

Installation

Import this plugin in your _config.ts file to use it:

import lume from "lume/mod.ts";
import relativeUrls from "lume/plugins/relative_urls.ts";

const site = lume();

site.use(relativeUrls());

export default site;

Example

The plugin converts all internal URLs of your site to relative URLs. For example:

<!-- /articles/my-first-article/ -->
<a href="/articles/my-second-article/">Go to the second article</a>

<!-- /articles/my-first-article/ -->
<a href="../my-second-article/">Go to the second article</a>

This plugin changes not only the <a> elements, but any element with the href attribute (link, area) or src (img, video, audio, etc).