Relative URLs

配置参数

extensions string[]

The list of extensions this plugin applies to

Default:

[ ".html" ]

描述

relative_urls 插件将您的 HTML 文档中的所有 URL 转换为相对地址， 这样您就可以在不同的域名、子目录，甚至协议（例如从文件系统以 file:// 协议打开站点）下发布相同的站点。

安装

在您的 _config.ts 文件中导入此插件即可使用：

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

const site = lume();

site.use(relativeUrls());

export default site;

示例

此插件将您站点中的所有内部 URL 转换为相对 URL。例如：

<!-- /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>

此插件不仅会更改 <a> 元素，还会更改任何带有 href 属性（link、area）或 src 属性（img、video、audio 等）的元素。

修改 CSS 文件中的 URL

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

site.use(relativeUrls({
  extensions: [".html", ".css"], // 修复 HTML 和 CSS 文件中的 URL
}));