第一节：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: 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/Vue学习笔记.md)
* [第二节：VueRouter](Chapter1/VueRouter学习笔记.md)
* [第三节：Vux](Chapter1/Vuex学习笔记.md)
* [第四节：Vue面试题](Chapter1/Vue面试题总结.md)
* [REACT.JS](Chapter2/README.md)
* [第一节: REACT](Chapter2/React学习笔记.md)
* [第二节: ReactRouter](Chapter2/ReactRouter学习笔记.md)
* [第三节: Redux](Chapter2/Redux学习笔记.md)
* [第三节: ReactHooks](Chapter2/ReactHooks学习笔记.md)
* [第四节： React面试题](Chapter2/React面试总结.md)
* [WebPack](Chapter3/README.md)
* [第一节: WebPack简介](Chapter3/WebPack简介.md)
* [第二节: WebPack常用配置](Chapter3/WebPack常用配置.md)
* [第三节: WebPack模版](Chapter3/WebPack模版.md)
* [第四节: WebPack面试题](Chapter3/WebPack面试题.md)
* [JAVASCRIPT](Chapter4/README.md)
* [第一节: JavaScript](Chapter4/重学JS笔记.md)
* [第二节: ES6](Chapter4/ES6知识.md)
* [第三节: JS原理](Chapter4/JS原理,机制.md)
* [第四节: JS面试题](Chapter4/JS面试题.md)
* [HTML-CSS](Chapter5/README.md)
* [第一节：浏览器知识](Chapter5/浏览器知识.md)
* [第二节：CSS基础知识](Chapter5/浏览器知识.md)
* [第三节：CSS基础知识](Chapter5/浏览器知识.md)
* [第四节：SASS知识](Chapter5/Sass知识总结.md)
* [第五节：LESS基知识](Chapter5/Less知识总结.md)
* [第六节：Flex布局](Chapter5/Flex布局详解.md)
* [第七节：响应式开发](Chapter5/响应式开发.md)
* [第八节：HTML/CSS面试总结](Chapter5/HTMLCSS面试总结.md)
* [NGINX](Chapter6/README.md)
* [第一节：NGINX基础知识](Chapter6/浏览器知识.md)
* [第二节：Nginx面试总结](Chapter6/Nginx面试总结.md)
* [NODE](Chapter7/README.md)
* [第一节：NODE前言](Chapter7/NODE前言.md)
* [第二节：NODE基础知识](Chapter7/NODE基础知识.md)
* [第三节：NODE面试总结](Chapter7/NODE面试总结.md)
* [VSCODE](Chapter8/README.md)
* [第一节：VSCODE插件介绍](Chapter8/VsCode插件介绍.md)
* [GITBOOK](Chapter9/README.md)
* [第一节：GitBook介绍](Chapter9/GitBook使用介绍.md)
* [LINUX](Chapter10/README.md)
* [第一节：Linux常用命令](Chapter10/Linux常用命令.md)
上面是我的电子书文档目录，安装的实用插件如下
{
"title": "前端家族集锦",
"description": "重学前端，梳理自己的前端格局",
"author": "贰拾壹先生",
"language": "zh-hans",
"link": {
"sidebar": {
"HOME": "https://www.baidu.com"
}
},
"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"
],
"pluginsConfig": {
"code": {
"copyButtons": true
},
"github": {
"url": "https://github.com/zhengliming"
},
"tbfed-pagefooter": {
"copyright":"Copyright © jsbbmm.com 2021",
"modify_label": "该文件修订时间：",
"modify_format": "YYYY-MM-DD HH:mm:ss"
},
"donate": {
"wechat": "./images/11.jpg",
"alipay": "./images/22.jpg",
"title": "",
"button": "赏",
"alipayText": "支付宝打赏",
"wechatText": "微信打赏"
},
"change_girls" : {
"time" : 10,
"urls" : [
"girlUrl1", "girlUrl2"
]
},
"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"
]
}
}
}
