分类
公众号「0加1」

如何写一本开源电子书2.0


title: 如何写一本开源电子书2.0

传统的纸质书,只能支持图文混排;

但互联网技术类的书籍,更适合电子书,原因如下:

1.技术变化快,电子书方便进行内容更新。

2.Gif图的效果比单张截图更生动形象。

3.电子书涉及的代码,可以直接复制运行,方便!

创建一本电子书,不需要花一分钱,有开源的电子书构建程序,可以免费使用;

目前最主流通用的电子书构建程序为Gitbook,我用Gitbook构建了我的第一本开源电子书《Chrome插件英雄榜》

但Gitbook有以下缺点

1.Gitbook需要将markdown文档在本地构建为html网页,随着文章数量增加,构建时间会越来越长;

2.Gitbook的开源项目已不再更新,Gitbook需要使用官方在线服务才能持续更新,而在线服务有空间限制,突破空间限制后,要花钱买会员;

3.Gitbook过于依赖插件,即使加一行统计代码,都需要找插件才能实现,如果要自己写插件,学习成本也很高;

image-20200928180403808

用先进的Docsify取代Gitbook

Docsify与Gitbook一样,都是电子书构建程序;

image-20200928180326642

Docsify无需构建,markdown文章转换为html的过程,在用户浏览器完成;

Docsify完全免费,截止2020年09年28日,官方未提供在线服务,用户可以把代码免费带回家自己构建部署;

Docsify有一个基础的html,可以任意插入各种js脚本;

如何构建开源电子书

  1. 首先需要电脑需要下载安装 NodeJS

  2. 使用npm安装构建工具npm i docsify-cli -g

  3. 运行 docsify init ./docs ,创建电子书目录 docs

  4. 进入docs文件夹,创建markdown文件,并用markdown格式进行文章创作

  5. 将docs部署到线上环境

官方中文教程 https://docsify.js.org/#/zh-cn/quickstart

亲测已支持的功能

  • 支持评论

    image-20200928185245449

  • 支持全文搜索

image-20200928185322672

  • 支持代码一键复制

image-20200928185422779

  • 支持插入百度统计代码

image-20200928185514192

  • 支持字数统计

image-20200928185348046

已测试功能展示地址: https://zhaoolee.com/ProgrammingWithChrome/

如何部署Docsify电子书

如果你没有自己的主机,Docsify电子书可以托管Github page空间里(免费无限空间,免费全球CDN加速),Github page有微软Azure云的支持,只要微软没倒闭,电子书就不会挂;我亲自在Github page部署了一份,在线地址为 https://zhaoolee.com/ProgrammingWithChrome/

如果你不懂Github page是什么路子,这里有我的实例仓库:https://github.com/zhaoolee/ProgrammingWithChrome 可以对着抄!

如果你拥有自己的主机,那你是个老司机了,这里放一个我部署成功的效果页面:https://www.v2fy.com/asset/0i/ProgrammingWithChrome/docs/

快乐收资源(求关注)

如何获取部署的电子书实例?

在公众号0加1后台回复docsify部署目录即可获得奶牛快传高速下载地址

小结

Docsify继承了Gitbook的优点,比如保留左侧目录,方便切换章节,完美适配pc移动端,且主程序开源。

Docsify是一款比Gitbook更先进的程序,它无须构建,完全免费,提供基础html,方便用户插入css和js脚本,解决了Gitbook的老毛病。

如果你想写电子书,Docsify是极好的选择;也欢迎把这篇文章,转发给想写书的人,每本开源电子书,都应该得到开源工程的助力!

发表评论

电子邮件地址不会被公开。 必填项已用*标注


The maximum upload file size: 2 MB.
You can upload: image, audio, video, document, spreadsheet, interactive, text, archive, code, other.
Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded.