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, and imagesrcset attributes) and invoke the callback for every URL found. The callback has two arguments: the URL and the Page instance where that URL was found.

Modify URLs inside CSS files

By default, the plugin only checks HTML pages. You can use the extensions option to extend it to .css files.

site.use(modifyUrls({
  extensions: [".html", ".css"], // Modify URLs inside HTML and CSS files
  fn: (url) => url.toLowerCase(),
}));