制作一本EPUB电子书

EPUB简介

想必很多小伙伴喜欢在手机、电脑或者ebook上阅读

除了网络小说外，epub格式的电子书也能为我们提供优秀的阅读体验，epub电子书可以使用多看等手机软件、koodo reader等Windows软件或者Kindle等ebook自带的epub阅读软件阅读，精致的排版、精美的插图与条理的目录与注释让我们的阅读体验感层层加码

ePub（Electronic Publication的缩写，意为：电子出版），是一个自由的开放标准，属于一种可以“自动重新编排”的内容；也就是文字内容可以根据阅读设备的特性，以最适于阅读的方式显示。EPub档案内部使用了XHTML或DTBook （一种由DAISY Consortium提出的XML标准）来展现文字、并以zip压缩格式来包裹档案内容。EPub格式中包含了数位版权管理（DRM）相关功能可供选用。（摘自百度百科）

认识sigil

Sigil 是一个免费的、开源的、多平台的电子书编辑器，使用Qt（和QtWebEngine）。它被设计用来编辑ePub格式的书籍（包括ePub 2和ePub 3）。

我们打开sigil时，会自动创建一个epub文件，并且进入第一个XHTML的编辑界面

左侧文件栏就是这个epub文件的组成，其中，text是epub的主要内容，epub是由一个或多个网页（ XHTML或DTBook）组成的，text文件夹里就是这些网页，它们呈现了这个epub的主要内容

styles文件夹里保存该epub文件所用到的css样式表（不熟悉css的朋友可以自行学习一下基本css知识），这里，我把我常用的css样式做一下总结，大家也可以自行添加

/*快捷剪贴板：

切分html：

---

*/

/*预设文本样式*/

body{

padding: 0%;

margin-top: 0%;

margin-bottom: 0%;

margin-left: 1%;

margin-right: 1%;

line-height: 130%;

text-align: justify;

}

/*字体大小*/

h1{

font-size: 1.65em;

line-height: 120%;

text-align: center;

font-weight: bold;

margin-top: 0.1em;

margin-bottom: 0.4em;

}

h2{

font-size: 1.25em;

line-height: 120%;

text-align: center;

font-weight: bold;

margin-top: 0.3em;

margin-bottom: 0.5em;

}

h3{

font-size: 0.95em;

line-height: 120%;

text-align: center;

text-indent: 0em;

font-weight: bold;

margin-top: 0.2em;

margin-bottom: 0.2em;

}

h4{

font-size: 1.4em;

text-align: center;

line-height: 1.2em;

text-indent: 0em;

font-weight: bold;

margin-top: 1em;

margin-bottom: 1.5em;

}

div{

margin: 0px;

padding: 0px;

text-align: justify;

}

p{

text-indent: 2em;

duokan-text-indent: 2em;

display: block;

line-height: 1.3;

margin-top: 0.4em;

margin-bottom: 0.4em;

}

/*字体颜色*/

.red{

color:red;

}

.yellow{

color:yellow;

}

.blue{

color:blue;

}

.custom{

color:#edac62;

}

/*图片相关*/

.illus{

text-indent: 0em;

text-align: center;

}

.cover{

margin: 0em;

padding: 0em;

text-indent: 0em;

text-align: center;

}

.coverborder{

border-style: none solid none solid;

border-color: #000000;

border-width: 1px;

}

/*预设格式相关样式*/

.right{

text-indent: 0em;

text-align: right;

}

.left{

text-indent: 0em;

text-align: left;

}

.center{

text-indent: 0em;

text-align: center;

}

.zin{

text-indent: 0em;

}

.bold{

font-weight: bold;

}

.italic{

font-style:italic;

}

.oblique{

font-style:oblique;

}

.stress{

font-weight: bold;

font-size: 1.1em;

margin-top: 0.3em;

margin-bottom: 0.3em;

}

.author{

font-size: 1.2em;

text-align: right;

font-weight: bold;

font-style: italic;

margin-right: 1em;

}

