Metalsmith 是一个静态站点生成器，它可以通过插件来处理源文件并生成静态网页。其中，metalsmith-relative 插件可以帮助我们相对路径转换，实现页面链接的绝对化。
安装
使用 npm 来安装 metalsmith-relative：
npm install metalsmith-relative --save-dev
配置
在 Metalsmith 的配置文件中，引入和使用 metalsmith-relative 插件:
const Metalsmith = require('metalsmith');
const relative = require('metalsmith-relative');
Metalsmith(__dirname)
.use(relative())
.build();当然，你也可以通过传递一些参数来自定义转换规则，比如：
Metalsmith(__dirname)
.use(relative({
directory: 'dist',
absolute: true,
symlinks: false,
pattern: '**/*.html'
}))
.build();上述代码表示将转换后的链接为绝对路径，并且只匹配 HTML 文件。
参数说明
directory：指定相对路径的起始目录，默认为项目根目录。absolute：设置为 true，则转换后的链接为绝对路径，否则为相对路径，默认为 false。symlinks：设置为 false，不会解析符号链接，默认为 true。pattern：匹配要转换的文件类型，默认为**/*。
示例
下面是一个简单的示例，将所有 Markdown 文件和 HTML 文件中的相对链接转换为绝对路径：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- -------- - -------------------------------
----- ------- - ------------------------------
----- -------- - -------------------------------
---------------------
----------------
----------------------
------------
----------------
---------------
--------- -----
-------- ----------------
---
--------------
------- -------------
---------- -----------
---
------------ -- -
-- ----- ----- ----
------------------ ------------
---在上述示例中，我们使用了 metalsmith-markdown 和 metalsmith-layouts 插件来处理 Markdown 文件和模板布局。同时，我们也使用了 metalsmith-relative 来将相对链接转换成绝对路径。
总结
metalsmith-relative 是一个非常实用的插件，可以帮助我们解决静态站点生成过程中的相对链接问题，并且使用起来也非常简单。通过本文的介绍，你应该已经掌握了使用方法和参数配置，可以开始尝试在自己的项目中使用了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/45532