GitBook基本使用

安装

  • 需要先安装node.js,通过命令node -v来检验是否安装成功

  • 安装GitBooknpm i gitbook-cli -g

  • 检验是否安装成功:gitbook -V

常用命令

  • gitbook -V:检验是否安装成功
  • gitbook init:在当前目录下创建一本书。即初始化
  • gitbook serve:启动一个本地服务器,预览创建的图书
  • gitbook build:构建静态网站,执行后在当前目录下会新建一个_book/目录,该目录下存储的构建后的静态文件

目录结构

├── book.json
├── README.md
├── SUMMARY.md
├── chapter-1/
|   ├── README.md
|   └── something.md
└── chapter-2/
    ├── README.md
    └── something.md
文件 说明
book.json 配置文件(可选)
README.md 简介-书籍的简单介绍(必填)
SUMMARY.md 目录(可选)
GLOSSARY.md 字段/注释-专业术语列表(可选)

SUMMARY.json

# Summary

* [Introduction](README.md)

## Vue

* [Vue常用插件汇总](vue/Vue常用插件汇总.md)
  * [Vue常用插件:vue-meta-info](vue/Vue常用插件:vue-meta-info.md)
  * [Vue常用插件:vue-clipboard2](vue/Vue常用插件:vue-clipboard2.md)

* [vue-cli2升级成vue-cli3.md](vue/vue-cli2升级成vue-cli3.md)
* [vue项目右滑返回](vue/vue项目右滑返回.md)


## React

* [DvaJS笔记](react/DvaJS笔记.md)
* [UmiJS笔记](react/UmiJS笔记.md)

备注

  • 最顶层的是一级目录,缩进一次的是二级目录
  • 默认会收缩进对应的一级目录里面,如果想创建更深层次的目录结构,就在对应的子目录下面以缩进的方式创建
  • 该文件里面的缩进对于文档侧边栏目录的缩进

book.json

配置说明

变量 描述
root 包含所有图书文件的根文件夹的路径,除了 book.json
structure 指定自述文件,摘要,词汇表等的路径
title 您的书名,默认值是从 README 中提取出来的。在 GitBook.com 上,这个字段是预填的。
description 您的书籍的描述,默认值是从 README 中提取出来的。在 GitBook.com 上,这个字段是预填的。
author 作者名。在GitBook.com上,这个字段是预填的。
isbn 国际标准书号 ISBN
language 本书的语言类型 —— ISO code 。默认值是 en
direction 文本阅读顺序。可以是 rtl (从右向左)或 ltr (从左向右),默认值依赖于 language 的值。
gitbook 应该使用的GitBook版本,并接受类似于 >=3.0.0 的条件。
links 在左侧导航栏添加链接信息
plugins 要加载的插件列表
pluginsConfig 插件的配置

配置示例

{
  "title": "喵巨人笔记",
  "author": "wmm",
  "description": "喵巨人学习笔记,包含前端开发、后端开发、服务器运维等",
  "language": "zh-hans",
  "gitbook": "3.2.3",
  "structure": {
		"readme": "README.md"
  },
  "links": {
		"sidebar": {
			"喵巨人笔记": "http://www.wmm66.com"
		}
  },
  "plugins": [
    "-lunr", 
    "-search", 
    "search-pro",
    "-sharing",
    "sharing-plus",
    "back-to-top-button",
    "expandable-chapters-small",
    "code",
    "tbfed-pagefooter"
  ],
  "pluginsConfig": {
    "sharing": {
      "douban": false,
      "facebook": false,
      "google": true,
      "pocket": false,
      "qq": false,
      "qzone": true,
      "twitter": false,
      "weibo": true,
      "all": [
        "douban", "facebook", "google", "instapaper", "linkedin","twitter", "weibo", "messenger","qq", "qzone","viber","whatsapp"
      ]
    },
    "tbfed-pagefooter": {
      "copyright":"喵巨人笔记 &copy 2019-2020",
      "modify_label": "文件修订时间:",
      "modify_format": "YYYY-MM-DD HH:mm:ss"
    }
  }
}

插件

默认插件

  • highlight:语法高亮插件
  • search:搜索插件
  • sharing:分享插件
  • font-settings:字体设置插件
  • livereload:热加载插件

搜索

分享

字体设置

删除默认插件

  • 在插件配置中,对应的插件前面加-即可。配置完执行gitbook install

例如右侧不再展示分享相关的按钮

{
  "plugins": [
    "-sharing"
  ]
}

常用插件

代码复制:code

{
  "plugins": [
    "code"
  ]
}

效果如下

code

代码复制按钮:copy-code-button

{
  "plugins": [
    "copy-code-button"
  ]
}

代码复制按钮

目录折叠:expandable-chapters-small

  • 效果和使用expandable-chapters效果一样,只是箭头要细一些

expandable-chapters-small

回到顶部:back-to-top-button

{
  "plugins": [
    "back-to-top-button"
  ]
}

back-to-top-button

高级搜索:search-pro

  • 自带的 search 插件,关键字不会高亮
  • 去除默认的 search 搜索和 lunr
  • 在搜索结果中,关键字会高亮;
{
  "plugins": [
    "-lunr",
    "-search",
    "search-pro"
  ]
}

原生搜索效果

原生搜索效果

高级搜索

高级搜索

分享:sharing-plus

  • 分享当前页面,比默认的 sharing 插件多了一些分享方式
{
  "plugins": [
    "-sharing",
    "sharing-plus",
  ],
  "pluginsConfig": {
    "sharing": {
      "douban": false,
      "facebook": false,
      "google": true,
      "pocket": false,
      "qq": false,
      "qzone": true,
      "twitter": false,
      "weibo": true,
      "all": [
        "douban", "facebook", "google", "instapaper", "linkedin","twitter", "weibo", "messenger","qq", "qzone","viber","whatsapp"
      ]
    }
  }
}

sharing-plus

备注:

  • true:默认展示图标,false:默认不展示
  • all:里面的会在分享的按钮的下拉列表里面全部展示出来

配置页脚:tbfed-pagefooter

{
  "plugins": [
    "tbfed-pagefooter"
  ],
  "pluginsConfig": {
    "tbfed-pagefooter": {
      "copyright":"Copyright &copy mine 2000-2020",
      "modify_label": "文件修订时间:",
      "modify_format": "YYYY-MM-DD HH:mm:ss"
    }
  }
}

tbfed-pagefooter


创作不易,若本文对你有帮助,欢迎打赏支持作者!

 分享给好友: