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