如何制作一本EPUB电子书ಠ_ರೃ

前言

在找轻小说资源的过程中，总会遇到只有txt资源或者只有web端资源的情况。这极大的影响了我优雅地阅读带插画的小说。为了能一劳永逸地优雅地阅读轻小说，制作epub是必不可缺的技能。

epub是一种基于XHTML/DTBook格式的开放标准电子书格式，所以它和html很相似，~~小白也能轻松掌握~~。

市面上用于制作epub的软件有很多，我这里使用的是贴吧大佬的魔改版sigil。

1.文字处理

1.1 取消首行缩进

从网页复制的小说通常会自带首行缩进，我们要利用正则表达式去掉自带的缩进。

在工具选项中找到搜索模板。

在搜索模板中，软件已经给了预设（Example Searches）。我们点击旁边的倒三角将这个预设收起来。

在空白处右键，选择添加组。

我这里给组起名为预设，右键刚刚建好的组选择添加条目。

新建的条目最左边是条目名称，我们这里要写的是取消空格的正则表达式，便在名称那一栏填入「取消空格」，修改名称时只需要双击你填入名称的那一栏就可以进行修改了。

「取消空格」的正则表达式很简单，先复制你要取消的空格，然后在查找那一栏粘贴填入。替换里什么也不用填。

点击右侧的替换所有，小说自带的首行缩进就没有了。

1.2 添加标签

epub是一种基于xhtml的格式，所以它和前端html很像。添加<p>标签才能使小说的文字被css控制，可以更方便排版。

在搜索模板中新建条目「添加<p>标签」

//正则表达式
^[^<].*[^>]$
<p>\0</p>

你问我这个正则表达式是怎么写的？下次再写一篇文章详细介绍，绝对不是因为我不会要现学>ᯅ<。

点击右侧替换所有后，小说的<p>标签就添加好了⁽⁽٩(๑˃̶͈̀ ᗨ ˂̶͈́)۶⁾⁾。

1.3 章节分段

在进行了简单的文章处理后，我们需要根据目录来为章节分段。需要注意的是<p>标签是以<p>为开头</p>为结尾的，在删除多余<p>标签时别删错了。

章节分段我们需要用到分页符。如图，我们在简介和第一章之间插入分页符只需要在两者间按下crtl+shift+回车，这样他就会自动填充分页符。因为我要做小说的插图页面，所以就在插图标题的上下都打上了分页符。

<hr class="sigil_split_marker" />     //分页符
<h2>插图</h2>     //插图标题
<hr class="sigil_split_marker" />

接下来，我们需要用到搜索工具快速的找到每个章节的标题，在标题的上方打上分页符，顺便将标题的<p>标签改为<h2>标签。

按ctrl+F快速呼出查找面板。输入标题名后按蓝色的搜索符号就能快速定位到标题位置，我们在上方添加分页符，并将<p>和</p>改为<h2>和</h2>。

如果标题含有「第一回」这种序号的话，我们可以在查找那一栏填入正则表达式「第.*回」来快速寻找。

在每一章都做好分页和标签修改后，在编辑中选择「在章节标记处拆分」。

点击之后，左侧的文件就会按照之前的标记分成好几份。

2.样式处理

epub最大的特点就是能够自由的修改小说样式，修改样式是通过css文件来完成的。

下面是整合的一个简单的css代码，用这段代码能做出一个基础的小说样式。

