gitbook插件整理--book.json文件配置

0    88    2

Tags:

👉 本文共约20445个字,系统预计阅读时间或需77分钟。

目录

配置概况

1.1. 全局配置

  1. title
    设置书本的标题
    "title" : "Gitbook Use"
  2. author
    作者的相关信息
    "author" : "mingyue"
  3. description
    本书的简单描述
    "description" : "记录Gitbook的配置和一些插件的使用"
  4. language
    Gitbook使用的语言, 版本2.6.4中可选的语言如下:
    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
    例如,配置使用简体中文
    "language" : "zh-hans"
  5. links
    在左侧导航栏添加链接信息
  6. styles
    自定义页面样式, 默认情况下各generator对应的css文件

    例如使<h1> <h2>标签有下边框, 可以在website.css中设置

    1.2. 插件列表 PLUGINS

    配置使用的插件

    其中"-search"中的 - 符号代表去除默认自带的插件

Gitbook 中默认带有 5 个插件:

名称说明
highlight语法高亮插件,代码高亮功能
search搜索插件,不支持中文搜索
sharing分享插件,右上角分享功能
font-settings字体设置(最上方的"A"符号)
livereload热加载插件,为 GitBook 编辑进行实时重新预览加载

1.3. 插件属性配置PLUGINSCONFIG

配置插件的属性
例如配置insert-logo的属性:

一些实用插件

记录一些实用的插件
用法:在book.json中添加以下内容。然后执行gitbook install,或者使用NPM安装(单独安装推荐NPM)npm install gitbook-plugin-插件名,也可以从源码GitHub地址中下载,放到node_modules文件夹里(GitHub地址在进入插件地址右侧的GitHub链接)

2.1. BACK-TO-TOP-BUTTON 回到顶部

插件地址
GitHub地址
在book.json中添加以下内容。然后执行gitbook install,或者使用NPM安装(单独安装推荐NPM)npm install gitbook-plugin-back-to-top-button,也可以从源码GitHub地址中下载,放到node_modules文件夹里(GitHub地址在进入插件地址右侧的GitHub链接)

2.2. 导航目录折叠

2.2.1. CHAPTER-FOLD 左侧目录折叠

支持多层目录,点击导航栏的标题名就可以实现折叠扩展。
插件地址
GitHub地址
在book.json中添加以下内容。然后执行gitbook install,或者使用NPM安装(单独安装推荐NPM)npm install gitbook-plugin-chapter-fold,也可以从源码GitHub地址中下载,放到node_modules文件夹里(GitHub地址在进入插件地址右侧的GitHub链接)

2.2.2. EXPANDABLE-CHAPTERS-SMALL 左侧章节目录可折叠

支持多层目录,比Toggle Chapters好用
只有点击箭头才能实现折叠扩展。不如【2.2.1. chapter-fold 左侧目录折叠】好用
插件地址
GitHub地址
在book.json中添加以下内容。然后执行gitbook install,或者使用NPM安装(单独安装推荐NPM)npm install gitbook-plugin-expandable-chapters-small,也可以从源码GitHub地址中下载,放到node_modules文件夹里(GitHub地址在进入插件地址右侧的GitHub链接)

2.2.3. EXPANDABLE-CHAPTERS 可扩展导航章节

和expandable-chapters-small效果相同,唯一不同的是这个插件的箭头粗
插件地址
GitHub地址
在book.json中添加以下内容。然后执行gitbook install,或者使用NPM安装(单独安装推荐NPM)npm install gitbook-plugin-expandable-chapters,也可以从源码GitHub地址中下载,放到node_modules文件夹里(GitHub地址在进入插件地址右侧的GitHub链接)

2.3. 代码复制,行号

2.3.1. CODE 代码添加行号&复制按钮(可选)

为代码块添加行号和复制按钮,复制按钮可关闭
单行代码无行号。
插件地址
GitHub地址
在book.json中添加以下内容,然后执行gitbook install,或者使用NPM安装(单独安装推荐NPM)npm install gitbook-plugin-code,也可以从源码GitHub地址中下载,放到node_modules文件夹里(GitHub地址在进入插件地址右侧的GitHub链接)

