Base path

自动添加一个基础路径到所有 URL

配置参数

extensions string[]

The list of extensions this plugin applies to

Default:
[ ".html" ]

描述

base_path 插件通过预先添加 location setting 的路径来修复 HTML 文档中所有的 URL。如果你的网站托管在子目录中,这将非常有用。

它会搜索 HTML 页面中带有 hrefsrcsrcsetimagesrcset 属性的任何元素,并自动修复 URL。请注意,此插件仅适用于 HTML 页面,不会修复 CSS 或 JavaScript 文件。

安装

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

import lume from "lume/mod.ts";
import basePath from "lume/plugins/base_path.ts";

const site = lume();

site.use(basePath());

export default site;

示例

假设我们将网站的 location 配置为 https://my-site.com/blog/。这意味着所有路径 URL 都应该在 /blog/ 目录下。

import lume from "lume/mod.ts";
import basePath from "lume/plugins/base_path.ts";

const site = lume({
  location: new URL("https://my-site.com/blog/"), // ← 注意路径 /blog/
});

site.use(basePath());

此插件将修复所有像这样的绝对路径:

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

预先添加 /blog/ 前缀:

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

修改 CSS 文件中的 URL

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

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