插件推荐

本节对插件如何安装，以及定制化插件做一讲解

插件安装

book.json，该文件用于存放配置信息。如果没有，请创建

【title】书本的标题

【author】作者的相关信息

【description】本书的简单描述

【language】gitbook使用的语言 我的是"zh-hans",

【root】指定存放 GitBook 文件（除了 book.json）的根目录

【structure】指定自述文件，摘要，词汇表等的路径

gitbook支持许多插件，可以扩展gitbook的功能。

• plugins 是配置新增或删除插件的位置,而 Gitbook 默认自带有 5 个插件：

  sharing：右上角分享功能 font-settings：字体设置（左上方的"A"符号） livereload：为 GitBook 实时重新加载 highlight： 代码高亮 search： 导航栏查询功能（不支持中文）

• pluginsConfig 是插件配置的地方

特别说明 系统自带插件可通过 在插件名前面加减号的方式去除掉，如-sharing

再添加了插件后要加载使用插件，需要使用gitbook install 来安装进项目。否则无法使用。

**tips:**网络环境不好的小伙伴可能需要等待很长时间，可能都还安装不下来。

不要灰心，可以使用 npm install gitbook-plugin-插件名的方式进行安装。若这种方式也很慢

则配置下 npm 源吧

npm config set registry=http://registry.npm.taobao.org -g

参考本人完整配置详情：

{
    "title": "Gitbook教程",
    "description": "Gitbook电子书教程",
    "author": "Breeze",
    "language": "zh-hans",
    "root": ".",
    "plugins": [
        "donate",
        "github-buttons@2.1.0",
        "edit-link",
        "splitter",
        "tbfed-pagefooter",
        "expandable-chapters",
        "back-to-top-button",
        "code",
        "pageview-count",
        "popup",
        "search-plus",
        "-lunr",
        "-search",
        "splitter",
        "-sharing",
        "sharing-plus"
    ],
    "styles": {
        "website": "styles/website.css"
    },
    "pluginsConfig": {
        "donate": {
            "wechat": "https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210922202901895.png",
            "alipay": "https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210922202843746.png",
            "title": "",
            "button": "打赏",
            "alipayText": "支付宝",
            "wechatText": "微信"
        },
        "github-buttons": {
            "repo": "ITmxs/gitbook-Information-System-Engineer",
            "types": [
                "star"
            ],
            "size": "small"
        },
        "edit-link": {
            "base": "https://github.com/ITmxs/gitbook-Information-System-Engineer/edit/master",
            "label": "Edit This Page"
        },
        "tbfed-pagefooter": {
            "copyright": "&copy luckly FED Team",
            "modify_label": "该文件修订时间：",
            "modify_format": "YYYY-MM-DD HH:mm:ss"
        },
        "pluginsConfig": {
            "expandable-chapters": {}
        },
        "sharing": {
            "douban": false,
            "facebook": false,
            "google": false,
            "pocket": false,
            "qq": false,
            "qzone": false,
            "twitter": false,
            "weibo": false,
            "all": [
                "qq",
                "qzone",
                "viber",
                "whatsapp",
                "douban",
                "facebook",
                "google",
                "instapaper",
                "linkedin",
                "messenger",
                "twitter",
                "weibo"
            ]
        }
    }
}

记得运行

gitbook install

插件说明

目录章节可折叠：expandable-chapters

{
    {
        plugins: ["expandable-chapters"]
    }
    {
        "pluginsConfig": {
            "expandable-chapters":{}
        }
    }
}

畅言评论：changyan

{
    "plugins": [
        "changyan"
    ],
    "pluginsConfig": {
        "changyan": {
            "appid": "your changyan's appid",
            "conf": "the conf in the code generate by changyan"
        }
    }
}

image-20211009224342087

编辑“book.json”文件，添加如下代码：

{
    "styles": {
        "website": "styles/website.css"
    }
}

page-treeview 目录

GitHub 地址

不需要在文档中插入标签，能够支持到 6 级目录，安装即可用。 这个插件生成目录以后，下面有一行关于版权的文字。 这行文字可以通过样式来进行控制，让它不显示出来。

