Modify URLs

配置参数

extensions string[]

The list of extensions this plugin applies to

Default:

[ ".html" ]

fn function

The function to generate the new url

Default:

(url) => url

描述

modify_urls 插件使用一个函数修改你的 HTML 和 CSS 文档中的所有 URL。它被其他插件（如 resolve_urls、relative_urls 和 base_path）在内部使用，但你也可以使用它通过自定义函数来修改 URL。

安装

在你的 _config.ts 文件中导入此插件以使用它：

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

const site = lume();

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

export default site;

示例

要使用它，只需在 _config.js 文件中导入插件并创建一个回调函数来更改 url。例如，假设我们想将所有 URL 转换为小写：

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;

该插件将搜索你的 HTML 文档中的所有 URL（带有 href、src、srcset 和 imagesrcset 属性的元素），并为找到的每个 URL 调用回调函数。回调函数有两个参数：URL 和找到该 URL 的 Page 实例。

修改 CSS 文件内的 URL

默认情况下，该插件仅检查 HTML 页面。你可以使用 extensions 选项将其扩展到 .css 文件。

site.use(modifyUrls({
  extensions: [".html", ".css"], // 修改 HTML 和 CSS 文件内的 URL
  fn: (url) => url.toLowerCase(),
}));