自制多看电子书

发表于 本文字数： 3.1k 阅读时长 ≈ 3 分钟

一些小寄巧

伪正版

在元数据中：

  • 将unique-identifier修改为duokan-book-id，即unique-identifier="duokan-book-id"
  • 添加或修改 <dc:identifier id="duokan-book-id">8008208820</dc:identifier>
  • 添加 <meta name="duokan-body-font" content="DK-SONGTI" />实现正文字体替换，即在多看中可以只换正文字体，其他保持CSS中定义的字体。

文本缩进

在多看App中，在设置排版为“无”时，会忽略CSS定义的缩进text-indent，导致定义了缩进的段落没有首行缩进；如果在排版设置中自定义缩进，多看也会忽略CSS定义的缩进text-indent，对不需要的缩进的段落进行缩进。

解决办法时对CSS中所有定义了text-indent的部分加上duokan-text-indent。

图片处理

封面全屏

在元数据的 spine 部分中，给封面页itemref标签添加 properties="duokan-page-fullscreen"属性，例如：

<itemref idref="cover" properties="duokan-page-fullscreen"/>

交互图

交互图主要实现用户点击图像后，图像自动全屏显示，在全屏显示时图像可以两指放大和旋转。

实现方法只需要加上 duokan-image-single 这个类即可。当然在 CSS 里也可以针对此类自定义样式。

1
2
3
4
5
<div class="duokan-image-single">
  <img src="../Images/pic.png" alt="" />
  <p class="duokan-image-maintitle">主标题</p>
  <p class="duokan-image-subtitle">副标题</p>
</div>

画廊

画廊主要实现在同一位置显示多张图片，通过滑动可以切换图片，节省了 EPUB 的排版空间。另外画廊模式的每张图片也可以交互。

实现方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="duokan-image-gallery">
  <div class="duokan-image-gallery-cell">
    <img src="images/pic1.png" alt="" />
    <p class="duokan-image-maintitle">主标题1</p>
    <p class="duokan-image-subtitle">副标题1</p>
  </div>
  <div class="duokan-image-gallery-cell">
    <img src ="images/pic2.png" alt="" />
    <p class="duokan-image-maintitle">主标题2</p>
    <p class="duokan-image-subtitle">副标题2</p>
  </div>
  <div class="duokan-image-gallery-cell">
    <img src ="images/pic3.png" alt="" />
    <p class="duokan-image-maintitle">主标题3</p>
    <p class="duokan-image-subtitle">副标题3</p>
  </div>
</div>

弹出注释

正文部分

1
<a class="duokan-footnote" href="#note_1" id="noteref_1"><img src="../Images/note.png"/></a></p>

页面末尾

1
2
3
4
5
<ol class="duokan-footnote-content">
    <li class="duokan-footnote-item" id="note_1">
        <p class="footnote"><a href="#noteref_1">⊙</a>注释内容</p>
    </li>
</ol>

注释文本复杂时可以分行，li里可以嵌套多个p。

Sigil 正则表达式

可以让AI给出查找和替换的正则表达式，需要注意的是，在替换部分，需要把$1改为\1。

例如，批量修改注释的上标时，原文：

1
<a id="w1"></a><a href="#m1"><sup>[1]</sup></a>

目标字符串为

1
<a class="duokan-footnote" id="w1" href="#m1"><img src="../Images/note.png"/></a>

查找

1
<a id="(w\d+)"></a>\s*<a href="(#m\d+)">\s*<sup>.*?</sup>\s*</a>

替换

1
<a class="duokan-footnote" id="\1" href="#\2"><img src="../Images/note.png"/></a>

字体嵌入

添加字体

在Sigil中使用添加现有文件按钮添加字体文件，字体将被添加到图书浏览器中的Fonts文件夹。

在CSS中添加字体的定义，例如：

1
2
3
4
5
6
@font-face {
    font-family: "Garamond";
    font-weight: normal;
    font-style: normal;
    src: url("../Fonts/Garamond.ttf");
}

字体子集化

插件发布地址

插件下载地址