如果想去掉复制按钮,在book.json的插件配置块更新:

2.3.2. COPY-CODE-BUTTON 代码块复制按钮

为代码块添加复制的按钮。
插件地址
GitHub地址
在book.json中添加以下内容。然后执行gitbook install,或者使用NPM安装(单独安装推荐NPM)npm install gitbook-plugin-copy-code-button,也可以从源码GitHub地址中下载,放到node_modules文件夹里(GitHub地址在进入插件地址右侧的GitHub链接)

效果如下图所示:
1240

2.4. TODO 待做项☑

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

插件地址
GitHub地址
在book.json中添加以下内容。然后执行gitbook install,或者使用NPM安装(单独安装推荐NPM)npm install gitbook-plugin-todo,也可以从源码GitHub地址中下载,放到node_modules文件夹里(GitHub地址在进入插件地址右侧的GitHub链接)

使用示例:

将logo插入到导航栏上方中
插件地址
GitHub地址
在book.json中添加以下内容。然后执行gitbook install,或者使用NPM安装(单独安装推荐NPM)npm install gitbook-plugin-insert-logo,也可以从源码GitHub地址中下载,放到node_modules文件夹里(GitHub地址在进入插件地址右侧的GitHub链接)

2.6. SEARCH-PRO 高级搜索(支持中文)

支持中文搜索, 在使用此插件之前,需要将默认的searchlunr 插件去掉。
插件地址
GitHub地址
在book.json中添加以下内容。然后执行gitbook install,或者使用NPM安装(单独安装推荐NPM)npm install gitbook-plugin-search-pro

2.7. ADVANCED-EMOJI 支持EMOJI表情

emoij表情列表
插件地址
GitHub地址
在book.json中添加以下内容。然后执行gitbook install,或者使用NPM安装(单独安装推荐NPM)npm install gitbook-plugin-advanced-emoji,也可以从源码GitHub地址中下载,放到node_modules文件夹里(GitHub地址在进入插件地址右侧的GitHub链接)

2.8. GITHUB 在右上角添加GITHUB图标

插件地址
GitHub地址
在book.json中添加以下内容。然后执行gitbook install,或者使用NPM安装(单独安装推荐NPM)npm install gitbook-plugin-github,也可以从源码GitHub地址中下载,放到node_modules文件夹里(GitHub地址在进入插件地址右侧的GitHub链接)

效果图:
1240

2.9. EMPHASIZE 为文字加上底色

插件地址
GitHub地址
在book.json中添加以下内容。然后执行gitbook install,或者使用NPM安装(单独安装推荐NPM)npm install gitbook-plugin-emphasize,也可以从源码GitHub地址中下载,放到node_modules文件夹里(GitHub地址在进入插件地址右侧的GitHub链接)

然后在markdown / asciidoc内容中,使用以下内容突出显示一些文本:

效果图:
1240

2.10. SPLITTER 侧边栏宽度可调节

插件地址
GitHub地址
在book.json中添加以下内容。然后执行gitbook install,或者使用NPM安装(单独安装推荐NPM)npm install gitbook-plugin-splitter,也可以从源码GitHub地址中下载,放到node_modules文件夹里(GitHub地址在进入插件地址右侧的GitHub链接)

2.11. SHARING-PLUS 分享

分享当前页面,比默认的 sharing 插件多了一些分享方式。
插件地址
在book.json中添加以下内容。然后执行gitbook install,或者使用NPM安装(单独安装推荐NPM)npm install gitbook-plugin-sharing-plus

其中:
为true的代表直接显示在页面顶端,为false的不显示,不写默认为false
"all"中代表点击分享符号显示出来的
支持网站:

效果图:1240
如果想增加其他分享网站,可以自己修改插件文件button.jspackage.json

标签:

Avatar photo

小麦苗

学习或考证,均可联系麦老师,请加微信db_bao或QQ646634621

您可能还喜欢...

发表回复