前言
你是否有过这样的经历：当你改变了你的网站的排版（比如说把所有的博客文章从 /blog/ 变成 /articles/）时，你必须让你的老朋友们知道这个变化？或者你的网站域名发生了变化，或者你的某些 URL 发生了变动，但是你有很多的后续链接是指向旧地址的。那么怎么避免这些链接失效？
Metalsmith-Redirect 这个小巧的 npm 软件包提供了一种简单的方法来解决这些问题。在本教程中，我们将深入了解如何使用这个 npm 软件包来重新定向你的 URL，从而减少你的读者和搜索引擎遇到 dead link 的概率。
安装和初始化
Step 1: 首先，我们应该在你的项目中安装 MetalSmith 和 MetalSmith-Redirect。执行以下命令：
--- ------- ---------- ------------------- ----------
Step 2: 接下来，我们需要在项目的根目录中创建并编辑 metalsmith.js 文件。MetalSmith 是一个静态站点生成器，可以用来管理你的站点的所有内容（包括你所要更改的 URL）。
在 metalsmith.js 文件中，输入如下代码：
----- ---------- - ----------------------
----- -------- - -------------------------------
---------------------
---------------- --------
---------------------- --------
---------------
----------- -----------
------------------- ---------------------------
---
-------------------- -
-- ----- -
----- ----
-
---------------------
---上面的代码中，我们首先引入了 metalsmith 和 metalsmith-redirect。接下来，我们启动了 metalsmith。在 metalsmith() 中，我们指定了输入源码目录和输出目标目录。而在 use() 中，我们创建一个对象，其中存储了我们需要重新定向的 URL 链接。
.js 文件中的修改后的 URL 格式应该如下所示：
-
----------- -----------
------------------- ---------------------------
-Step 3: 最后，通过执行以下命令来构建（或重新构建）你的站点：
---- -------------
你可能会注意到，MetalSmith-Redirect 并不是一个用于处理你的代码的惰性加载程序。否则，即使你已添加转发规则，Metalsmith 也不会应用它们。因此，为保持转发规则的状态并确保在重新构建站点时启用它们，请始终运行该命令。
代码示例
以下为一个示例，演示了如何使用 MetalSmith-Redirect 对 URL 进行重定向。
首先，我们创建一个名为 my-site 的新目录：
----- ------- -- -------
接下来，我们将初始化该目录，安装 MetalSmith 和 MetalSmith-Redirect，并创建一些基础文件和目录：
--- ---- --- ------- ---------- ------------------- ---------- ----- --- ----- -------------- ---- ------- ------ - --------------
现在，我们可以打开 metalsmith.js 并创建必要的重定向规则：
----- ---------- - ----------------------
----- -------- - -------------------------------
---------------------
----------------
----------------------
---------------
----------- -----------
------------------- ---------------------------
---
-------------------- -
-- ----- -
----- ----
-
---------------------
---注意，这里我们创建了两条设置重定向的规则。第一个规则指定了在 /old-url 的地址到 /new-url 的重定向。第二个规则指定了在 /another-old-url 的地址到 https://google.com/new-url 的重定向。
最后，我们运行以下命令来生成我们的站点：
---- -------------
您现在应该在 dist/ 目录中看到一个 index.html 文件。打开它，你会发现里面的内容就是 ‘Hello, World’。
现在，我们可以编写一个简单的测试，在浏览器中验证重定向是否按预期工作：
----- ---- -- ---- ----- ---------- ---- ------ -------------------- -------------------------- - ----------
该测试创建一个名称为 index.html 的文件，并包含一个 HTML 刷新元标记来重定向浏览器到 /old-url 的地址。
现在，我们打开浏览器，输入以下地址：
---------------------------------------
浏览器会自动重定向到我们在 MetalSmith-Redirect 中指定的新地址（即 /new-url）。
总结
通过使用 MetalSmith-Redirect，我们可以轻松地将网站中的 URL 重定向到新地址，从而确保你的读者和搜索引擎都不会遇到死链。虽然这个 npm 软件包在使用时需要小心谨慎，但在大多数情况下，它是一种快速而简单的解决方案。
因此，我建议你始终使用它来管理你的 URL 地址，并定期更新它们。这可以提高你的用户体验，并有助于改善你在搜索引擎中的排名。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedcbe8b5cbfe1ea06126b2