在前端开发中，经常需要生成一个网站的地图（sitemap），在这个地图中列出了网站中所有的链接以及它们的层次关系，这对于搜索引擎优化（SEO）非常有帮助。但手动维护这样的网站地图是非常费时且容易出错的。因此，我们可以使用一个叫做 metalsmith-mapsite-json 的 npm 包来自动生成这样的地图。
什么是 metalsmith-mapsite-json
metalsmith-mapsite-json 是一个基于 Metalsmith 的插件，用于生成网站地图的 JSON 文件。使用它可以方便地列出网站的所有链接及其层次关系。Metalsmith 是一个基于 Node.js 的静态网站生成器，通过将一些简单的组件连接在一起，即可构建出具有完整作者信息、新文章订阅和分析、考虑印刷的文章模板等的完整博客。Metalsmith 的每个组件都是一个 Node.js 模块，大部分组件都是通过中间件的方式应用到 Metalsmith 中。
如何使用 metalsmith-mapsite-json
使用 metalsmith-mapsite-json 生成地图很简单，只需按照以下步骤进行即可。
步骤1：安装 metalsmith-mapsite-json
使用 Metalsmith 前，需要安装 Node.js 和 Metalsmith。与其他 Node.js 模块类似，我们可以使用 npm 命令进行安装。
npm install --save metalsmith-mapsite-json
步骤2：编写 Metalsmith 配置
在你的项目根目录下新建一个名为 build.js 的文件，并编写如下内容：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ------- - -----------------------------------
---------------------
-------------
------------
---------------
------------ -- -
-- ----- -
----- ----
-
----------------- --- --------- ----------------
---在上面的代码中，我们通过引入 metalsmith-mapsite-json 模块并在 Metalsmith 的 Pipeline 中加入该模块。.clean(false) 表示不清理 Metalsmith 的输出目录（默认为 "./build"），这对于写一个快速生成的 build.js 文件非常有用。
步骤3：执行脚本
运行 build.js 文件，我们就可以在本地生成地图了。
node build.js
步骤4：查看生成的地图
运行 build.js 文件后，我们可以在目录的生成文件夹中找到地图的 JSON 文件，例如 sitemap.json。我们可以使用文本编辑器来查看这个文件的内容，这个文件遵循的是 Sitemap XML 所要求的结构，如下所示：
-- -------------------- ---- -------
-
---- -
----------- -
-
------ ---------
-------- ------ ----
-------------- ------ ---- ----- --- ---- --- --- -- -----
--
-
------ ------------
-------- -----------
-------------- ---- ------ ----- -- ----------
-
-
-
-在这个地图中，以 / 为根目录，我们有两个子级节点，它们对应了我们网站中的两个页面。
结论
metalsmith-mapsite-json 是一个非常方便的 npm 包，可以快速地帮助我们生成网站的地图。通过本篇文章，我们学习了如何使用它，相信你也可以在你的项目中成功地应用它。
示例代码
以下是一个示例代码，它包含了一个 index.html 和一个 about.html 页面。
-- -------------------- ---- -------
--------- -----
------
------
-----------------------
-------
------
----------- -- --- --------------
----
------ ------------------- -----------
------ ----------------------------------
-----
-------
--------- -------------------- ---- ------- --------- ----- ------ ------ ------------ ---------- ------- ------ --------- ------- ----- --- - ---- -- --- --------------- ------- -------
build.js 文件：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ------- - -----------------------------------
---------------------
-------------
------------
---------------
------------ -- -
-- ----- -
----- ----
-
----------------- --- --------- ----------------
---生成的 sitemap.json 文件：
-- -------------------- ---- -------
-
---- -
----------- -
-
------ ---------
-------- ------ ----
-------------- ------ ---- ----- --- ---- --- --- -- -----
--
-
------ ------------
-------- -----------
-------------- ---- ------ ----- -- ----------
-
-
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005540d81e8991b448d1668