用GitBook制作自己的网页版电子书

用GitBook制作自己的网页版电子书

前言

几年前阅读过其他人用GitBook创建的文档,可以直接在浏览器中打开,页面干净整洁,非常清爽,至今印象深刻。

GitBook非常适合用来为个人或团队制作文档,对于我这种偶尔写博客的人群来说,GitBook可以说是一款神器。我后续打算用GitBook来整理一些可以归纳到一个系列的内容,所以我先研究了GitBook。

关于GitBook

先看看GitBook的“自我介绍”。(来自GitBook官网:https://docs.gitbook.com/readme)

GitBook is a platform for capturing and documenting technical knowledge — from product docs, to internal knowledge bases and APIs.
GitBook是一个捕捉和记录技术知识的平台——从产品文档到内部知识库和api。
We want to help teams to work more efficiently with a simple but powerful platform that helps them share their knowledge.
我们希望通过一个简单但功能强大的平台帮助团队更高效地工作,帮助他们分享知识。
Our mission is to make a user-friendly and collaborative product for everyone to create, edit and share knowledge through documentation.
我们的使命是制作一个用户友好的协作产品,让每个人都可以通过文档创建、编辑和共享知识。

我对GitBook的介绍。

正如GitBook官网的介绍那样,它可以用来写文档,记录和分享知识,还可以用来记录API等。根据我的了解,GitBook有以下特点:

  • GitBook是开源且免费的(https://github.com/GitbookIO/gitbook)
  • GitBook可以在本地离线生成文档,分享给他人使用
  • GitBook可以托管文档,支持直接用GitHub账号登录,还支持赞赏等丰富的功能
  • GitBook使用Markdown语法,用过Markdown可以直接上手
  • GitBook支持转换PDF、HTML等格式,方便生成电子书或静态网页

这些特点展现了GitBook非常实用的功能,完美适用于制作个人电子书。我之前看过的文件就是由GitBook生成的静态网页,生成可交互的静态网页就是我使用GitBook的核心需求。那如何使用GitBook呢?

安装GitBook

GitBook 需要依赖于 Node.js,因此要先下载 Node.js 并安装。本文是在 Windows 上安装,Linux 和 Mac 安装原理相似。

1. 安装Node.js

Node.js下载地址: https://nodejs.org/en/download

这里需要注意,Node.js和GitBook之间可能会有兼容问题,不建议安装最新版本的Node.js,我安装的Node.js版本是v16.20.2(其他版本我没有逐一尝试,如果安装过程中遇到很难解决的问题,可以卸载换其他版本)。

先进入Node.js下载页面:

在这里插入图片描述

下拉到页面下方,找到 Previous Releases(以往的版本):

在这里插入图片描述

进入页面后点击需要的版本下载:

在这里插入图片描述

按照惯例,一般都是安装偶数大版本号的版本。安装过程很简单,下载完成后,双击打开下载的安装文件,一直点击下一步直到安装完成。

完成后打开命令行,输入 node -v (v字母小写),能返回Node.js的版本号即说明安装成功。

在这里插入图片描述

2. 安装GitBook

安装完Node.js后,打开命令行,输入 npm install -g gitbook-cli 安装GitBook。命令执行可能需要几分钟时间,请耐心等待。这个步骤如果遇到墙,可以换一下npm的国内镜像源,自己网上搜一下如何配置。

npm install -g gitbook-cli

命令执行完后验证是否安装成功,输入 gitbook -V (V字母大写),能返回GitBook的版本号即说明安装成功。

在这里插入图片描述

使用 gitbook 命令,可能会遇到如下报错。

在这里插入图片描述

报错信息:cb.apply is not a function ,这个问题是 polyfills.js 文件中的 287 行报错了。解决这个问题,需要修改 polyfills.js 文件。复制报错的文件路径,找到 polyfills.js 文件并打开(可以用任何文本编辑器打开),注释掉如下三行代码(前面加双斜线或直接快捷键注释)就可以解决。

在这里插入图片描述

安装不同版本,这三行代码的具体行数可能会有差异,我的是 62-64 行。

此外,还可能会遇到如下报错。

在这里插入图片描述

报错信息:Error: Failed to parse json. Unexpected token ‘u’ at 1:1。这是代码解析json出错,但不知道具体哪个位置。

遇到这个问题,需要先将 Node.js 的版本降低,再重新安装 GitBook 。比如我安装最新版 Node.js v20.10.0,就会报这个错,换成 v16.20.2 后无此问题。

过程中如果需要卸载 Node.js ,Windows 可以打开控制面板卸载,如果需要卸载 GitBook 则在命令行执行 npm uninstall gitbook-cli -g 。

使用GitBook

1. 初始化GitBook

GitBook 安装完成后,你可以在本电脑的任意位置使用。先创建一个项目文件夹,如我在桌面创建一个 GitBookDemo 文件夹,进入这个目录,执行命令 gitbook init 初始化项目。

在这里插入图片描述

执行完后会自动创建目录文件 SUMMARY.md 和 README.md 文件。这两个文件都是 Markdown 格式的文件,要修改这两个文件需要安装 Markdowm 编辑器,如 MarkdownPad (只支持Windows)、Typora(支持所有OS)等,当然也可以不单独安装,VSCode、PyCharm、Sublime等程序员常用编辑器都可以支持 Markdown 格式编辑(如果没有自带装个插件即可)。

2. 编辑电子书内容

README.md 文件中可以写一些电子书的说明介绍,SUMMARY.md 用于搭建电子书的目录结构。以本文内容为例,可以先按照如下格式搭建好目录。

在这里插入图片描述

定义目录或章节的格式是 *[]() ,中括号中是页面显示内容,小括号中是各章节的内容文件,也都是用 md 格式。如果需要多级目录,使用缩进控制。

搭建好目录,在 GitBookDemo 中创建各章节的文件,输入需要的内容保存。

如果电子书中需要插入图片,先准备好图片,然后用 md 语法添加。如在 GitBookDemo 中新建一个 Images 文件夹用于存放准备的图片。添加图片的格式是 ![](), 中括号中是图片描述,可以为空,小括号中是图片的相对路径,如 Images/001.png 。

3. 生成电子书

内容完成后,执行 gitbook build 命令生成静态网页版电子书,如果需要生成PDF格式的电子书,则执行 gitbook pdf 命令。

在这里插入图片描述

gitbook build 执行成功后,会在项目目录下生产一个 _book 文件夹,这个文件夹就是生成的电子书文件。进入 _book 目录,用浏览器打开 index.html 文件就可以使用电子书了。

在这里插入图片描述

使用时如果章节不能跳转,需要找到 _book/gitbook/theme.js 文件,在文件中 Ctrl+F 搜索 if(m)for(n.handler&& ,将 if(m) 改成 if(false) ,然后关掉 index.html 重新打开。

如果从章节页面点击简介(README.md文件)时跳转到了 _book 的上一级目录,则需要修改每个章节的 html 文件中的跳转链接,将 ./ 修改成 ./index.html 。

在这里插入图片描述

除了用 gitbook build 构建生成结果,在编辑过程中,还可以随时执行 gitbook serve 命令(注意不是server) 启动本地Web服务,在浏览器通过 http://localhost:4000 预览电子书。

要关闭 gitbook serve 可以在终端使用快捷键 Ctrl+C,如果这样关不掉,端口被占用,无法重新启动 gitbook serve。此时新打开一个命令行窗口,执行 netstat -ano|findstr 35729 查看端口的 PID,然后执行 taskkill -F -PID 123456(例如查到的PID是123456) 杀掉进程。

4. 插件安装

完成前面的内容,已经能成功生成电子书了,如果还需要更多的功能,可以安装 GitBook 的插件。

在项目目录下新建一个 book.json 文件,然后在 book.json 文件中写入需要安装的插件,以我需要使用的目录折叠和回到顶部为例。

book.json:

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

准备好 book.json 后,在命令行执行 gitbook install 命令安装插件,安装完成后重新 gitbook build 生成电子书,插件功能就会生效。

需要更多插件,可以到 GitBook 的官网查找。如果要禁用插件,则在 book.json 中的插件名前加一个横杠,如要禁用目录折叠功能就将 expandable-chapters 改成 -expandable-chapters 。

此外,book.json 中除了可以配置插件信息,还可以配置很多其他信息,如自定义样式、链接、捐赠二维码等,就不逐一介绍了。

总结

GitBook 制作电子书非常实用,虽然不算难,但也需要一定的学习成本。

本文介绍的功能完美符合我自己的使用需求,都是我自己的经验总结。文中介绍了很多可能会遇到的问题和解决方法,看起来好像使用 GitBook 会有很多坑,但其实这些问题只需要解决一次就可以。电子书创建成功后,可以永久使用,且可以发送给任何人使用,花些时间解决问题也是值得的。

为了能更好地体验GitBook的效果,我将本文的内容做成了静态网页电子书,可以获取体验。
百度网盘:https://pan.baidu.com/s/1BoK8Qf1q60omlIHJDEqh8Q?pwd=ty6m


📢欢迎 点赞👍 收藏⭐ 评论📝 关注 如有错误敬请指正!

☟ 学Python,点击下方名片关注我。☟

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/253683.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[计网00] 计算机网络开篇导论

目录 前言 计算机网络的概念 计算机网络的分层 计算机网络的分类 网络的标准化工作和相关组织 计算机网络的性能指标 前言 计算机网络在我们的日常生活中无处不在 在网络会有各种各样的协议和封装 保证我们的信息完整,无误的在各个客户端之前传输 计算机网络的概念 四…

Vue3使用Three.js导入gltf模型并解决模型为黑色的问题

背景 如今各类数字孪生场景对三维可视化的需求持续旺盛,因为它们可以用来创建数字化的双胞胎,即现实世界的物体或系统的数字化副本。这种技术在工业、建筑、医疗保健和物联网等领域有着广泛的应用,可以帮助人们更好地理解和管理现实世界的事…

如何通过兴趣爱好选职业?

一个错误的选择,可能造成终身的遗憾,一个正确的选择,可以让我们少奋斗几十年。所以无论现在付出多少代价,多花一些时间,去研究以下未来的职业方向,这是值得的。 职业定位(专业定位)…

程序人生15年人生感悟

计算机程序员并不是一件什么高大上的职业。而仅仅是一份普通的工作。就像医生能治病救人,我们能治蓝屏救程序,我们都在为这个世界默默的做出自己的贡献。刻意或无意宣扬某个职业高大上,其实质是对其它行业从业者的不公平。但是有些人却常常这…

055:vue工具 --- 人民币小写转化为大写

第055个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。 (1)提供vue2的一些基本操作:安装、引用,模板使…

Python tkinter 初探Toplevel控件搭建父子窗口

目录 Toplevel控件搭建父子窗口 最简明的父子窗口框架 改进一:屏蔽和开放按钮 改进二:子窗口始终在主窗口之上 改进三:增加子窗口的关闭协议 改进四:使子窗口长获焦点 总结 Toplevel控件搭建父子窗口 最近,用P…

数据分析为何要学统计学(4)——何为置信区间?它有什么作用?

置信区间是统计学中的一个重要工具,是用样本参数()估计出来的总体均值在某置信水平下的范围。通俗一点讲,如果置信度为95%(等价于显著水平a0.05),置信区间为[a,b],这就意味着总体均值落入该区间的概率为95%…

[Android] ubuntu虚拟机上搭建 Waydroid 环境

1.安装虚拟机 略 2.安装waydroid Ubuntu/Debian and derivatives For Droidian and Ubuntu Touch, skip directly to the last step Install pre-requisites sudo apt install curl ca-certificates -y Add the official repository curl https://repo.waydro.id | sudo…

轻量封装WebGPU渲染系统示例<52>- Json数据描述材质、纹理等3D渲染场景信息

当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/feature/material/src/voxgpu/sample/DataDrivenScene3.ts 当前示例运行效果: ​​​​​​​ Json数据: {"renderer": {"mtplEnabled": true,"camera": {"eye&quo…

晚期食管癌肿瘤治疗线程分类

文章目录 1、肿瘤治疗的线数1.1 基础概念1.2 线程定义1.3 如何计算治疗线数 2 食管癌治疗指南2.1 食管癌诊疗指南2.1 CSCO 本文前半部分主要来源于参考文件1,其余部分来源于官方指南。无原创内容,全部为摘要。 1、肿瘤治疗的线数 1.1 基础概念 抗肿瘤药…

机器学习算法---聚类

类别内容导航机器学习机器学习算法应用场景与评价指标机器学习算法—分类机器学习算法—回归机器学习算法—聚类机器学习算法—异常检测机器学习算法—时间序列数据可视化数据可视化—折线图数据可视化—箱线图数据可视化—柱状图数据可视化—饼图、环形图、雷达图统计学检验箱…

写好ChatGPT提示词原则之:清晰且具体(clear specific)

ChatGPT 的优势在于它允许用户跨越机器学习和深度学习的复杂门槛,直接利用已经训练好的模型。然而,即便是这些先进的大型语言模型也面临着上下文理解和模型固有局限性的挑战。为了最大化这些大型语言模型(LLM)的潜力,关…

英文论文降重修改技巧 papergpt

大家好,今天来聊聊英文论文降重修改技巧,希望能给大家提供一点参考。 以下是针对论文重复率高的情况,提供一些修改建议和技巧,可以借助此类工具: 英文论文降重修改技巧 作为网站编辑,我们经常需要处理大量…

scroll-behavior属性使用方法

定义和用法&#xff1a; scroll-behavior 属性规定当用户单击可滚动框中的链接时&#xff0c;是否平滑地&#xff08;具动画效果&#xff09;滚动位置&#xff0c;而不是直线跳转。 <style>element{/* 核心代码 */scroll-behavior: smooth;} </style> 属性值&am…

网络基础(十一):VRRP原理与配置

目录 前言&#xff1a; 1、VRRP的基本概述 2、VRRP的基本原理 2.1VRRP的基本结构 2.2设备类型 2.3状态机 2.4VRRP路由器的抢占功能 2.5VRRP路由器的优先级 2.6VRRP工作原理 2.7主备路由器的工作内容 3、VRRP的基本配置 3.1配置主路由器和备用路由器 3.2配置PC1与P…

Spring Boot 3 整合 Hutool 验证码实战

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…

面试 Java 算法高频题五问五答第一期

面试 Java 算法高频题五问五答第一期 作者&#xff1a;程序员小白条&#xff0c;个人博客 相信看了本文后&#xff0c;对你的面试是有一定帮助的&#xff01; ⭐点赞⭐收藏⭐不迷路&#xff01;⭐ 1&#xff09;括号生成: 数字 n 代表生成括号的对数&#xff0c;请你设计一个…

机器视觉技术与应用实战(Chapter Two-03)

2.5 图像滤波和增强 滤波的作用是&#xff1a;图像中包含需要的信息&#xff0c;也包含我们不感兴趣或需要屏蔽的干扰&#xff0c;去掉这些干扰需要使用滤波。 增强的作用是&#xff1a;通过突出或者抑制图像中某些细节&#xff0c;减少图像的噪声&#xff0c;增强图像的视觉效…

2020 年网络安全应急响应分析报告

2020 年全年奇安信集团安服团队共参与和处置了全国范围内 660起网络安全应急响应事件。2020 年全年应急响应处置事件行业 TOP3 分别为:政府部门行业(146 起)医疗卫生行业(90 起)以及事业单位(61 起&#xff0c;事件处置数分别占应急处置所有行业的 22.1%、13.6%、9.2%。2020 年…

Mac如何安装stable diffusion

今天跟大家一起在Mac电脑上安装下stable diffusion&#xff0c;在midjourney等模型收费的情况下如何用自己的电脑算力用上免费的画图大模型呢&#xff1f;来吧一起实操起来 一、安装homebrew 官网地址&#xff1a;Homebrew — The Missing Package Manager for macOS (or Lin…