GitBook 插件

记录一些实用的插件, 如果要指定插件的版本可以使用 plugin@0.3.1。下面的插件在 GitBook 的 3.2.2 版本中可以正常工作，因为一些插件可能不会随着 GitBook 版本的升级而升级，即下面的插件可能不适用高版本的 GitBook，所以这里指定了 GitBook 的版本。另外本文记录的插件在 Linux 下都是可以正确工作的，windows 系统没有测试。这里只是列举了一部分插件，如果有其它的需求，可以到 插件官网 区搜索相关插件。

• Disqus - Disqus 评论
• Duoshuo - 多说--服务已经停了，不能使用
• Search Plus - 支持中文搜索
• Prsim - 使用 Prism.js 高亮代码
• Advanced Emoji - 支持 emoji 表情
• Github - 添加github图标
• Github Buttons - 添加项目在 Github 上的 star、fork、watch 信息
• Ace Plugin - 支持ace
• Emphasize - 为文字加上底色
• KaTex - 支持数学公式
• Include Codeblock - 用代码块显示包含文件的内容
• Splitter - 使Mermaid侧边栏的宽度可以自由调节
• Sharing - 分享当前页面
• Tbfed-pagefooter - 为页面添加页脚
• Expandable-chapters-small - 使左侧的章节目录可以折叠
• Sectionx - 将页面分块显示
• GA - Google 统计
• 3-ba - 百度统计
• Donate - 打赏插件
• Local Video - 使用 Video.js 播放本地视频
• Simple-page-toc - 自动生成本页的目录结构
• Anchors - 添加 Github 风格的锚点
• Anchor-navigation-ex - 添加Toc到侧边悬浮导航以及回到顶部按钮
• Edit Link - 链接到当前页源文件上
• Sitemap-general - 生成sitemap
• Favicon - 更改网站的 favicon.ico
• Todo - 添加 Todo 功能

Disqus

添加disqus评论

插件地址

"plugins": [
    "disqus"
],
"pluginsConfig": {
    "disqus": {
        "shortName": "gitbookuse"
    }
}

Duoshuo

添加多说---服务停了，不能使用

插件地址

{
    "plugins": [
        "duoshuo"
    ],
    "pluginsConfig": {
        "duoshuo": {
            "short_name": "your duoshuo's shortname",
            "theme": "default"
        }
    }
}

Search Plus

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

插件地址

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

Prism

使用 Prism.js 为语法添加高亮显示，需要将 highlight 插件去掉。该插件自带的主题样式较少，可以再安装 prism-themes 插件，里面多提供了几种样式，具体的样式可以参考 这里，在设置样式时要注意设置 css 文件名，而不是样式名。

Prism 插件地址    prism-themes 插件地址

{
    "plugins": [
        "prism",
        "-highlight"
    ],
    "pluginsConfig": {
        "prism": {
            "css": [
                "prism-themes/themes/prism-base16-ateliersulphurpool.light.css"
            ]
        }
    }
}

如果需要修改背景色、字体大小等，可以在 website.css 定义 pre[class*="language-"] 类来修改，下面是一个示例：

pre[class*="language-"] {
    border: none;
    background-color: #f7f7f7;
    font-size: 1em;
    line-height: 1.2em;
}

Advanced Emoji

支持emoji表情

emoij表情列表
插件地址

"plugins": [
    "advanced-emoji"
]

使用示例：

Github

添加github图标

插件地址

"plugins": [
    "github"
],
"pluginsConfig": {
    "github": {
        "url": "https://github.com/zhangjikai"
    }
}

Github Buttons

添加项目在 github 上的 star，watch，fork情况

插件地址

{
    "plugins": [
        "github-buttons"
    ],
    "pluginsConfig": {
        "github-buttons": {
            "repo": "zhangjikai/gitbook-use",
            "types": [
                "star",
                "watch",
                "fork"
            ],
            "size": "small"
        }
    }
}

Ace Plugin

插件地址

使 GitBook 支持ace 。默认情况下，line-height 为 1，会使代码显得比较挤，而作者好像没提供修改行高的选项，如果需要修改行高，可以到 node_modules -> github-plugin-ace -> assets -> ace.js 中加入下面两行代码 (30 行左右的位置)：

editor.container.style.lineHeight = 1.25;
editor.renderer.updateFontSize();

不过上面的做法有个问题就是，每次使用 gitbook install 安装新的插件之后，代码又会重置为原来的样子。另外可以在 website.css 中加入下面的 css 代码来指定 ace 字体的大小

.aceCode {
  font-size: 14px !important;
}

使用插件：

"plugins": [
    "ace"
]

使用示例:

Emphasize

为文字加上底色

插件地址

"plugins": [
    "emphasize"
]

使用示例:

This text is highlighted !

This text is highlighted with markdown!

This text is highlighted in green!

This text is highlighted in red!

This text is highlighted with a custom color!

KaTex

为了支持数学公式, 我们可以使用KaTex和MathJax插件, 官网上说Katex速度要快于MathJax

插件地址
MathJax使用LaTeX语法编写数学公式教程

"plugins": [
    "katex"
]

使用示例:

When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are $x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$

$\int_{-\infty}^\infty g(x) dx$

$1 \over 3$

Include Codeblock

使用代码块的格式显示所包含文件的内容. 该文件必须存在。插件提供了一些配置，可以区插件官网查看。如果同时使用 ace 和本插件，本插件要在 ace 插件前面加载。

