GitHub 是全球最大的开源代码托管平台，每天有成千上万的开发者在上面共同协作。而 gh-panels 则是来自于社区贡献者的一个开源工具包，它可以快速为 GitHub Pages 站点添加侧边栏导航，提升文档阅读的易用性和体验。本篇文章将详细介绍如何使用 npm 包 gh-panels，在你的项目中添加侧边栏导航。
安装 gh-panels
首先，打开终端工具，进入你的项目目录下，通过 npm 命令安装 gh-panels:
npm install gh-panels
配置 gh-panels
在安装成功后，我们需要对 gh-panels 进行一些设置。 进入到你的项目目录，创建 index.js 文件：
-- -------------------- ---- -------
----- -------- - --------------------
----- ------ - -
-
------ -------
------ -
-
------ -------
----- ------------
--
-
------ -------
----- ------------
-
-
-
-
----------------这里的 panels 参数是一个数组对象，在它的每个元素中设置了标题和页面。标题会显示在你的文档展开菜单中，pages 属性则指定了页面的名称和路径。 请注意，这里的路径是相对于项目根目录而非 gh-pages 分支下的路径。
自定义 gh-panels 样式
gh-panels 默认提供了一个样式文件，在很多情况下就足够使用了。但如果你想要自定义 gh-panels 的样式，你可以在你的项目中创建 gh-panels.css 文件，并在 index.html 中引入它。
<link rel="stylesheet" href="gh-panels.css">
你可以根据需要调整样式，使它符合你的站点风格。
部署 gh-panels
在完成 gh-panels 的配置后，可以通过以下命令部署 gh-panels:
gh-pages -d .
这里使用了 gh-pages 工具，它可以将 gh-panels 部署到 GitHub Pages 站点上。
示例代码
这里提供一个完整的示例代码，它展示了如何使用 gh-panels 添加简单的导航。
-- -------------------- ---- ------- --------- ----- ------ ------ --------- --------------- ----- ---------------- ----- --------------- ---------------------------- ----------------- ----- ---------------- ----------------- ----- ---------------- --------------------- ------- ------ ---- ---------------- ----------------------- ------ ------ ------- --------- ---------- -- -- ------------ ------- ------- ---- ----------------- --------------------- -------- ----------------------- ------ ------- ------------------------ ------- ---------------------------- ------- -------
-- -------------------- ---- -------
----- -------- - --------------------
----- ------ - -
-
------ ------
------ -
-
------ ------
----- ------------
--
-
------ ------
----- ------------
-
-
--
-
------ ------
------ -
-
------ ------
----- ------------
--
-
------ ------
----- ------------
-
-
-
-
----------------总结
通过 gh-panels，我们可以快速为 GitHub Pages 站点添加侧边栏导航，从而提供更好的用户体验。这个小工具相对简单易用，允许快速创建内容清单，同时还提供了一定的自定义样式功能。如果你需要为项目添加文档、教程等内容，试试 gh-panels 吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f5d9381d61a3540eb9