Gitbook的安装以及使用

waws520
866 阅读6分钟

介绍

GitBook使用教程

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

1，环境搭建

安装node.js的部分见笔记:juejin.cn/post/698541…

 (1) 当前安装版本
     node -v
       v12.0.0
     npm -v
       6.9.0
 (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 waws   // 创建项目目录
 cd waws
 gitbook init  // 初始化目录

image.png

初始化报错

 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版本即可

降低node.js的版本，不用再安装gitbook了，直接在gitbook中gitbook init即可

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

3，详细说明

1. SUMMARY.md是

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

在summary的文件中输入下面的代码，保存

 * [前言](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, 会自动生成对应的文件夹和文件，

image.png

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

image.png

image.png

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

3. 测试环境,发布

 gitbook build
 打包编译过程：成功之后

image.png

在_book文件夹中可以看到生成的html文件

image.png

生成的theme.js中将if(m)替换成if(false),即可完成跳转

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

4, 其他常用命令

  1. 指定端口号
 gitbook serve --port 9527
  1. 重定向输出编译文件
 gitbook build [当前路径] [输出路径]
  1. 打包pdf
 gitbook pdf ./  ./myBook.pdf

执行报错:

InstallRequiredError: "ebook-convert" is not installed. Install it from Calibre: calibre-ebook.com

解决：下载安装 Calibre application

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

  1. 外网环境可直接托管在github仓库中

5. book.json文件说明

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

插件列表
 "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": "waws520",
   "description": "知识图谱，梳理自己的知识格局",
   "author": "waws520",
   "language": "zh-hans", 
   "link": {
      "sidebar": {
          "HOME": "https://juejin.cn/user/1390236459600743"
      }
   },
   "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/xxxx"
    },
    "tbfed-pagefooter": {
        "copyright":"Copyright &copy waws520.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"
          ]
        }
   }
}

如果我们的项目中存在图片的话，我们需要先建立一个images的文件夹，将图片都放到这个文件夹中，然后在引用的时候使用相对路径进行引用

image.png

image.png

以上就是构建整个gitbook的过程。

avatar
文章
阅读
粉丝