官方文档 - 使用GitBook和Typora生成类似官方文档
本文主要介绍我使用的GitBook + Typora + Git(服务器),来编写类似的官方文档:
一、GitBook介绍
GitBook 是一个基于 Node.js 的命令行工具,可使用 Github/Git 和 Markdown来制作精美的电子书,GitBook 并非关于 [Git]的教程。
GitBook是一款文档编辑工具。它的功能类似金山WPS中的Word或者微软Office中的Word的文档编辑工具。它可以用来写文档、建表格、插图片、生成pdf。 当然,以上的功能WPS、Office可能做得更好,但是,GitBook还有更最强大的功能:它可以用文档建立一个网站,让更多人了解你写的书,另外,最最核心的是,他支持Git,也就意味着,它是一个分布式的文档编辑工具。 你可以随时随地来编写你的文档,也可以多人共同编写文档,哪怕多人编写同一页文档,它也能记录每个人的内容,然后告诉你他们之间的区别,也能记录你的每一次改动,你可以查看每一次的书写记录和变化,哪怕你将文档都删除了,它也能找回来! 这就是它继承Git后的厉害之处!
-
GitBook + Markdown + Git
优点:- 语法简单
- 兼容性强
- 导出方便
- 专注内容
- 团队协作
二、Typora介绍
Typora 是一款支持实时预览的 Markdown 文本编辑器。它有 OS X、Windows、Linux 三个平台的版本,并且由于仍在测试中,是完全免费的。
Markdown 文本编辑器,它支持且仅支持 Markdown 语法的文本编辑。在 Typora 官网 上他们将 Typora 描述为 「A truly minimal markdown editor. 」。
相关markdown编辑器
三、安装和使用GitBook
本地安装
要求
GitBook的安装非常简单。您的系统只需满足这两个要求:
- NodeJS
- Windows,Linux,Unix或Mac OS X
使用NPM安装
安装GitBook的最好方法是通过 NPM
安装。在已经安装好NodeJS和NPM的电脑上,通过命令行窗口,输入以下命令安装GitBook:
npm install gitbook-cli -g
gitbook-cli
是安装和管理GitBook版本库的程序。它会自动安装GitBook所需的模块来创建一本书。
创建一本书
GitBook通过以下命令在当前目录创建一本书:
gitbook init
如果你想用现有的目录来创建一本书,你可以通过运行 gitbook init ./directory
来实现
使用下面的命令预览您创建的图书:
gitbook serve
或者使用以下命令构建静态网站:
gitbook build
安装其他版本
gitbook
命令可以方便地下载和安装不同版本的GitBook来测试你的书
gitbook fetch 4.0.0-alpha.1
使用gitbook ls-remote
列出可用于安装的远程版本。
调试
您可以使用--log=debug
和--debug
来获得更详细的错误消息(堆栈跟踪)。例如:
gitbook build ./ --log=debug --debug gitbook serve ./ --log=debug --debug
四、使用
1、新建mybook文件夹,初始化:gitbook init
会自动生成目录
README.md —— 书籍的介绍写在这个文件里 SUMMARY.md —— 书籍的目录结构在这里配置
2、启动Typora编辑器,引入文件夹
3、目录编辑SUMMARY.md
4、可以使用VSCode进行辅助编辑
5、浏览器浏览:gitbook serve
执行 gitbook serve
来预览这本书籍,执行命令后会对 Markdown 格式的文档进行转换,默认转换为 html 格式,最后提示 “Serving book on http://localhost:4000”
6、构建书籍:gitbook build
默认:将生成的静态网站输出到 _book 目录 指定路径:gitbook build [书籍路径] [输出路径] 指定端口:gitbook serve --port 2333 生成pdf格式:gitbook pdf ./ ./mybook.pdf 生成epub格式:gitbook epub ./ ./mybook.epub 生成 mobi 格式:gitbook mobi ./ ./mybook.mobi
注意:如果生成不了,你可能还需要安装一些工具,比如 calibre、ebook-convert,或者在 Typora 中安装 Pandoc 进行导出。
五、用 Git 做版本管理
a、在远端建好git仓库,在 mybook 目录下执行 git init 初始化仓库,执行 git remote add 添加远程仓库。接着就可以愉快地 commit,push,pull …
b、将生成的html放在自己的服务器上,就能直观看到你想要的文档效果
六、相关配置及优化
目录结构: ├── book.json ├── README.md ├── SUMMARY.md ├── chapter-1/ | ├── README.md | ├── something.md ├── chapter-2/ | ├── README.md
a、GitBook 特殊文件的功能:
文件名 | 描述 |
---|---|
book.json | 配置数据 (optional) |
README.md | 电子书的前言或简介 (required) |
SUMMARY.md | 电子书目录 (optional) |
GLOSSARY.md | 词汇/注释术语列表 (optional) |
b、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 | 插件的配置 |
c、Gitbook 默认带有 5 个插件:
highlight - 语法高亮插件 search - 搜索插件 sharing - 分享插件 font-settings - 字体设置插件 livereload - 热加载插件
d、去除自带插件:
可以在插件名称前面加 - "plugins": [ "-lunr", "-search",导航栏查询功能(不支持中文) "search-pro",搜索支持中文 "-highlight",代码高亮 "-sharing",右上角分享功能 "-font-settings",字体设置(最上方的"A"符号) "-livereload",为GitBook实时重新加载 "expandable-chapters-small", "book-summary-scroll-position-saver", "chapter-fold", "multipart", "popup" ]
Tips:添加插件后要进行安装 gitbook install
e、GitBook插件列表
mygitalk
基于gitalk的评论插件 ➡️ https://github.com/snowdreams1006/gitbook-plugin-mygitalktheme-default
GitBook的默认主题 ➡️ https://github.com/GitbookIO/theme-defaultautotheme
自动换肤插件 ➡️ https://github.com/willin/gitbook-plugin-autothemesharing
默认的分享插件 ➡️ https://github.com/GitbookIO/plugin-sharingfontsettings
默认的字体、字号、颜色设置插件 ➡️ https://github.com/GitbookIO/plugin-fontsettingshighlight
默认的代码高亮插件,通常会使用 prism 来替换 ➡️ https://github.com/GitbookIO/plugin-highlightsearch
默认搜索插件 ➡️ https://github.com/GitbookIO/plugin-searchsearch-plus
支持中文搜索插件 ➡️ https://github.com/lwdgit/gitbook-plugin-search-plusprism
基于 Prism 的代码高亮 ➡️ https://github.com/gaearon/gitbook-plugin-prismfavicon
更改网站的 favicon.ico ➡️ https://github.com/menduo/gitbook-plugin-favicongithub
在右上角显示 github 仓库的图标链接 ➡️ https://github.com/GitbookIO/plugin-githubgithub-buttons
显示 github 仓库的star和fork按钮 ➡️ https://github.com/azu/gitbook-plugin-github-buttonssplitter
在左侧目录和右侧内容之间添加一个可以拖拽的栏,用来调整两边的宽度 ➡️ https://github.com/yoshidax/gitbook-plugin-splittercopy-code-button
为代码块添加复制的按钮 ➡️ https://github.com/WebEngage/gitbook-plugin-copy-code-buttontbfed-pagefooter
自定义页脚,显示版权和最后修订时间 ➡️ https://github.com/zhj3618/gitbook-plugin-tbfed-pagefooterexpandable-chapters
收起或展开章节目录中的父节点 ➡️ https://github.com/DomainDrivenArchitecture/gitbook-plugin-expandable-chaptersexpandable-chapters-small
比较好的折叠侧边栏 ➡️ https://github.com/lookdczar/gitbook-plugin-expandable-chapters-small-autobook-summary-scroll-position-saver
自动保存左侧目录区域导航条的位置 ➡️ https://github.com/yoshidax/gitbook-plugin-book-summary-scroll-position-saverga
添加 Google 统计代码 ➡️ https://github.com/GitbookIO/plugin-gasitemap
生成站点地图 ➡️ https://github.com/GitbookIO/plugin-sitemapbaidu
使用百度统计 ➡️ https://github.com/poppinlp/gitbook-plugin-baiduDonate
Gitbook 捐赠打赏插件 ➡️ https://github.com/willin/gitbook-plugin-donateanchors
标题带有 github 样式的锚点 ➡️ https://github.com/rlmv/gitbook-plugin-anchorsanchor-navigation-ex
插件锚导航-EX ➡️ https://github.com/zq99299/gitbook-plugin-anchor-navigation-extheme-api
编写 API 文档 ➡️ https://github.com/GitbookIO/theme-apikatex
使用KaTex进行数学排版 ➡️ https://github.com/GitbookIO/plugin-katexeditlink
内容顶部显示编辑本页链接 ➡️ https://github.com/zhaoda/gitbook-plugin-editlinkad
在每个页面顶部和底部添加广告或任何自定义内容 ➡️ https://github.com/zhaoda/gitbook-plugin-adimage-captions
抓取内容中图片的alt
或title
属性,在图片下面显示标题 ➡️ https://github.com/todvora/gitbook-plugin-image-captionschart
使用 C3.js 图表 ➡️ https://github.com/csbun/gitbook-plugin-chartstyles-sass
使用 SASS 替换 CSS ➡️ https://github.com/GitbookIO/plugin-styles-sassstyles-less
使用 LESS 替换 CSS ➡️ https://github.com/GitbookIO/plugin-styles-lessdisqus
添加 disqus 评论插件 ➡️ https://github.com/GitbookIO/plugin-disquslatex-codecogs
使用数学方程式 ➡️ https://github.com/GitbookIO/plugin-latex-codecogsmermaid
使用流程图 ➡️ https://github.com/JozoVilcek/gitbook-plugin-mermaidatoc
插入 TOC 目录 ➡️ https://github.com/willin/gitbook-plugin-atocace
插入代码高亮编辑器 ➡️ https://github.com/ymcatar/gitbook-plugin-acesectionx
分离各个段落,并提供一个展开收起的按钮 ➡️ https://github.com/ymcatar/gitbook-plugin-sectionxmcqx
交互式多选插件 ➡️ https://github.com/ymcatar/gitbook-plugin-mcqxinclude-codeblock
通过引用文件插入代码 ➡️ https://github.com/azu/gitbook-plugin-include-codeblockfbqx
使用填空题 ➡️ https://github.com/Erwin-Chan/gitbook-plugin-fbqxspoiler
隐藏答案,当鼠标划过时才显示 ➡️ https://github.com/ymcatar/gitbook-plugin-spoileranchor-navigation
锚点导航 ➡️ https://github.com/yaneryou/gitbook-plugin-anchor-navigationyoutubex
插入 YouTube 视频 ➡️ https://github.com/ymcatar/gitbook-plugin-youtubexredirect
重定向页面跳转 ➡️ https://github.com/ketan/gitbook-plugin-redirectduoshuo
使用多说评论 ➡️ https://github.com/codepiano/gitbook-plugin-duoshuojsfiddle
插入 JSFiddle 组件 ➡️ https://github.com/Mavrin/gitbook-plugin-jsfiddlejsbin
插入 JSBin 组件 ➡️ https://github.com/jcouyang/gitbook-plugin-jsbinAdvanced Emoji
支持emoji表情 ➡️ https://github.com/codeclou/gitbook-plugin-advanced-emojiPuml
使用 PlantUML 展示 uml 图 ➡️ https://github.com/GitbookIO/plugin-pumlGraph
使用 function-plot 绘制数学函数图 ➡️ https://github.com/cjam/gitbook-plugin-graphTodo
添加 Todo 功能 ➡️ https://github.com/ly-tools/gitbook-plugin-todoinclude-csv
展示 csv 文件内容 ➡️ https://github.com/TakuroFukamizu/gitbook-plugin-include-csvmusicxml
支持 musicxml 格式的乐谱渲染 ➡️ https://github.com/ymcatar/gitbook-plugin-musicxmlversions-select
添加版本选择的下拉菜单,针对文档有多个版本的情况 ➡️ https://github.com/prescottprue/gitbook-plugin-versions-selectrss
添加 rss 订阅功能 ➡️ https://github.com/denysdovhan/gitbook-plugin-rssmultipart
将书籍分成几个部分 ➡️ https://github.com/citizenmatt/gitbook-plugin-multiparturl-embed
嵌入动态内容 ➡️ https://github.com/basilvetas/gitbook-plugin-url-embed
book.json文件没有的话,可以自己创建,其他文件可以自动生成
相关配置插件事例参考:
1、https://www.liqingbo.cn/docs/gitbook/content/config.html
2、https://zhousiwei.gitee.io/mybook/notes/gitbook_config.html
3、https://www.jianshu.com/p/427b8bb066e6