乐趣区

gitbook常用的插件

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_…

退出移动版