.dash-break{/*强制英文自动换行*/

word-break: break-all;

word-wrap: break-word;

}

.no-d{/*取消文字修饰*/

text-decoration: none;

}

.bc{

border-collapse: collapse;

}

.message{

text-indent: 0em;

line-height: 1.2em;

margin-top: 0.2em;

margin-bottom: 0.2em;

}

.meg{

font-size: 1.3em;

text-indent: 0em;

font-weight: bold;

margin-top: 0.5em;

margin-bottom: 0.5em;

}

.title1 {

font-size: 1em;

margin-left: 5%;

font-weight: bold;

text-decoration:none;

}

.title2 {

font-size: 0.9em;

text-align: center;

text-indent: 0em;

font-weight: bold;

}

.tilh{

text-indent: 0em;

line-height: 1em;

margin: 0;

}

/*文字大小*/

.em04{

font-size: 0.4em;

}

.em05{

font-size: 0.5em;

}

.em06{

font-size: 0.6em;

}

.em07{

font-size: 0.7em;

}

.em08{

font-size: 0.8em;

}

.em09{

font-size: 0.9em;

}

.em10{

font-size: 1.0em;

}

.em11{

font-size: 1.1em;

}

.em12{

font-size: 1.2em;

}

.em125{

font-size: 1.25em;

}

.em13{

font-size: 1.3em;

}

.em14{

font-size: 1.4em;

}

.em15{

font-size: 1.5em;

}

.em16{

font-size: 1.6em;

}

.em17{

font-size: 1.7em;

}

.em18{

font-size: 1.8em;

}

.em19{

font-size: 1.9em;

}

.em20{

font-size: 2em;

}

.em21{

font-size: 2.1em;

}

.em22{

font-size: 2.2em;

}

.em23{

font-size: 2.3em;

}

.em24{

font-size: 2.4em;

}

.em25{

font-size: 2.5em;

}

.em26{

font-size: 2.6em;

}

.em27{

font-size: 2.7em;

}

.em28{

font-size: 2.8em;

}

.em29{

font-size: 2.9em;

}

.em30{

font-size: 3em;

}

/*预设目录样式*/

.contents {

padding: 0.5em 0 0.4em 0;

text-indent: 0em;

text-align: center;

font-size: 2.5em;

/*font-family: ;*/

}

.mulu {

text-indent: 0em;

text-align: center;

padding: 0.3em;

margin: 0.8em 0;

line-height: 1.15em;

font-size: 1.1em;

/*font-family: ;*/

}

.back{

background-repeat:no-repeat;

background-position:top center;

background-size:cover;

/*background-image: ;*/

}

/*浮动*/

.fl{

float:left;

}

.fr{

float:right;

}

.cl{

clear:left;

}

.cr{

clear:right;

}

/*图片允许放大*/

/*

html代码：

图片导览：

*/

/*预设注释样式*/

.footnote {

height: 1.2em!important;

width: auto;

border:0;

}

.duokan-footnote {

height: 1.2em!important;

width: auto;

border: 0;

}

.duokan-footnote-item {

text-indent: 0em;

font-size: 0.9em;

text-align: left;

text-shadow: 0em 0em 0.1em #000000;

/*font-family: ;*/

}

sup {

font-size: 0.75em;

line-height: 1.2;

vertical-align: super!important;

}

/*

html代码：

代码说明：

1. 请將「href="#note1"」「id="note_ref1"」「id="note1"」「value="1"」这四段代码中的数字改为该注释的顺序

例：第三段注释的该段代码为「href="#note3"」「id="note_ref3"」「id="note3"」「value="3"」

2. 注：根据不同情况可改为其他文字，例如译者名

*/

/*字体*/

@font-face {/*引入字体*/

font-family: "tt1";

src:url("../Fonts/MiSans-Normal");

}

.tt1 {/*应用字体类*/

font-family: "tt1";

}

@font-face {

font-family: "tt2";

src:url("../Fonts/LXGWNeoZhiSongCHS");

}

