详解Gitbook制作精美电子书

介绍一个实用的功能,看下图,是用gitbook做的电子书(文档、教程),左侧是目录,右侧是内容,很方便网页浏览查阅,这样的电子书该怎么制作?总结了一篇入门教程,下面所有步骤都是我试验过几次总结的,按照我的步骤来,就不容易出错,希望对大家有帮助,有任何问题公众号回复1,添加我微信,相互探讨


640?wx_fmt=jpeg


分3大步骤

1、安装node.js

2、安装gitbook服务

3、安装可视化编辑软件gitbook-editor


一、安装Node.js 640


1、去node.js官网下载安装包,根据自己电脑下载对应的版本,我这里下载的是64位安装程序(下载地址:http://nodejs.cn/download/)


640?wx_fmt=png


2、一路默认安装,当然这里截图说明安装node.js时候,node.js和npm都被安装了,并加入了环境变量(node.js和npm的关系类似python和pip的关系,npm是一个包管理工具)


640?wx_fmt=png


3、安装完成可以通过命令看版本号 node -v     npm -v

640?wx_fmt=png


二、安装gitbook程序 640


4、执行命令npm install -g gitbook-cli,默认下载的国外镜像,如果网速不好,可能会略慢,耐心等待

640?wx_fmt=png

下载好后出现版本号,安装成功

640?wx_fmt=png


三、安装Gitbook-editor编辑软件 640


5、网上下载gitbook-editor软件,我下载的是Windows版本,解压后点击exe安装文件(注意:如果提示安装错误,请关闭杀毒软件并重启电脑重新安装

安装时候会提示7.0.12版本为最新版,是否要下载,可以选择下载安装,安装新版本过程可能略慢没什么提示,但是已经在安装,耐心等待


640?wx_fmt=jpeg


6、新版本安装成功后出现如下弹窗

640?wx_fmt=png


7、无需登录,直接跳过

640?wx_fmt=png


8、添加新书名称,默认用英文,中文不行(注意,该界面我们可以更改下默认文件保存路径,点击菜单Gitbook Editor菜单下的Change Library Path,创建一个自己的文件存储路径


640?wx_fmt=png


9、新建好后打开首页

640?wx_fmt=png


10、左侧菜单可以添加目录或者子目录,通过右键添加即可


640?wx_fmt=png

11、左侧目录效果图

640?wx_fmt=png

12、右下角一个不起眼的地方有问号,这里面有Markdown编辑开启预览模式,也有setting修改配置,开启Markdown后出现分屏,可以在编辑时候实时预览

640?wx_fmt=png


13、接下来编辑标题,正文,图片,链接,代码,保存等等功能,依照箭头所示的各个工具即可,也有表格,分隔线等更功能不在一一列举,编辑完后点击保存,一定要点击保存


640?wx_fmt=jpeg


14、最后,编辑完进行网页展示,需要用到命令gitbook serve(注意是serve不是server)并生成http://localhost:4000本地访问地址


这里我的电子书名字叫做python,则命令行一定要切换到python目录下面

640?wx_fmt=jpeg



15、网页预览,左侧导航,右侧内容

640?wx_fmt=jpeg


16、我们看下文件夹里面的文件,运行gitbook serve之前是没有html网页的,运行成功后会自动生成,如果你想做一个web电子书、文档、教程,而自身前端水平又不好的情况下,就可以拿这些生成好的html来嵌入web框架当做模板

640?wx_fmt=jpeg


本文完!


程序员资源社区

下方公众号回复:gitbook,即可获取node.js安装包,gitbook-editor软件链接


640?wx_fmt=jpeg

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值