.treeview__container {
    margin-bottom: 0px !important;
}
.treeview__container-title {
    display: none !important;
}

code 代码

GitHub 地址

为代码块添加行号和复制按钮，复制按钮可关闭 单行代码无行号。

"code": {
        "copyButtons": false
      }

pageview-count 阅读量计数

该插件用来统计当前页面被访问次数

popup 图片点击查看

GitHub 地址

插件用于点击图片时，打开新的网页用来查看高清大图。

tbfed-pagefooter 页面添加页脚（简单版）

GitHub 地址

在每个页面的最下方自动添加页脚信息，配置如下：

"tbfed-pagefooter": {
            "copyright": "Copyright © [e-mail] 2020",
            "modify_label": "该文章修订时间：",
            "modify_format": "YYYY-MM-DD HH:mm:ss"
        },

page-copyright 页面添加页脚（复杂版）

GitHub 地址

在每个页面的最下方自动添加页脚配置的各个信息，配置如下：

 "page-copyright": {
          "description": "footer",
          "copyright": "Copyright © [e-mail] 2020",
          "timeColor": "#ccc",
          "copyrightColor": "#ddd",
          "utcOffset": "8",
          "style": "normal",
          "noPowered": false,
          "signature": "levy",
          "wisdom": "footer",
          "format": "YYYY-MM-dd hh:mm:ss",
        },

favicon 修改图标

修改网页标题的图标，显示个性化 ico

        "favicon": {
            "shortcut": "assets/favicon.ico",
            "bookmark": "assets/favicon.ico",
            "appleTouch": "assets/favicon.ico",
            "appleTouchMore": {
                "120x120": "assets/favicon.ico",
                "180x180": "assets/favicon.ico"
            }
        },

search-plus 替换原搜索插件

原搜索插件不支持中文搜索，所以使用该插件进行替换。需要将原插件进行去除掉。

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

expandable-chapters 及 chapter-fold 导航目录

两个插件配合使用，使导航目录使用更正常，以免出现导航栏问题。

一个支持多层目录，一个是在目录前方加上箭头。使点击两个都有效。

    "plugins": [  "expandable-chapters","chapter-fold"]

hide-element 隐藏界面元素

GitHub 地址

可以隐藏不想看到的元素，比如导航栏中 下方的 Published by GitBook

"elements": [".gitbook-link"]

back-to-top-button 返回顶部

GitHub 地址

在页面篇幅过长时，在界面右下角自动添加上返回顶部的按钮。

splitter 侧边栏宽度调整

GitHub 地址

添加完插件后，在界面上 侧边栏可自行调整宽度。

sharing-plus 分享插件

插件地址

需要将自带的插件给隐藏掉 -sharing 分享当前页面，比默认的 sharing 插件多了一些分享方式。

"sharing": {
             "douban": false,
             "facebook": false,
             "google": false,
             "pocket": false,
             "qq": false,
             "qzone": false,
             "twitter": false,
             "weibo": false,
          "all": [
              "qq", "qzone","viber","whatsapp",
               "douban", "facebook", "google", "instapaper", "linkedin",
               "messenger","twitter", "weibo"
           ]
       }

gitbook-思维导图

一个用Markdown生成思维导图的GitBook插件

"plugins": ["mind-maps"]

使用

# 1
## 1.1
### 1.1.1
## 1.2
# 2
# 3

- 1
  - 1.1
    - 1.1.1
  - 1.2
- 2
- 3

GitBook 插件：编辑链接

  "plugins": ["edit-link"]

这个 GitBook 插件在每个页面上添加了“编辑此页面”链接。

链接目标将是 Github 或 Gitlab 或任何 repo 上该页面的源文件。

  "edit-link": {
      "base": "https://github.com/ITmxs/gitbook/edit/master/",
      "label": "编辑此页"
    },

Github Buttons

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

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

Emphasize

为文字添加底色

插件地址

"plugins": [    "emphasize"]

Anchors

添加 Github 风格的锚点样式

插件地址

"plugins" : [ "anchors" ]

livereload

为GitBook实时重新加载

advanced-emoji

支持emoji表情

ace

555