Base path
自动添加一个基础路径到所有 URL
配置参数
- extensions string[]
The list of extensions this plugin applies to
Default:[ ".html" ]
描述
base_path
插件通过预先添加 location setting 的路径来修复 HTML 文档中所有的 URL。如果你的网站托管在子目录中,这将非常有用。
它会搜索 HTML 页面中带有 href
、src
、srcset
和 imagesrcset
属性的任何元素,并自动修复 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
}));