在前端开发中，我们经常需要将一份文档转换为一个网站。Metalsmith 是一个可以帮助我们实现这个目标的静态网站生成器。而 metalsmith-hideshow 这个 npm 包则可以方便地在页面中添加折叠功能，使页面更具可读性和交互性。
安装
首先，安装 Metalsmith 和 metalsmith-hideshow：
$ npm install metalsmith metalsmith-hideshow
配置
要使用 metalsmith-hideshow，我们需要增加一些配置到 Metalsmith 的配置文件中。下面是一个简单的示例配置文件：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- -------- - -------------------------------
---------------------
--------------
---------------------
---------------
--------- -----
------------- -------
----------- -------
---------- ----
---
------------ -- -
-- ----- -
----- ----
-
---参数说明
在上面的 Metalsmith 配置文件中，我们使用了以下参数：
selector
一个 CSS 选择器，用来选中要折叠的文本块的标题。默认为 h2。
collapseText
折叠文本块后，用于展示“展开”按钮的文字提示。默认为 Hide。
expandText
展开文本块后，用于展示“折叠”按钮的文字提示。默认为 Show。
collapsed
用于设置文本块是否初始状态为折叠状态。默认为 true。
示例代码
下面是一个在网页中使用 metalsmith-hideshow 的示例 HTML 代码：
-- -------------------- ---- -------
------
------
--------- ---------------
----- ---------------- -----------------
-------
------
------ ------------
---------------
---- -----------------
------- ---- --- -- ------ -- ----------
------
---------------
---- -----------------
------- ---- ---- --- -- ------ -- ----------
------
------- -------------------------
-------
-------在上述 HTML 代码中，我们使用了 h2 元素作为折叠文本块的标题，并给其添加了 collapse 类。我们只需要在样式文件中加入以下 CSS 代码，即可使用 metalsmith-hideshow 实现交互功能：
.collapse {
display: none;
}
.expanded {
display: block;
}总结
metalsmith-hideshow 是一个简单易用的 npm 包，可以方便地为静态生成的网页增加折叠功能。通过这个包，我们可以为我们的网页增加更多的交互性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3f1d8e776d08040bd5