安装插件

背景

Gitbook中含有很多的插件可以使用，都是便于前台阅读和使用的，现下记录

安装

  1. 建议进入Gitbook对应版本的目录下进行安装，这样就可以将该版本的插件与版本绑定在一起

    1
    C:\Users\一夜\.gitbook\versions\3.1.1

  2. CMD窗口执行如下命令

    1
    npm install gitbook-plugin-back-to-top-button gitbook-plugin-code gitbook-plugin-copy-code-button gitbook-plugin-todo gitbook-plugin-search-pro gitbook-plugin-splittergitbook-plugin-tbfed-pagefooter gitbook-plugin-klipse gitbook-plugin-flexible-alerts gitbook-plugin-popup gitbook-plugin-sharing-plus

  3. 编写book.json文件放置于要生成的书籍的根目录下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    {
      "title": "Devin",
      "description": "Devin",
      "author": "Devin",
      "generator": "site",
      "language": "zh-hans",
      "gitbook": "3.1.1",
      "links": {
        "sidebar": {
          "Home": "http://www.wudaxiang.com"
        },
        "gitbook": false
      },
      "plugins": [
        "back-to-top-button",
        "code",
        "-copy-code-button",
        "todo",
        "-lunr","-search","search-pro",
        "splitter",
        "tbfed-pagefooter",
        "klipse",
        "flexible-alerts",
        "popup",
        "-sharing","-sharing-plus"
      ],
      "pluginsConfig": {
        "code": {
          "copyButtons": true
        },
        "tbfed-pagefooter": {
          "copyright": "Copyright &copy 人民群众 2020",
          "modify_label": "2020-05-02",
          "modify_format": "2020-05-02 08:23:55"
        },
        "sharing": {
          "douban": false,
          "facebook": false,
          "google": true,
          "hatenaBookmark": false,
          "instapaper": false,
          "line": true,
          "linkedin": true,
          "messenger": false,
          "pocket": false,
          "qq": false,
          "qzone": true,
          "stumbleupon": false,
          "twitter": false,
          "viber": false,
          "vk": false,
          "weibo": true,
          "whatsapp": false,
          "all": [
            "douban",
            "facebook",
            "google",
            "hatenaBookmark",
            "instapaper",
            "linkedin",
            "twitter",
            "weibo",
            "messenger",
            "qq",
            "qzone",
            "viber",
            "vk",
            "weibo",
            "pocket",
            "stumbleupon",
            "whatsapp"
          ]
        }
      },
      "github": "GodHope/gitbook-use",
      "pdf": {
        "fontSize": 16
      }
    }

  4. 然后按照Gitbook的使用命令正常操作

插件的使用

back-to-top-button

在下面加一个上滑至顶端的功能

code

1
2
3
4
5
6
"plugins": ["code"],
"pluginsConfig": {
    "code": {
      "copyButtons": true
    }
}

copy-code-button

添加复制代码的Button

todo

添加一个待办事项

1
2
[ ]  write some articles
[x]  drink a cup of tea

search-pro

支持中文搜索，配置时需如下：

1
"plugins": ["-lunr","-search","search-pro"]

splitter

支持侧边栏缩放

支持配置底部的版权信息

1
2
3
4
5
6
7
8
"plugins": ["tbfed-pagefooter"],
"pluginsConfig": {
    "tbfed-pagefooter": {
      "copyright": "Copyright &copy 人民群众 2020",
      "modify_label": "2020-05-02",
      "modify_format": "2020-05-02 08:23:55"
    }
}

klipse

作用：支持在线编辑代码并运行

配置：

1
"plugins": ["tbfed-pagefooter"]

使用：

1
2
3
```eval-python
print [x +1 for x in range（10）]
```

案例：

1
print [x +1 for x in range(10)]

flexible-alerts

配置：

1
"plugins": ["flexible-alerts"]

默认使用：

作用时为了将引用的部分用更加好看的样式表现出来，默认支持4种模式，前提是编辑的内容一定得是引用

1
2
[!NOTE]
这是一个简单的Note类型的使用，所有的属性都是默认值。

类似的还有(他们区分大小写)：TIP, WARNING, DANGER

点击图片自动最大化显示的一个插件

sharing-plus

作用：

可以又更多的分享按钮

配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
"plugins": ["sharing-plus"],
"pluginsConfig": {
    "sharing": {
      "douban": false,
      "facebook": false,
      "google": true,
      "hatenaBookmark": false,
      "instapaper": false,
      "line": true,
      "linkedin": true,
      "messenger": false,
      "pocket": false,
      "qq": false,
      "qzone": true,
      "stumbleupon": false,
      "twitter": false,
      "viber": false,
      "vk": false,
      "weibo": true,
      "whatsapp": false,
      "all": [
        "douban",
        "facebook",
        "google",
        "hatenaBookmark",
        "instapaper",
        "linkedin",
        "twitter",
        "weibo",
        "messenger",
        "qq",
        "qzone",
        "viber",
        "vk",
        "weibo",
        "pocket",
        "stumbleupon",
        "whatsapp"
      ]
    }
}

安装插件

进入gitbook的版本文件夹下，执行如下脚本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
npm install gitbook-plugin-back-to-top-button --registry=https://registry.npm.taobao.org/
npm install gitbook-plugin-code --registry=https://registry.npm.taobao.org/
npm install gitbook-plugin-copy-code-button --registry=https://registry.npm.taobao.org/
npm install gitbook-plugin-todo --registry=https://registry.npm.taobao.org/
npm install gitbook-plugin-lunr --registry=https://registry.npm.taobao.org/
npm install gitbook-plugin-search-pro --registry=https://registry.npm.taobao.org/
npm install gitbook-plugin-splitter --registry=https://registry.npm.taobao.org/
npm install gitbook-plugin-tbfed-pagefooter --registry=https://registry.npm.taobao.org/
npm install gitbook-plugin-klipse --registry=https://registry.npm.taobao.org/
npm install gitbook-plugin-alerts --registry=https://registry.npm.taobao.org/
npm install gitbook-plugin-popup --registry=https://registry.npm.taobao.org/
npm install gitbook-plugin-sharing --registry=https://registry.npm.taobao.org/
npm install gitbook-plugin-sharing-plus --registry=https://registry.npm.taobao.org/
npm install gitbook-plugin-page-toc-button --registry=https://registry.npm.taobao.org/
npm install gitbook-plugin-change_girls --registry=https://registry.npm.taobao.org/