GitBook使用教程（插件篇）

2019-12-28 本文已影响0人微笑的鱼23333

在上一章Gitbook入门教程中，我们简单介绍了如何搭建自己的电子书站点并在本地浏览器上浏览。这一章，我们的主要内容涉及一些更高级的玩法。

复杂目录结构

添加book.json实现更丰富配置

上面讲到多级目录的编写，主要就是在SUMMARY.md文件中设置好目录之间的嵌套关系，不过就算按照上面的步骤来操作的话，你会发现并没有实现目录折叠的功能。为什么呢？有两个原因：

Gitbook本身是npm下的插件
Gitbook下的目录折叠功能需要另外的插件支持

是不是很绕？简单地说就算，要想实现更加复杂的功能，我们在根目录下必须有一个book.json文件，这个文件内容是个json对象，里面配置了我们工程的基础信息和依赖的第三方插件信息。

这个book.json文件作用类似于package.json，前端开发工程师很容易理解。我们在mywebsite文件根目录下新建一个book.json文件。新建文件后编辑book.json内容如下:

{
    "title" : "我的学习笔记",
    "author" : "myname",
    "description" : "日常工作中用到的一些技术总结",
    "language" : "zh-hans"
}

保存这个配置文件后，重新运行项目：

gitbook serve

再试试浏览器上的效果，网页上是不是显示标题了呢？

下面我们讲解一下如何在book.json里面添加三方插件，为我们提供更加丰富的功能样式

导航折叠

如果我们希望在导航栏里添加多级目录，并且能够实现多级目录的展开或者折叠功能，那么需要安装一个插件，在上面的book.json中添加expandable-chapters-small插件就可以，配置如下：

{
    "title" : "我的学习笔记",
    "author" : "myname",
    "description" : "日常工作中用到的一些技术总结",
    "language" : "zh-hans",
    "plugins": [
        "expandable-chapters-small"
    ]
}

编辑配置文件后保存，然后运行安装插件的命令:

gitbook install

安装完成后，重新运行gitbook serve命令，看看是不是可以折叠菜单了呢？

导航栏宽度伸缩插件

GitBook默认的导航栏宽度是固定的，也就是说如果在md文件中显示的标题文字很长的话会在导航栏菜单中显示不全，这样的效果当然不好，这种情况下我们需要安装一个叫做splitter的插件，配置信息如下：

{
    "title" : "我的学习笔记",
    "author" : "myname",
    "description" : "日常工作中用到的一些技术总结",
    "language" : "zh-hans",
    "plugins": [
            "expandable-chapters-small",
            "splitter"
    ]
}

自己可以运行'gitbook install'和gitbook serve后查看导航栏的宽度是否可以拉伸。

中文搜索

GitBook在网页左上角有搜索框，能支持站点的全局内容搜索，使用起来非常方便，不过还不能支持中文搜索，如果需要支持中文全局搜索的话，需要添加search-pro三方插件，修改book.json配置如下：

{
    "title" : "我的学习笔记",
    "author" : "myname",
    "description" : "日常工作中用到的一些技术总结",
    "language" : "zh-hans",
    "plugins": [
            "expandable-chapters-small",
            "splitter",
            "-lunr", 
            "-search", 
            "search-pro"
    ]
}

运行install命令后，在搜索框输入中文，验证一下是否可以全局搜索中文内容了呢？

复制代码

很多博客在显示代码块的时候都会提供复制代码功能，我们也可以在GitBook中实现这个功能，需要引入copy-code-button插件，修改配置文件如下：

{
    "title" : "我的学习笔记",
    "author" : "myname",
    "description" : "日常工作中用到的一些技术总结",
    "language" : "zh-hans",
    "plugins": [
            "expandable-chapters-small",
            "splitter",
            "-lunr", 
            "-search", 
            "search-pro",
            "copy-code-button"
    ]
}

添加一段代码块后运行'gitbook install'和gitbook serve，查看代码块右上角是否显示复制代码的黑色按钮。

回到顶部

这个插件在网页上显示一个向上的箭头图标，用来回滚到页面顶部，如果需要引入这个插件，修改配置文件如下：

{
    "title" : "我的学习笔记",
    "author" : "myname",
    "description" : "日常工作中用到的一些技术总结",
    "language" : "zh-hans",
    "plugins": [
            "expandable-chapters-small",
            "splitter",
             "-lunr", 
            "-search", 
            "search-pro",
            "copy-code-button",
            "back-to-top-button"
    ]
}

运行'gitbook install'和gitbook serve，查看网页底部是否多了一个箭头图标，点击能否回到页面顶部。

Github链接插件

如果我们在自己的GitBook站点上放一个自己的GitHub链接地址和logo的话，只需要在上面的book.json中添加github插件就可以，配置如下：

{
    "title" : "我的学习笔记",
    "author" : "myname",
    "description" : "日常工作中用到的一些技术总结",
    "language" : "zh-hans",
    "plugins": [
            "github", 
            "expandable-chapters-small",
            "splitter",
            "-lunr", 
            "-search", 
            "search-pro",
            "copy-code-button",
            "back-to-top-button"
    ],
    "pluginsConfig": {
            "github": {
                "url": "https://github.com/username"
            }
    }
}

编辑配置文件后保存，然后运行安装插件的命令:

gitbook install

安装完成后，重新运行gitbook serve命令看看页面右上角是不是有了一个GitHub链接地址，点击一下看看是否跳转到你所配置的网页链接。

社交分享插件

添加版权信息

如果需要实现以上功能，只需要在上面的book.json中添加tbfed-pagefooter插件就可以，配置如下：

{
    "title" : "我的学习笔记",
    "author" : "myname",
    "description" : "日常工作中用到的一些技术总结",
    "language" : "zh-hans",
    "plugins": [
            "github", 
            "expandable-chapters-small",
            "splitter",
            "-lunr", 
            "-search", 
            "search-pro",
            "copy-code-button",
            "back-to-top-button",
            "tbfed-pagefooter"
    ],
    "pluginsConfig": {
            "github": {
                "url": "https://github.com/username"
            },
            "tbfed-pagefooter": {
                "copyright":"版权所有，盗版必究",
                "modify_label": "Last Modified On：",
                "modify_format": "YYYY-MM-DD HH:mm:ss"
            }
    }
}