在 Web 应用开发中，导航菜单是一个必不可少的组件。如果你正在使用 Metalsmith 这个静态网站生成器，你可以使用可重复使用的 npm 包 metalsmith-menu 来帮助你快速创建导航菜单。
在本文中，我们将学习如何使用 metalsmith-menu 包来实现一个基本的导航菜单。
安装 metalsmith-menu 包
首先，你需要安装 Metalsmith 和 metalsmith-menu 包。你可以使用 npm 包管理器来完成安装：
npm install metalsmith metalsmith-menu --save-dev
设置导航菜单
你需要定义你的导航菜单。如果你有一个简单的目录结构，那么这个任务就很简单。以下是一个示例菜单：
-- -------------------- ---- -------
-
------- -
------ ----
-------- ------
--
-------- -
------ --------------
-------- ------ ----
---------- -
------- -
------ -------------
-------- ---- -----
--
---------- -
------ ----------------
-------- -------- ---
-
-
-
-如你所见，这个菜单有两个主链接（Home 和 About），并且 About 包含一个子菜单（Team 和 Contact）。
添加插件
现在我们需要将 Metalsmith 插件添加到我们的构建流程中。以下是一个示例运行过程：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ---- - ---------------------------
---------------------
----------------
-----------------------
-----------
-
------- -
------ ----
-------- ------
-
--
-
-------- -
------ --------------
-------- ------ ----
---------- -
------- -
------ -------------
-------- ---- -----
--
---------- -
------ ----------------
-------- -------- ---
-
-
-
-
---
-------------------- -
-- ----- ----- ----
------------------ ------- ------------
---在这个示例中，我们创建了一个 Metalsmith 实例，并定义了源和目标目录。然后我们添加了 metalsmith-menu 插件，并提供了定义好的菜单数组。最后，我们执行构建命令并输出日志信息。
创建模板
最后一步是在模板中显示菜单。以下是一个例子模板：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------
-------
------
-----
-------- ---- ------ ---
------
------
------------ ---- -------- ---
-------
-------
-------在这个示例中，我们使用 Mustache 模板引擎来插入菜单和内容。
结论
使用 metalsmith-menu npm 包，你可以轻松地创建可重复使用的导航菜单，从而提高你的静态网站的可访问性和可用性。
我们希望这篇文章能帮助你快速上手 metalsmith-menu 包，并开始构建漂亮的网站菜单。
完整的示例代码请参考 metalsmith-menu-demo 仓库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005591181e8991b448d681d