在现代web开发中，使用gitbook完善文档管理，是很普遍的选择。gitbook-plugin-web-header是一个npm包，可以在gitbook中使用。该npm包为gitbook添加Web Header，使之美观而又个性化。
安装
在命令行键入如下命令，安装gitbook。
npm install -g gitbook
安装gitbook-plugin-web-header npm包。
npm install gitbook-plugin-web-header
配置gitbook
在你的书籍的 book.json 文件中，添加如下代码：
-- -------------------- ---- -------
-
---------- ---------------
---------------- -
------------- -
-------- ---- --------
------- -----------------------------------
------- -
-------- ------- ------- --------------
-------- -------- ------- ---------------
-------- ---------- ------- ----------------
-
-
-
-其中，"title" 、"logo" 和 "menu" 是Web Header的设置项。
- title: 即为Web Header中的主标题
- logo: 可以是一个图片的url，用于在Web Header上显示网站logo
- menu: 是一个数组，用于设置导航链接，每个数组元素都必须包含 "name" 和 "link" 两个属性
示例代码：
-- -------------------- ---- -------
-
---------- ---------------
---------------- -
------------- -
-------- --- ------
------- -----------------------------------------------------------------------------------
------- -
-------- ------- ------- -----
-------- -------- ------- ---------------
-------- -------- ------- ---------------
-------- ---------- ------- ----------------
-
-
-
-运行gitbook
在你的书籍文件夹下执行如下命令：
gitbook serve
用浏览器访问 http://localhost:4000，即可看到添加的Web Header。
深入底层
如果你想要深入理解该npm包的实现，可以通过以下步骤进行调试。
在该npm包的根目录下，执行如下命令安装依赖：
npm install
在该npm包的根目录下，执行如下命令打包：
npm run build
在指南针插件根目录下，执行如下命令，安装gitbook集成环境：
gitbook install
在指南针插件根目录下，执行如下命令，启动gitbook服务：
gitbook serve
指导意义
使用npm包gitbook-plugin-web-header，可以很方便地在gitbook的网页端添加Web Header。Web Header不仅能够美化你的书籍页面，还可以为你的书籍添加网站logo和导航菜单等功能。
同时，通过学习该npm包的实现，同样可以加深你对gitbook的理解和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552cc81e8991b448d0334