GitBook 使用教程

第一节：GitBook介绍

GitBook使用教程

详细的记录了一步步搭建自己的电子文档笔记

1，环境搭建

(1) 当前安装版本
    node -v
      v15.2.0
    npm -v
      7.0.8
(2) gitbook-cli 脚手架安装：
    npm install -g gitbook-cli
    版本验证
    gitbook-cli -V
    CLI version: 2.3.2
    GitBook version: 3.2.3
(3) 编译器的选择:推荐下面两个
   （1）vscode
    (2) Typora 

2，创建目录，初始化

mkdir gitbook-imsdk   // 创建项目目录
cd gitbook-imsdk
gitbook init  // 初始化目录

**初始化报错 **

TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received an instance of Promise

经排查，node版本过高，降低一下nodejs版本即可

nvm list
nvm use v13.14.0
然后从新进入 cd gitbook-imsdk
gitbook init

关于nvm安装使用可以阅读我的另一篇文章NVM使用

初始化完成，默认生成两个文件：SUMMARY.md，README.md

3，详细说明

1，SUMMARY.md是

​ 此文件为章节目录设置文件,如果我们想为我们的创作添加章节目录，我们可以利用Sumary.md文件进行章节目录划分，此文件的书写格式也比较简单，例如

[目录名称](跳转的文件名称)
for example-01: [第一章](LOGIN.md)
for example-02:
* [前言](README.md)
* [第一章](Chapter1/README.md)
  * [第1节：Lesson1](Chapter1/Lesson1.md)
  * [第2节：Lesson2](Chapter1/Lesson2.md)
  * [第3节：Lesson3](Chapter1/Lesson3.md)
  * [第4节：Lesson4](Chapter1/Lesson4.md)
* [第二章](Chapter2/README.md)
* [第三章](Chapter3/README.md)
* [第四章](Chapter4/README.md)

2，目录创建完之后，本地预览

编辑好SUMMARY.md文件之后，执行gitbook init, 会自动生成对应的文件夹和文件，

gitbook serve
启动完之后，浏览器输入：http://localhost:4000

** 注意
可以事先创建好文章目录，通过执行gitbook init 自动生成对应的文件，然后在gitbook serve

3，测试环境,发布

gitbook build
打包编译过程：成功之后
** 注意：
打包成功之后，默认输出的文件放在_book文件夹里面，编译之后的入口：index.html
指定打包输出路径
gitbook build [当前路径] [输出路径]
例如： gitbook build ./ doc      
      默认打包输出到当前路径下面的doc文件夹中

4, 其他常用命令

1， 指定端口号

gitbook serve --port 9527

2，重定向输出编译文件

gitbook build [当前路径] [输出路径]

3，打包pdf,

gitbook pdf ./  ./myBook.pdf

执行报错

InstallRequiredError: “ebook-convert” is not installed.
Install it from Calibre: https://calibre-ebook.com

解决：下载安装 Calibre application

或者 直接Typora 中安装 Pandoc 进行导出

4，外网环境可直接托管在github仓库中

5, book.json文件说明

book.json是gitbook的配置文件，包括插件的配置文件，通过插件可以丰富电子书的功能

1, “title”: “前端家族集锦”,
2, “description”: “重学前端，梳理自己的前端格局”,
3, “author”: “贰拾壹先生”,
4, “language”: “zh-hans”, // 简体中文
5, 插件列表

"plugins": [
  "-lunr", "-search", "search-pro", // 删除默认搜索功能，添加中文高级搜索
  "back-to-top-button", // 回到顶部
  "chapter-fold", // 导航目录折叠
  "expandable-chapters-small", // 左侧章节目录可折叠
  "code", // 代码添加行号
  "copy-code-button", // 代码添加复制按钮
  "advanced-emoji",
  "splitter", // 侧边栏宽度可调节
  "-sharing", "sharing-plus", // 增加分享功能
  "tbfed-pagefooter", // 添加底部页脚
  "donate" // 打赏功能
 ],

gitbook-plugin-back-to-top-button 回到顶部

npm install gitbook-plugin-back-to-top-button

gitbook-plugin-chapter-fold 导航目录折叠

npm install gitbook-plugin-chapter-fold

expandable-chapters-small 左侧章节目录可折叠

npm install gitbook-plugin-expandable-chapters-small

gitbook-plugin-code 代码添加行号

npm install gitbook-plugin-code
"pluginsConfig": {
        "code": {
        "copyButtons": false
    }
  }

gitbook-plugin-copy-code-button 代码块复制按钮

npm install gitbook-plugin-copy-code-button

gitbook-plugin-search-pro 高级搜索，支持中文

npm install gitbook-plugin-search-pro

gitbook-plugin-advanced-emoji 支持emoji表情

npm install gitbook-plugin-advanced-emoji

gitbook-plugin-github 右上角添加github图标

npm install gitbook-plugin-github
"pluginsConfig": {
      "github": {
          "url": "https://github.com/zhangjikai"
      }
  }

gitbook-plugin-splitter 侧边栏宽度可调节

npm install gitbook-plugin-splitter

gitbook-plugin-sharing-plus 分享,比默认的分享功能多

npm install gitbook-plugin-sharing-plus

gitbook-plugin-tbfed-pagefooter 页脚，版权信息

npm install gitbook-plugin-tbfed-pagefooter

npm install gitbook-plugin-donate 打赏插件

npm install gitbook-plugin-donate

npm install gitbook-plugin-change_girls 可自动切换的背景

npm install gitbook-plugin-change_girls

6，最后附上我的SUMMARY.md和book.json代码

# Summary

* [前言](README.md)
* [VUE.JS](Chapter1/README.md)
    * [第一节：Vue](Chapter1