简介
metalsmith-hierarchy 是一个基于 metalsmith 构建的 npm 包，它提供了一种建立网页目录结构的方法。它在打包时通过文件名前缀的方式，将文件组织成层级结构。
安装
在安装 metalsmith-hierarchy 之前，需要先安装 metalsmith。
npm install metalsmith --save
然后，安装 metalsmith-hierarchy。
npm install metalsmith-hierarchy --save
使用方法
配置
在构建你的 metalsmith 静态站点时，你需要在 metalsmith 的 build.js 文件中添加配置。这个配置文件需要引入 metalsmith 和 metalsmith-hierarchy 两个包，并且需要通过 use() 方法将 metalsmith-hierarchy 加入 middleware 链。
-- -------------------- ---- -------
----- ---------- - ----------------------
----- --------- - --------------------------------
---------------------
----------------
-----------------------
----------------
--------------- ----- -- ------ ---------- ------
-------------- ------------- -- -------
----------- ----- ------- -- ------
--------- ---------- -- ------------------------- -- ------
---
------------ -- -
-- ----- ----- ----
------------------ ------------
---配置项
directoryIndex：是否默认使用 index.html 作为目录索引，类型为布尔值，缺省值为 true。indexTemplate：目录索引模板名，类型为字符串，缺省值为 index.html。indexTitle：目录索引标题，类型为字符串，缺省值为 Site Index。getLabel：获取标签函数，可以自定义标签名的生成规则，类型为函数。默认情况下，标签名为文件路径的最后一部分。
示例
假如你的文件夹结构如下：
-- -------------------- ---- -------
----
--- ----------
--- ------------
--- ---------
- --- ----------
- --- ----------
--- ---------
--- ------------
--- ----------------
--- ------------------------通过使用 metalsmith-hierarchy，可以将它转换为层级结构：
-- -------------------- ---- ------- --- ---------- --- ------------ --- --------- - --- ------------ - --- ---------------- - --- ------------------------ --- --------- - --- ---------- - --- ---------- --- ----------
在转换后的目录结构中，index.html 文件是目录索引文件，对应的是源文件夹中的 products/ 和 services/ 文件夹。在这个示例中，我们以默认配置进行了转换，导致 index 文件被插入到了目录结构中。
总结
metalsmith-hierarchy 提供了一种方便易用的方式来建立网页目录结构，使得网站的文件结构更加清晰易懂。它为前端开发者提供了一种新的选择，特别适用于需要大量管理模板文件的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3f1d8e776d08040bd6