在上一章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"
}
}
}
网友评论