Gitbook详解（五）-插件的配置和使用详解

1. 介绍

本章主要来详细的介绍一下 Gitbook 中的 插件 相关的配置和使用。在 Gitbook 中可以在书籍的配置文件 book.json 中来进行插件的相关配置。比如有很多好用的插件，可以很好的拓展书籍的外观，可用性或者其他方便的使用，所以接下来就一起来看看 Gitbook 中插件的使用吧。

配置的方法是在配置文件的 plugins 中添加需要的插件名称即可。

如下所示：

"plugins": [
    "search",
    "highlight",
    "sharing",
    "font-settings",
    "livereload",
    ...
]

1.1 默认插件

Gitbook 中默认带有 5 个插件：

名称	说明
highlight	语法高亮插件，代码高亮功能
search	搜索插件，不支持中文搜索
sharing	分享插件，右上角分享功能
font-settings	字体设置（最上方的"A"符号）
livereload	热加载插件，为 GitBook 编辑进行实时重新预览加载

1.2 禁用自带的插件

如果需要去除或者禁用 Gitbook 中的某个插件，可以在插件名称前面加 - 。

如下所示：

"plugins": [
    "-search",
    "-highlight",
    "-sharing",
    "-font-settings",
    "-livereload",
    ...
]

1.3 添加插件列表

如果需要添加一些第三方的自定义插件，可以在 plugins 中添加需要的插件名称列表。

注意：

• 有的第三方的插件可能和默认的插件有重复，或者替代默认插件的，需要禁用对应的默认插件，具体用法一般参考对应插件的使用说明。
• 第三方插件使用的话，可能会破坏书籍的结构，所以使用上需要注意！

例如：

"plugins": [
		"-search",
        "advanced-emoji",
        "search-pro",
        "github",
        "splitter",
        "anchor-navigation-ex",
        "chapter-fold",
        "expandable-chapters-small",
        "code",
        "alerts",
        "insert-logo",
        "flexible-alerts",
        ...
    ]

1.4 插件属性配置 pluginsConfig

配置插件的属性在书籍配置文件中的 pluginsConfig 中进行相关插件的属性配置。

例如：配置insert-logo 插件的相关属性

"pluginsConfig": {
   
       "insert-logo": {
   
           "url": "jim-logo.png",
           "style": "background: none; max-height: 100px; min-height: 30px"
       }
   }

2. 实用插件

Gitbook 中的第三方插件有很多，在此就不进行一一的介绍了。下面就根据博主了解或者使用过的插件，简单整理一些实用的插件进行介绍一下吧。

第三方插件使用方法：

• 在配置文件 book.json 中添加 "plugins" 和 "pluginConfig" 字段，然后执行 gitbook install 来进行插件的安装
• 使用NPM安装 npm install gitbook-plugin-插件名 进行安装
• 从源码 GitHub 地址中下载，放到 node_modules 文件夹里安装

提示：

1. 推荐使用配置文件 book.json 配置的方法进行安装，下面主要通过这种方式来进行介绍安装和配置第三方的插件的简单使用。
2. 更详细的配置或者使用方法，以及效果图，请参考每一个插件后面贴出官方参考链接。

详细效果可以参考：

https://jiangminggithub.github.io/gitbook/

https://jiangming_gitee.gitee.io/gitbook/

2.1 insert-logo 插入logo

将自己的logo图片插入到导航栏上方中，定制显示自己的 logo 标识。

{
   
    "plugins": [ "insert-logo" ]
    "pluginsConfig": {
   
      "insert-logo": {
   
        "url": "./jim-logo.png",
        "style": "background: none; max-height: 100px; min-height: 30px"
      }
    }
}

插件 Github 地址：https://github.com/matusnovak/gitbook-plugin-insert-logo

2.2 favicon 更改网站的图标

自定义的网站图标的插件，可以将自己的 logo 图标设置为网站的图标。

{
   
    "plugins": [
        "favicon"
    ],
    "pluginsConfig": {
   
        "favicon": {
   
            "shortcut": "assets/images/favicon.ico",
            "bookmark": "assets/images/favicon.ico",
            "appleTouch": "assets/images/apple-touch-icon.png",
            "appleTouchMore": {
   
                "120x120": "assets/images/apple-touch-icon-120x120.png",
                "180x180": "assets/images/apple-touch-icon-180x180.png"
            }
        }
    }
}

插件 Github 地址：https://github.com/menduo/gitbook-plugin-favicon

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

支持中文搜索的插件, 使用此插件需要将默认的 search 和 lunr 插件去掉。

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

插件 Github 地址：https://github.com/gitbook-plugins/gitbook-plugin-search-pro

2.4 splitter 侧边栏宽度可调节

splitter 插件可以使左侧的侧边栏目录宽度可以自定义的调节。

{
   
    "plugins": ["splitter"]
}

插件 Github 地址：https://github.com/yoshidax/gitbook-plugin-splitter

2.5 github 在右上角添加github图标

github 插件会在右上角添加一个 github 的图标，可以通过插件属性配置链接，点击后可以进入自定义的链接页面。

{
   
    "