.tt2 {

font-family: "tt2";

}

/*对齐方式*/

.vt{

vertical-align: top;

}

.vb{

vertical-align: bottom;

}

.vm{

vertical-align: middle;

}

/*行高*/

.lh{

line-height: 1em;

}

.lh1{

line-height: 1.1em;

}

.lh2{

line-height: 1.2em;

}

/*自定义css样式*/

.biaoti1{

font-size: 1em;

margin-left: 4em;

font-family: title;

}

.biaoti2{

font-size: 1em;

margin-left: 4em;

}

.underline-remove{

text-decoration:none;

}

.table-beautify{

clear:both;

display:block;

}

.width-distinct{

max-width: 25em;

}

.all-center{

margin: 0 auto;

}

.images img{

width:100%;

}

.co1{

color: #000;

}

.co2{

color: #747474;

}

.tco1{

color: #61b8d1;

}

.tco2{

color: #ebac60;

}

.tbox1{

color: #61b8d1;

line-height: 1em;

width: 2em;

height: 2.25em;

padding: 1px;

margin: 1em auto 1.2em auto;

}

右击styles——点击添加现有文件，可以将保存好的样式表添加进epub文件，但是这样还不能直接在XHTML文件中使用样式表中的类，需要链接

右击XHTML文件——点击链接样式表，选中所需的样式表点确定即可

这时，在head标签内将会多出一行代码，说明链接成功

制作一本epub的过程

这里我们选择一本lk上的小说（[新海誠]鈴芽之旅[台/繁]-轻之国度-专注分享的NACG社群）作为示例，将它做成一本epub（小说内容仅供学习交流使用，如侵删）

首先我们需要复制所有文本（目录除外），将它置于body部分

但是显然，从右侧的预览中可见，换行和格式全部丢失，这样的文本是无法阅读的

我们需要将换行替换为HTML中的换行标签

这里用到sigil的“搜索模版”功能，它可以存储查找替换例程，并批量执行

首先，在工具——搜索模板中添加常用的自然文本处理模板

由于文本有自带空格，我们选中“删除多余空格”，下方选择“所有HTML文件”，点击“替换全部”

之后选中预处理手动添加p标签组，替换所有，可以完成文本初步处理，注意，这时要删除对于HTML头部代码添加的多余的p标签

执行完之后，我们发现，格式基本正确了

但是此时，添加一级标题模板未能正确执行，因为这一模板依托的添加p标签模板，执行时无法保证将标题统一成

..

格式，所以我们需要手动修改标题的p标签

这时候，再执行前两个模板，就能完成拆分标记的添加与标题格式转换了

我们还可以手动为格式不统一的标题添加一级标题与拆分标记

这些都完成后，我们选择编辑——在章节标记处拆分，可以将这一个XHTML文件按照章节拆分成多个文件

对于复杂的目录系统，可以根据原始目录更改二级、三级标题的p标签为h2、h3等

这时，文本工作基本完成，接下来可以给epub添加一些图片，例如小说插图

插入图片可以使用这个模板，让图片呈现更佳

首先将要添加的图片添加入image文件夹中（可以批量添加）

把光标移到两个div标签之中，点击插入文件，选中image文件夹中相应的图片，即可插入

重要图片（例如封面），尽量单独置于一个XHTML文件中

添加完成呈现效果如下

之后，可以对书籍的元数据进行编辑，选择工具——元数据编辑器，也可以自行添加属性

对于已有的XHTML文件结构，可以生成目录，便于在阅读器中快速定位到所选章节，选择工具——目录——生成目录，即可按照标题的等级生成对应的目录，生成目录后，也可以自行对目录进行编辑

如果需要，还可以添加一个单独的XHTML文档，用于保存目录，通过a标签实现链接到对应章节，这里为了简化，没有添加a标签跳转

以上只是粗制一个epub的范式，大家可以自行创作，对文字、图片等元素应用各式各样的样式、格式，创作出更加精美的epub

感谢阅读！