/*快捷剪贴板：
切分html：<hr class="sigil_split_marker" />*/
/* ===== 封面容器样式 ===== */
body.cover {
/* 重置基础样式 - 清除所有默认边距、内边距和边框 */
margin: 0 !important; /* !important确保覆盖所有阅读器的默认样式 */
padding: 0; /* 清除内边距 */
border: 0; /* 清除边框 */
/* 精确视窗控制 - 确保封面占满整个屏幕 */
width: 100vw; /* 100%视窗宽度（viewport width） */
height: 100vh; /* 100%视窗高度（viewport height） */
min-width: 100%; /* 兼容不支持vw单位的旧阅读器 */
min-height: 100%; /* 兼容不支持vh单位的旧阅读器 */
/* 布局方案 - 使用Flexbox实现完美居中 */
display: flex; /* 启用弹性布局 */
flex-direction: column; /* 垂直排列子元素 */
justify-content: center; /* 垂直居中 */
align-items: center; /* 水平居中 */
text-align: center; /* 文本水平居中（后备方案） */
overflow: hidden; /* 隐藏任何溢出内容 */
/* 阅读器兼容 - 防止字体大小被自动调整 */
-webkit-text-size-adjust: 100%; /* Chrome/Safari */
-moz-text-size-adjust: 100%; /* Firefox */
text-size-adjust: 100%; /* 标准属性 */
/* 背景回退 - 图片加载前的默认背景 */
background-color: #000; /* 使用黑色作为封面加载前的背景 */
}
/* ===== 封面图片样式 ===== */
.cover-image {
/* 尺寸控制 - 确保图片始终填满容器 */
width: 100%; /* 宽度100%父容器 */
height: 100%; /* 高度100%父容器 */
max-width: 100%; /* 防止水平溢出 */
max-height: 100%; /* 防止垂直溢出 */
/* 图片渲染 - 控制图片显示方式 */
object-fit: contain; /* 保持宽高比完整显示图片 */
object-position: center; /* 图片居中显示 */
image-rendering: -webkit-optimize-contrast; /* Safari的图片锐化优化 */
/* 交互控制 - 禁用不必要的交互行为 */
pointer-events: none; /* 禁止点击/触摸事件 */
user-select: none; /* 禁止文本选择 */
-webkit-user-drag: none; /* 禁止图片拖拽 */
/* 浏览器兼容 - 解决渲染问题 */
-webkit-backface-visibility: hidden; /* 解决iOS闪烁问题 */
backface-visibility: hidden; /* 标准属性 */
}
/*预设文本样式*/
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 {
/* 字体栈：方正清刻本悦宋优先，中易宋体为Windows回退 */
font-family: "FZQingKeBenYueSongS-R-GB", "STSong", "SimSun", serif;
/* 排版对齐：居中对齐 */
text-align: center;
/* 间距系统：上30px/下30px（创建视觉层次） */
margin: 35px 0 30px;
/* 分页控制：避免标题后分页 */
page-break-after: avoid;
/* 高级排版特性 */
line-height: 1.4; /* 比h1更宽松的行距 */
font-style: normal; /* 禁用默认斜体 */
text-shadow: 0 1px 1px rgba(0,0,0,0.1); /* 增强可读性 */
}
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;
}
hr {
/* 边框重置：清除所有默认边框样式 */
border: 0; /* 关键：必须设为0而非1，否则某些阅读器会显示默认边框 */
/* 尺寸控制：px高度的实线 */
height: 3px; /* 物理高度 */
background: #555; /* 中性灰色，确保可读性 */
/* 间距系统：上下的外边距，水平居中 */
margin: 0.2en auto; /* em单位保证与文字大小的比例关系 */
/* 宽度控制：默认100%宽度 */
width: 100%; /* 兼容不支持auto的旧阅读器 */
}
/* ===== 调试工具样式 ===== */
/* 核心调试样式 - 高亮所有含id属性的元素,exp:可以将<p>.*</p>替换成<p><a id="">.*</a> 来获得以下效果 */
[id] {
/* 视觉标识 */
outline: 4px solid rgba(255, 0, 0, 0.8); /* 半透明红色轮廓 */
background-color: rgba(255, 253, 231, 0.3); /* 浅黄底色（30%透明度） */
/* 间距控制 */
padding: 0.6em;/* 边框大小控制 */
margin: 2px 0; /* 防止外边距重叠 */
/*字体颜色*/
.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;
}

如何将css代码添加到我们的工程中呢？

首先将这串代码复制保存为style.css文件，然后右键左侧的Styles，选择添加现有文件。

选择刚刚保存的css文件打开。

在Styles下就有代码文件了。

现在我们虽然导入了css样式，但是在文件中还没有应用，css文件并没有生效。

右键Text文件夹，点击选择所有。

右键选中的文件，点击连接样式表。

选中我们自己的css文件，点击确认。

这样我们的样式就设置完成了。

3.添加图片

首先我们要将图片导入到工程中。

右键左侧的Images文件夹，点击添加现有文件。

选择你要添加的图片。

在左侧就能看到刚刚导入的图片了。

导入成功后，我们要将图片加入到小说中，

先写一段神秘小代码，然后将光标点在两个标签的中间。

<div class="duokan-image-single illus"></div>    //图片标签

右键你要添加的图片，选择「插入到HTML/CSS文档」。

这样就成功插入图片了⁽⁽٩(๑˃̶͈̀ ᗨ ˂̶͈́)۶⁾⁾

如果图片是在文中出现的话，可以活用查找功能定位图片的位置，然后再插入图片。

4.目录制作

5.元数据编辑

在工具中选择元数据编辑器。

简单填写一下基本信息。

6.封面制作

在工具中选中添加封面。

选择封面图片。

到此为止，你已经学会了简单的epub制作。~~接下来就去挑战电子书制作的巅峰吧~~！

前言