制作一本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：<hr class="sigil_split_marker" />*/
/*预设文本样式*/
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代码：
<div class="duokan-image-single illus"><img alt="图片名" src="../Images/图片名.jpg" /></div>
图片导览：
  <div class="duokan-image-gallery">
	<div class="illus duokan-image-single"><img alt="图片名" src="../Images/图片名.jpg" /></div>
	<div class="illus duokan-image-gallery-cell"><img alt="图片名" src="../Images/图片名.jpg" /></div>
 </div>
*/
/*预设注释样式*/
.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代码：
<a class="duokan-footnote" epub:type="noteref" href="#note1" id="note_ref1"><sup><img alt="note" class="footnote" src="../Images/note.png"/></sup></a>
    <aside epub:type="footnote" id="note1">
      <a href="#note_ref1"></a>
      <ol class="duokan-footnote-content" style="list-style:none">
        <li class="duokan-footnote-item" id="note1" value="1">注：这是注释</li>
      </ol>
    </aside>
代码说明：
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标签内将会多出一行代码，说明链接成功

<link href="../Styles/public-stylehub.css" type="text/css" rel="stylesheet"/>

制作一本epub的过程

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

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

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

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

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

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

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

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

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

 但是此时，添加一级标题模板未能正确执行，因为这一模板依托的添加p标签模板，执行时无法保证将标题统一成<p>..</p>格式，所以我们需要手动修改标题的p标签

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

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

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

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

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

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

<div class="width-distinct all-center">
 <div class="images"></div></div>

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

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

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

添加完成呈现效果如下

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

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

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

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

感谢阅读！