乐趣区

gitbook常用的插件

jiezi

1. 说明

Gitbook 默认自带有 5 个插件：

highlight：代码高亮
search：导航栏查询功能（不支持中文）
sharing：右上角分享功能
font-settings：字体设置（最上方的 ”A” 符号）
livereload：为 GitBook 实时重新加载

gitbook 插件可以解决一些网站不太方便的地方，如侧边栏导航不能收缩，自带搜索不支持中文等。

插件安装、使用方法：

1、在 book.json 的 plugins 参数中添加插件名。
2、终端使用 gitbook install 来安装插件，或使用 NPM 命令来单独安装：npm install gitbook-plugin- 插件名。
3、重启服务或者重新打包就能看见效果。

注意：
1、插件一定先要在 book.json 文件里面 plugins 中才能生效，如果只是安装了插件，而没配置的话是不会生效的。
1、gitbook 命令安装慢，而且是全部插件都安装一遍，如果只安装一个插件的话建议使用 NPM 命令安装。

2. search-pro 高级搜索（支持中文）

search-pro 支持中文搜索，在使用此插件之前，需要将默认的 search 和 lunr 插件去掉。
在 book.json 的 plugins 参数中添加插件名：

{
    "plugins": ["-lunr", "-search", "search-pro"]
}

其中 ”-search” 中的 - 符号代表去除默认自带的插件。
然后使用npm install gitbook-plugin-search-pro --registry=https://registry.npm.taobao.org/

3. chapter-fold 左侧目录折叠

支持多层目录，点击导航栏的标题名就可以实现折叠扩展。
在 book.json 的 plugins 参数中添加插件名：

{"plugins": ["chapter-fold"]
}

然后使用 npm install gitbook-plugin-chapter-fold 命令安装插件。
使用效果如下图(右边是使用后的效果):

还有两个插件的功能也是左侧章节目录折叠：

{
    "plugins": [
         "expandable-chapters-small",
         "expandable-chapters"
    ]
}

这两个插件的唯一区别是 -small 的插件箭头小，这两个插件要点击箭头才能折叠章节目录。
安装命令：
npm install gitbook-plugin-expandable-chapters-small
npm install gitbook-plugin-expandable-chapters

4. splitter 侧边栏宽度可调节

在 book.json 的 plugins 参数中添加插件名：

{"plugins": ["splitter"]
}

然后使用 npm install gitbook-plugin-splitter 命令安装插件。
使用效果如下图:

5. 生成页内目录

5.1 page-treeview 在页面顶部显示目录

不需要插入标签，能支持到 6 级目录，在页面顶部显示。
在 book.json 的 plugins 参数中添加插件名：

{"plugins": ["page-treeview"],
    "pluginsConfig": {
        "page-treeview": {
            "copyright": "Copyright © aleen42",
            "minHeaderCount": "2",
            "minHeaderDeep": "2"
        }
    }
}

插件的配置项可以不填。
然后使用 npm install gitbook-plugin-page-treeview 命令安装插件。
使用效果如下图:

目录线面一行版权的信息，如果想要删除，需要在插件目录中打开：/node_modules/gitbook-plugin-page-treeview/lib/index.js。
大约 43 行，在 generateContent 方法定义中，该方法的返回值

return renderContent ? `<div class="treeview__container">${copyRight + renderContent}</div>` : '';
// 改成：return renderContent;

然后重启服务或重新打包。

注意：
1、此方法适用于 3.0.1 版本的，其他版本如果没有请搜索 renderContent,options.copyright,>Treeview< 尝试。
2、如果你重新安装了这个插件，那么就需要从新修改插件文件。

5.2 悬浮按钮目录

page-toc-button、ancre-navigation、anchor-navigation-ex

{
    "plugins" : [ 
        "page-toc-button",
        "ancre-navigation",
        "anchor-navigation-ex"
    ],
    "pluginsConfig": {
        "page-toc-button": {
            "maxTocDepth": 2,  // 标题的最大深度（2 = h1 + h2 + h3）。不支持值 > 2。"minTocSize": 2    // 显示 toc 按钮的最小 toc 条目数。}
    }
}

安装：

npm install gitbook-plugin-page-toc-button
npm install gitbook-plugin-ancre-navigation
npm install gitbook-plugin-anchor-navigation-ex

page-toc-button插件在页面右上角生成一个黑色的按钮，鼠标移入后会显示黑色的目录。
ancre-navigation插件页面右上角生成一个白色的按钮，页面右下角生成一个返回顶部的按钮。
anchor-navigation-ex页面右上角生成一个灰色的按钮，鼠标移入后会显示灰色的目录。

参考资料

gitbook 实用插件
http://gitbook.zhangjikai.com…
https://blog.csdn.net/weixin_…

退出移动版