插件地址

{
    "plugins": [
        "include-codeblock"
    ],
    "pluginsConfig": {
        "include-codeblock": {
            "template": "ace",
            "unindent": "true",
            "theme": "monokai"
        }
    }
}

使用示例:

Splitter

使侧边栏的宽度可以自由调节

插件地址

"plugins": [
    "splitter"
]

Sharing

分享当前页面, gitbook的默认插件, 使用下面方式来禁用

 plugins: ["-sharing"]

配置:

"pluginsConfig": {
    "sharing": {
        "weibo": true,
        "facebook": true,
        "twitter": true,
        "google": false,
        "instapaper": false,
        "vk": false,
        "all": [
            "facebook", "google", "twitter",
                "weibo", "instapaper"
        ]
    }
}

Tbfed-pagefooter

为页面添加页脚

插件地址

"plugins": [
   "tbfed-pagefooter"
],
"pluginsConfig": {
    "tbfed-pagefooter": {
        "copyright":"Copyright &copy zhangjikai.com 2017",
        "modify_label": "该文件修订时间：",
        "modify_format": "YYYY-MM-DD HH:mm:ss"
    }
}

Expandable-chapters-small

使左侧的章节目录可以折叠

插件地址

plugins: ["expandable-chapters-small"]

Sectionx

将页面分块显示，标签的 tag 最好是使用 b 标签，如果使用 h1-h6 可能会和其他插件冲突。
插件地址

{
    "plugins": [
       "sectionx"
   ],
    "pluginsConfig": {
        "sectionx": {
          "tag": "b"
        }
      }
}

使用示例

GA

Google 统计
插件地址

"plugins": [
    "ga"
 ],
"pluginsConfig": {
    "ga": {
        "token": "UA-XXXX-Y"
    }
}

3-ba

百度统计
插件地址

{
    "plugins": ["3-ba"],
    "pluginsConfig": {
        "3-ba": {
            "token": "xxxxxxxx"
        }
    }
}

Donate

打赏插件
插件地址

"plugins": [
    "donate"
],
"pluginsConfig": {
    "donate": {
        "wechat": "https://zhangjikai.com/resource/weixin.png",
        "alipay": "https://zhangjikai.com/resource/alipay.png",
        "title": "",
        "button": "赏",
        "alipayText": "支付宝打赏",
        "wechatText": "微信打赏"
    }
}

Local Video

使用Video.js 播放本地视频
插件地址

"plugins": [ "local-video" ]

使用示例：为了使视频可以自适应，我们指定视频的width为100%，并设置宽高比为16:9，如下面所示

<video id="my-video" class="video-js" controls preload="auto" width="100%"
poster="https://zhangjikai.com/resource/poster.jpg" data-setup='{"aspectRatio":"16:9"}'>
  <source src="https://zhangjikai.com/resource/demo.mp4" type='video/mp4' >
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a web browser that
    <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
  </p>
</video>

另外我们还要再配置下css，即在website.css中加入

.video-js {
    width:100%;
    height: 100%;
}

Simple-page-toc

自动生成本页的目录结构。另外 GitBook 在处理重复的标题时有些问题，所以尽量不适用重复的标题。 插件地址

{
    "plugins" : [
        "simple-page-toc"
    ],
    "pluginsConfig": {
        "simple-page-toc": {
            "maxDepth": 3,
            "skipFirstH1": true
        }
    }
}

使用方法: 在需要生成目录的地方加上 <!-- toc -->

Anchors

添加 Github 风格的锚点样式

插件地址

"plugins" : [ "anchors" ]

Anchor-navigation-ex

添加Toc到侧边悬浮导航以及回到顶部按钮。需要注意以下两点：

• 本插件只会提取 h[1-3] 标签作为悬浮导航
• 只有按照以下顺序嵌套才会被提取

  # h1
  ## h2
  ### h3
  必须要以 h1 开始，直接写 h2 不会被提取
  ## h2
  

插件地址

{
    "plugins": [
        "anchor-navigation-ex"
    ],
    "pluginsConfig": {
        "anchor-navigation-ex": {
            "isRewritePageTitle": true,
            "isShowTocTitleIcon": true,
            "tocLevel1Icon": "fa fa-hand-o-right",
            "tocLevel2Icon": "fa fa-hand-o-right",
            "tocLevel3Icon": "fa fa-hand-o-right"
        }
    }
}

Edit Link

如果将 GitBook 的源文件保存到github或者其他的仓库上，使用该插件可以链接到当前页的源文件上。
插件地址

"plugins": ["edit-link"],
"pluginsConfig": {
    "edit-link": {
        "base": "https://github.com/USER/REPO/edit/BRANCH",
        "label": "Edit This Page"
    }
}

Sitemap-general

生成sitemap
插件地址

{
    "plugins": ["sitemap-general"],
    "pluginsConfig": {
        "sitemap-general": {
            "prefix": "http://gitbook.zhangjikai.com"
        }
    }
}

Favicon

更改网站的 favicon.ico
插件地址

{
    "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"
            }
        }
    }
}

Todo

添加 Todo 功能。默认的 checkbox 会向右偏移 2em，如果不希望偏移，可以在 website.css 里加上下面的代码:

input[type=checkbox]{
    margin-left: -2em;
}

插件地址

"plugins": ["todo"]

使用示例：

• write some articles
• drink a cup of tea