gitbook 安装和使用-个人分享笔记本

官方地址
笔者当时用gitbook插件的版本是 v3.2.3

1. 安装

npm i gitbook -g

通过gitbook -V命令查看是否安装成功。

2. 项目初始化

新建项目mygitbook
然后在根目录下执行命令

gitbook init

然后项目中会自动生成 README.md 和 SUMMARY.md

3. 预览

gitbook server

gitbook 默认会启动 4000 端口，然后浏览器访问 localhost:4000即可看见默认效果

4. 生产环境构建

构建出静态html页面

gitbook build

然后项目下会生成_book文件夹，最后我们只需要把这个文件夹部署到自己的服务器上即可。

5. 定制化插件

官方是支持定制化功能的，不过有些插件比较老，而且bug比较多，笔者在npm官方查了好多项目，基本上好用的并不多，
当然，要想使自己的笔记更独特点，官方是支持插件扩展的，也就是自己可以按照gitbook的插件模板开发，笔者这里也就不具体介绍了，有兴趣的话，可以自行研究。

1）新建 book.json

在项目初始化下新建 book.json
book.json 即是 gitbook 项目的配置文件，后面我会把自己目前在用的配置文件贴上，供读者借鉴。
配置和package.json格式差不多，常用的配置如下

{
	"title" : "mygitbook", // 书名
	"author" : "lucky__star", //作者
	"description" : "lucky__star的笔记", //描述
	"language" : "zh-hans", // 语言
	"links" : { // 侧导航添加链接
	    "sidebar" : {
	        "博客中心" : "https://xqchuang.gitee.io/es6/",这个是本人的第一个个人笔记
	    }
	},
	"plugins":[], //这里是插件列表
	"pluginsConfig":{}插件具体配置
}

2）官方默认的plugins

• highlight：代码高亮
• search：导航栏查询功能（不支持中文）
• sharing：右上角分享功能
• font-settings：字体设置（最上方的"A"符号）
• livereload：为GitBook实时重新加载
  这几种官方是默认携带的，如果不想用，可以在插件列表中去掉，

"plugins": ["-highlight"]

3）引用第三方插件

这里直接贴上笔者认为比较好用的插件，拿走，不谢

"plugins": [
        "code@0.1.0", // 代码添加行号&复制按钮
		"back-to-top-button@0.1.4", // 返回顶部
		"search-pro@2.0.2", // 高级搜索，支持中文
		"-search", // 删除只支持英文的搜索
		"github@2.0.0", // github地址，会在右上角显示
		"pageview-count@1.0.1", //观看人数
		"styles-less@1.0.0", // 使用 less 预编译
		"multipart@0.3.0", // 分章节展示,会根据 Summary.md的顺序给出序号
		"splitter@0.0.8", // 侧导航宽度可调节
		"donate@1.0.2", // 打赏，支持微信和支付宝
		"custom-favicon@0.0.4", // 修改标题栏图标
		"tbfed-pagefooter@0.0.1", // 页底
		"auto-scroll-table@0.0.5", // 表格可滚动
		"heading-anchors", // 锚点
		"cuav-chapters", // 目录折叠
		"prism@2.4.0",  // 第三方代码高亮插件
		"-highlight", // 取消原生代码高亮
		"-sharing" //原本的右上角分享关闭
    ],

然后执行 gitbook install 会下载插件
插件后面的@可以不用添加，默认会下载最新版插件

3）pluginConfig 插件配置

上面使用的插件配置如下，没有则说明无需配置

"pluginsConfig": {
        "code": {
            "copyButtons": true
        },
		"github": {
            "url": "https://github.com/xuqichuang/es6"
        },
		"prism": {
            "css": [
                "prismjs/themes/prism-solarizedlight.css"
            ],
			"lang": {
                "flow": "typescript"
            }
        },
		"tbfed-pagefooter": {
            "copyright":"Copyright © lucky__star 2020",
            "modify_label": "本书发布时间：",
            "modify_format": "YYYY-MM-DD HH:mm"
        },
		"favicon": "images/favicon.ico",
		"donate": {
            "wechat": "http://photonj.photo.store.qq.com/psc?/V13gPhs63CGiSQ/KMnzwBNJT4ZeiPmlYdobb*Qhqb4yWSLU9F37KZ.frb7oO*4iG4Y*ker4Zo5huSOkukeOEd3zrLT1d5nk55xbXw!!/b&bo=gASABIAEgAQRECc!&rf=viewer_311",
            "title": "",
            "button": "赏",
            "wechatText": "微信打赏"
        },
		"theme-default": {
            "showLevel": true
        }
}

6. 页面列表配置

还记得gitbook init 初始化项目的时候，系统给我们自动生成的SUMMARY.md 文件吗？那个即是我们的列表导航

# Summary

* [简介](README.md)

如果有2级/3级目录的话在后面添加路径，比父级前面多一个tab键

# Summary

* [简介](README.md)
* [类别](list)
	* [食物](list/food)
	* [水](list/drink)

7. book.json源码

根据自己实际需要修改

{
	"title": "ES6 入门简介",
	"description": "好记性不如G笔记",
	"author": "lucky__star",
	"gitbook": "3.2.3",
	"links" : {
		"sidebar" : {
			"博客中心" : "https://xuqichuang.gitbook.io/es6/"
		}
	},
    "plugins": [
        "code@0.1.0",
		"back-to-top-button@0.1.4",
		"search-pro@2.0.2",
		"-search",
		"github@2.0.0",
		"pageview-count@1.0.1",
		"styles-less@1.0.0",
		"multipart@0.3.0",
		"splitter@0.0.8",
		"donate@1.0.2",
		"custom-favicon@0.0.4",
		"tbfed-pagefooter@0.0.1",
		"auto-scroll-table@0.0.5",
		"heading-anchors",
		"cuav-chapters",
		"prism@2.4.0",
		"-highlight",
		"-sharing"
    ],
    "pluginsConfig": {
        "code": {
            "copyButtons": true
        },
		"github": {
            "url": "https://github.com/xuqichuang/es6"
        },
		"prism": {
            "css": [
                "prismjs/themes/prism-solarizedlight.css"
            ],
			"lang": {
                "flow": "typescript"
            }
        },
		"tbfed-pagefooter": {
            "copyright":"Copyright © lucky__star 2020",
            "modify_label": "本书发布时间：",
            "modify_format": "YYYY-MM-DD HH:mm"
        },
		"favicon": "images/favicon.ico",
		"donate": {
            "wechat": "http://photonj.photo.store.qq.com/psc?/V13gPhs63CGiSQ/KMnzwBNJT4ZeiPmlYdobb*Qhqb4yWSLU9F37KZ.frb7oO*4iG4Y*ker4Zo5huSOkukeOEd3zrLT1d5nk55xbXw!!/b&bo=gASABIAEgAQRECc!&rf=viewer_311",
            "title": "",
            "button": "赏",
            "wechatText": "微信打赏"
        },
		"theme-default": {
            "showLevel": true
        }
    }
}