Modify URLs

Options

fn function

The function to generate the new url

Default:

(url) => url

Description

The modify_urls plugin modifies all URLs in your HTML & CSS documents using a function. It's used internally by other plugins like resolve_urls, relative_urls and base_path, but you can use it to modify URLs using a custom function.

Installation

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

import lume from "lume/mod.ts";
import modifyUrls from "lume/plugins/modify_urls.ts";

const site = lume();

site.use(modifyUrls(/* Options */));

export default site;

Example

To use it, just import the plugin in the _config.js file and create a callback to change the url. For example, let's say we want to convert all URLs to lowercase:

import lume from "lume/mod.ts";
import modifyUrls from "lume/plugins/modify_urls.ts";

const site = lume();

site.use(modifyUrls({
  fn: (url) => url.toLowerCase(),
}));

export default site;

The plugin will search all URLs in your HTML documents (elements with href, src, srcset, form[action] and imagesrcset attributes) and CSS files (like url() functions and @import ... at-rules) and invoke the callback for every URL found. The callback has two arguments: the URL and the Page instance where that URL was found. If the URL has found in a HTML document, the element containing the URL (link, image, etc) is passed as the third argument.