GitBook配置详解以及常用插件
1 基本配置
每个书本的目录下有个文件叫book.json
, 这就是当前书本的配置文件
{
"title": "Python基础", // 设置书本的标题
"author": "付铭", // 设置作者
"description": "Python基础", // 设置书本的描述信息
"language" : "zh-hans" // 设置语言 入选语言有 en, ar, bn, cs, de, en, es, fa, fi, fr, he, it, ja, ko, no, pl, pt, ro, ru, sv, uk, vi, zh-hans, zh-tw
"links": // 在左侧导航栏添加链接信息
"sidebar": {
"铭哥教程": "http://learn.fuming.site"
}
},
"styles": { // 自定义页面样式, 默认情况下各generator对应的css文件
"website": "styles/website.css",
"ebook": "styles/ebook.css",
"pdf": "styles/pdf.css",
"mobi": "styles/mobi.css",
"epub": "styles/epub.css"
}
"plugins": [ // 插件列表
"-sharing",
"reward",
],
"pluginsConfig": { // 插件配置
"sidebar-style": {
"title": "Python基础",
"author": "付铭"
}
}
}
2 插件配置
2.1 配置使用的插件 plugin
"plugins": [
"highlight",
"-search",
"back-to-top-button",
"expandable-chapters-small",
"insert-logo"
]
其中"-search"中的 - 符号代表去除默认自带的插件
注意: GitBook 默认自带5个插件
- highlight: 代码高亮
- search: 导航栏查询功能(不支持中文)
- sharing:右上角分享功能
- font-settings:字体设置(最上方的"A"符号)
- livereload:为GitBook实时重新加载
2.2 插件属性配置pluginsConfig
"pluginsConfig": {
"insert-logo": {
"url": "images/logo.png",
"style": "background: none; max-height: 30px; min-height: 30px"
}
}
2.3 插件安装
插件无需单独下载安装,只有在 book.json 中配置好对应的插件,执行 gitbook install
, 缺少的插件就会自动下载安装
3 常用插件总结
3.1 back-to-top-button 回到顶部按钮
{
"plugins": [
"back-to-top-button"
]
}
效果图如下:
3.2 expandable-chapters 导航目录折叠扩展
支持多层目录,点击箭实现收放目录。
{
"plugins": [
"expandable-chapters-small"
]
}
效果图如下:
3.3 code 代码添加行号&复制按钮
{
"plugins" : [ "code" ]
}
如果想去掉复制按钮,可配置
"pluginsConfig": {
"code": {
"copyButtons": false
}
}
效果图如下:
3.4 copy-code-button 代码复制按钮
{
"plugins": ["copy-code-button"]
}
效果图如下:
3.5 insert-logo 插入logo
{
"plugins": [ "insert-logo" ]
"pluginsConfig": {
"insert-logo": {
"url": "http://www.fuming.site/dist/avator.jpg",
"style": "background: none; max-height: 30px; min-height: 30px"
}
}
}
效果图如下:
3.6 search-pro 高级搜索
在使用此插件之前,需要将默认的search和lunr 插件去掉;在搜索结果中,关键字会高亮;自带的 search 插件,关键字不会高亮
{
"plugins": [
"-lunr",
"-search",
"search-pro"
]
}
3.7 github 在右上角添加 github 图标
{
"plugins": [
"github"
],
"pluginsConfig": {
"github": {
"url": "https://github.com/unclealan"
}
}
}
3.8 emphasize 为文字加上底色
{
"plugins": [
"emphasize"
]
}
然后在markdown / asciidoc内容中,使用以下内容突出显示一些文本:
This text is {% em %}highlighted !{% endem %}
This text is {% em %}highlighted with **markdown**!{% endem %}
This text is {% em type="green" %}highlighted in green!{% endem %}
This text is {% em type="red" %}highlighted in red!{% endem %}
This text is {% em color="#ff0000" %}highlighted with a custom color!{% endem %}
效果图如下:
3.9 splitter 侧边栏宽度可调节
{
"plugins": [
"splitter"
]
}
3.10 sharing-plus
分享当前页面,比默认的 sharing 插件多了一些分享方式。
{
"plugins": ["-sharing", "sharing-plus"],
"pluginsConfig": {
"sharing": {
"douban": false,
"facebook": false,
"google": true,
"pocket": false,
"qq": false,
"qzone": true,
"twitter": false,
"weibo": true,
"all": [
"douban", "facebook", "google", "instapaper", "linkedin","twitter", "weibo",
"messenger","qq", "qzone","viber","whatsapp"
]
}
}
}
其中:
为true的代表直接显示在页面顶端,为false的不显示,不写默认为false
"all"中代表点击分享符号显示出来的
支持的网站如下:
"douban", "facebook", "google", "hatenaBookmark",
"instapaper", "linkedin","twitter", "weibo",
"messenger","qq", "qzone","viber","vk","weibo",
"pocket", "stumbleupon","whatsapp"
3.11 tbfed-pagefooter 页面添加页脚
{
"plugins": [
"tbfed-pagefooter"
],
"pluginsConfig": {
"tbfed-pagefooter": {
"copyright":"Copyright © learn.fuming.site 2019",
"modify_label": "该文件修订时间:",
"modify_format": "YYYY-MM-DD HH:mm:ss"
}
}
}
3.12 page-copyright 页面页脚版权(内容更多)
{
"plugins" : ["page-copyright"],
"pluginsConfig" : {
"page-copyright": {
"description": "modified at",
"signature": "付铭",
"wisdom": "前端开发者 & 全栈工程师",
"format": "YYYY-MM-dd hh:mm:ss",
"copyright": "Copyright © 铭哥教程",
"timeColor": "#666",
"copyrightColor": "#666",
"utcOffset": "8",
"style": "normal",
"noPowered": false,
}
}
}
运行以后有很多信息是原创作者的,这些配置都在你的插件安装目录 **\node_modules\gitbook-plugin-page-copyright 下的 index.js 中,自己可以修改。大部分信息都在 defaultOption 中。
那个二维码可以在文件中找到 QRcode 改成自己的,或者直接把所有的 efaultOption.isShowQRCode 改成false
3.13 page-treeview 生成页内目录
不需要插入标签,能支持到6级目录,安装可用
{
"plugins": ["page-treeview"]
}
非必要配置:
"pluginsConfig": {
"page-treeview": {
"copyright": "Copyright © aleen42",
"minHeaderCount": "2",
"minHeaderDeep": "2"
}
}
这个插件生成目录以后,下面有一行关于版权的文字。如果想去掉的话,找到插件目录下的index.js文件:***/node_modules/gitbook-plugin-page-treeview/lib/index.js
找到大约111行,删除这一行关于var copyRight的定义
下面113行的var insertTreeview中,删除+ copyRight,目前就不显示了
142行中的'copyright': 'Copyright © aleen42',也可以删除
下面161行和163行和111行113行一样的,其实不删除也不显示了。
3.14 page-toc-button 悬浮目录
{
"plugins" : [ "page-toc-button" ]
}
可选配置项:
"pluginsConfig": {
"page-toc-button": {
"maxTocDepth": 2,
"minTocSize": 2
}
}
maxTocDept 标题的最大深度(2 = h1 + h2 + h3)。不支持值> 2。 默认2
minTocSize 显示toc按钮的最小toc条目数。 默认 2
3.15 anchor-navigation-ex 悬浮目录和回到顶部
{
plugins: ["anchor-navigation-ex"],
pluginsConfig: [
"anchor-navigation-ex": {
"tocLevel1Icon": "fa fa-hand-o-right",
"tocLevel2Icon": "fa fa-hand-o-right",
"tocLevel3Icon": "fa fa-hand-o-right",
"multipleH1": false,
"multipleH2": false,
"multipleH3": false,
"multipleH4": false,
"showLevelIcon": false,
"showLevel": false
},
}
3.16 打赏按钮 reward
这是铭哥开发的插件哦
{
plugins: [
”reward“
],
"pluginsConfig": ['
"reward": {
"wechat": "http://unclealan.cn/usr/themes/seventeen/dist/images/weixin.JPG",
"alipay": "http://unclealan.cn/usr/themes/seventeen/dist/images/alipay.JPG",
"button": "打赏铭哥",
"alipayText": "支付宝",
"wechatText": "微信"
},
]
}
3.17 change_girls 可自动切换的背景
{
"plugins":["change_girls"],
"pluginsConfig": {
"change_girls" : {
"time" : 10,
"urls" : [
"girlUrl1", "girlUrl2",...""
]
}
}
}
3.18 klipse 嵌入类似IDE的功能
{
"plugins": ["klipse"]
}
用法,在 markdown 中
```eval-python
print [x + 1 for x in range(10)]
```
效果如下:
3.19 pageview-count 阅读量计数
{
"plugins": [ "pageview-count"]
}
3.20 auto-scroll-table 表格滚动条
{
"plugins": ["auto-scroll-table"]
}
不够宽也是没有滚动条的
3.21 popup 弹出大图
单击图片,在新页面查看大图。
{
"plugins": [ "popup" ]
}
3.22 lightbox 单击查看图片
点击图片可显示,大小不变
{
"plugins": ["lightbox"]
}
3.23 click-reveal 点击显示
默认隐藏,点击可显示。
{
"plugins": [
"click-reveal"
]
}
使用方式,markdown中
{% reveal %}
要被隐藏的内容
{% endreveal %}
默认显示的文字是 Click to show , 使用自定义显示文字
{% reveal text="点击显示" %}
要被隐藏的内容
{% endreveal %}
支持html语法
<div class="click_reveal">
<span> 点击显示 </span>
<div><pre><code>隐藏的文字</code></pre></div>
</div>
3.24 custom-favicon 修改网页标题图标 favicon
{
"plugins" : ["custom-favicon"],
"pluginsConfig" : {
"favicon": "path/to/favicon.ico"
}
}
3.25 accordion 折叠模块
这个插件名叫手风琴,可以实现将内容隐藏起来,外部显示模块标题和显示箭头,点击箭头可显示里面的内容。
{
"plugins": ["accordion"]
}
mardown 中用法:
%accordion%模块标题%accordion%
内容部分
%/accordion%
3.26 hide-element 隐藏元素
可以隐藏不想看到的元素,比如导航栏中 Published by GitBook
{
"plugins": [
"hide-element"
],
"pluginsConfig": {
"hide-element": {
"elements": [".gitbook-link"]
}
}
}
3.27 sidebar-style 导航栏显示作者信息
会替换掉 Published by GitBook
{
"plugins": ["sidebar-style"],
"pluginsConfig": {
"sidebar-style": {
"title": "前端开发",
"author": "付铭"
}
}
}
铭哥,佩佩是谁 ?_?
是我女朋友呀
我也想要个佩佩
铭哥web的基础资料博客呢?被删了?
?
铭哥为何如此优秀