在前端开发领域中，随着技术的不断发展，许多 npm 包被开发出来，为我们的开发提供了极大的便利。其中，metalsmith-relativity 就是一个非常有用的 npm 包，它可以帮助我们在静态网站生成器 metalsmith 中轻松处理页面之间的相对路径问题。
在本文中，我们将详细介绍如何使用 metalsmith-relativity，并带你一步步了解如何安装和配置该工具。
1. 安装 metalsmith-relativity
首先，我们需要在命令行中输入以下指令来安装该 npm 包：
npm install metalsmith-relativity --save
2. 设置 metalsmith-relativity
在完成安装之后，我们需要在 metalsmith 配置文件中进行相关设置。以下是一个简单的示例：
var metalsmith = require('metalsmith')
var relativity = require('metalsmith-relativity')
metalsmith(__dirname)
.use(relativity())
.build()这里，我们首先引入 metalsmith 和 metalsmith-relativity 模块，然后通过 .use(relativity()) 来设置 metalsmith-relativity。它会负责处理页面之间的相对路径问题。
3. 使用 metalsmith-relativity
现在，我们已经成功地安装和配置了 metalsmith-relativity，接下来就可以开始使用它了。
在 metalsmith-relativity 中，有两个主要的选项可以设置：root 和 siteUrl。root 选项用于指定相对路径的根目录，而 siteUrl 选项则用于指定网站的 URL。
例如，我们可以在页面中使用以下代码来引用其他页面：
<a href="/about.html">关于我们</a>
在这个示例中，我们使用相对于根目录的路径来引用另一个页面。如果我们没有设置 root，那么在生成的网站中，这个链接可能会失效，因为它没有正确地相对于我们的网站根目录进行设置。但是在设置了 root 后，metalsmith-relativity 会自动为我们处理这个问题。
在设置了 root 和 siteUrl 后，我们还可以使用 useAbsoluteUrls 选项，使得所有的链接都变成绝对路径。
下面是一个示例，在 metalsmith 中使用 metalsmith-relativity：
-- -------------------- ---- ------- --- ---------- - --------------------- --- -------- - ------------------------------ --- ---------- - -------------------------------- --------------------- ----------------- ----- ---- -------- ---------------------- ---------------- ----- --- ---------------- --------
4. 使用示例
现在，我们来看一个具体的使用示例。
假设我们有以下目录结构：
my-site/
|- src/
|- index.md
|- about.md
|- contact.md
|- build.js
|- package.json其中，src 目录中包含了我们的页面，我们希望生成一个静态网站，其中页面之间可以相互链接。
首先，我们需要在 package.json 中添加以下依赖项：
{
"devDependencies": {
"metalsmith": "^2.3.0",
"metalsmith-markdown": "^0.7.2",
"metalsmith-relativity": "^0.4.0"
}
}然后，我们在 build.js 中添加以下代码：
-- -------------------- ---- ------- --- ---------- - --------------------- --- -------- - ------------------------------ --- ---------- - -------------------------------- --------------------- ---------------- ----------------------- ----------------- ----- ---- -------- ---------------------- ---------------- ----- --- ---------------- -------------------- ------ - -- ----- ----- --- ------------------ ---------- --
现在，我们使用以下命令来运行 build.js ：
node build.js
成功生成静态网站后，我们可以访问 build 文件夹来查看生成的网站，其中可以正确地处理页面之间的链接。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f411d8e776d08040d55