当我写“书” 史上最棒的 CSS 技巧 Vol. I 时,我把它放在引号里,因为这并不是一本真正的书。您只能在线阅读它,登录到这个网站,并且拥有 MVP 支持会员资格(现在不再需要)。没有印刷版,甚至没有您从数字书籍中期望得到的数字副本。
我现在改变了这一点,并提供了 PDF 和 EPUB 版本 的书籍。会员可以免费下载 - 只需将它们添加到您的购物车并结账。
所有这些写书的事情都是一个实验。我喜欢在这个网站上以博客文章的形式写作,所有内容都在 URL 上,并且可以包含交互式内容。作为数字媒体,我可以控制访问权限等。这意味着我可以以一种让我感觉舒适的方式写作,并且也许,也许,我可以更有效率。也许我可以完成我已经有很多想法的 Vol. II。也许我可以写一些我一直在考虑的其他书。现在我有一个系统!一个写作的地方,多个发布的地方,以及一种销售它的方法。

制作数字版本
当我最初选择在线写这本书时,我认为 PDF 会非常简单。我会在“原始”模板上输出内容(只是一个干净的起点,可以持续并且易于预览),应用漂亮的打印样式的 CSS,然后毫不夸张地说,只需 ⌘P
(打印)并“另存为 PDF”。就完成了。

实际上有点用。您可以调整设置(例如,为了让代码块上的深色背景上的白色文本“✔ 打印背景图形”,可以使其相当不错。但存在一些问题 - 例如,您无法很好地控制每个页面的页眉或页脚。更不用说它不是程序化的,而是一个非常手动的方法。
我的目标是通过编程方式进行操作。然后我偶然发现了 Baldur Bjarnason 的 这篇博客文章,他在其中寻找工作
• 您是否需要创建像书一样走路、说话、阅读的网站或多个网站,但您制作的所有东西看起来都像博客?
• 您是否在使用网络技术处理 PDF、DOCX 或 EPUB 等文件格式时遇到困难?
• 您是否尝试从您的网站或 CMS 生成 PDF 或电子书?
是的,是的,是的!
以编程方式创建电子书
我联系了 Baldur,他能够帮助我完成所有这些工作。他为我创建了一个自动化系统,该系统接受一个本地 .html
文件,并自动从该单个文件生成 PDF、EPUB 和 MOBI 格式。本质上,我可以从命令行运行 make
,它会完成所有工作,利用开源工具。

不过,我仍然需要为机器准备近乎完美的 HTML,这需要一些工作。幸运的是,我已经准备好进行这项工作,因为我有 一个输出原始内容的特殊 URL(如果您不是会员,也可以看到它,只是内容被截断) 具有我想要的光打印样式。

工具
有了原始 HTML 和编程方法,以下是构成堆栈的工具
- 对于 PDF 创建,我们尝试了 Paged.js 和 WeasyPrint。它们都有自己的怪癖,并且在某些方面做得比对方好或差。我们最终选择了 Paged.js。
- 对于 EPUB 创建,我们使用了 pandoc。
- 对于 MOBI 创建(我们根本没有关注),我们使用了 Calibre。它是一个原生 Mac 应用程序,但它有一个可以从命令行调用的
ebook-convert
工具。
为了能够在命令行上使用这些工具,必须安装和准备好使用各种其他软件,例如 Python、pango、libffi 等等。Baldur 的脚本使管理这些工具变得容易,这真是太棒了。
看起来 一个名为 Percollate 的新玩家 正在加入这个领域,但我们没有探索它。
将所有这些工具结合起来用于 HTML 到电子书创建的公共仓库
在我们一起完成这个过程之后,Baldur 慷慨地为所有人的参考创建了一个开源的简化公共仓库 (book-tricks)。在这个 Makefile 中有很多有用的魔法,如果它对处于我当时相同位置的人没有用,我会感到震惊:需要从简单的 HTML 创建电子书。
预览构建
当然,PDF 很容易查看(您甚至可以使用网页浏览器),但我通常会在 Preview.app 中打开它。

EPUB 在 Mac 上也同样容易,因为您只需将其放入 Books.app 中即可查看。

对于 MOBI,Calibre 的主要功能是查看它们,所以这就是诀窍。

最痛苦的部分是反馈循环。需要更新代码(主要是 CSS),然后运行整个构建以查看它的外观。我确定我已经做了 100 多次才能让它变得正确。对于这种情况,真的应该有一个更好的方法,提供实时预览。
仅限网页与仅限电子书的内容
在写书过程的早期,我已经放弃了纸质版和数字版。我减少了对文本中图像的依赖,开始使用嵌入式 CodePen 演示来展示输出和代码。无论如何,这是网页的理想体验。但我不能在电子书中使用嵌入式 Pens。电子书可以做一些交互式的事情(例如,EPUB 当然支持动画 GIF 和链接),但运行 JavaScript 和使用 <iframe>
不是我想要 依赖的。如果我为所有内容都准备了合适的图像,那么也许它有一天就可以更加适合纸质出版了。
使用 display: none
从电子书输出中隐藏一些东西很容易,所以这就是我对所有嵌入式 Pens 所做的。(它们在转换为 iframe 之前是一些 HTML。)然后,为了拥有仅用于电子书版本的“替代”内容,我实际上只是将这些内容包装在 <div class="print-only">
中,它在线隐藏,并在打印 CSS 中显示。我在 WordPress 块编辑器中创建了自定义块,以使编写这些块变得更容易。这样,我就可以真正看到我在做什么。

有趣的一点是,由于我在这里的目标是仅限电子书,因此我不必对打印样式表那样做 CSS 技巧,因为输出很可能是一些计算机纸张。例如,在打印样式表中,我通常会这样做
main a[href]::after {
content: " (" attr(href) ") ";
}
这样,人们就可以在内容中看到链接的 URL。但对于这些数字电子书,我只是确保链接是蓝色的,它们将在任何数字格式中都可点击。
这是一段有趣的旅程!我主要很高兴在这个过程中我对所有这些都有一些了解,尤其是因为渲染数字画布是我的强项。但我只是上了几级台阶,因为这些东西的学习曲线非常陡峭!
我登录并尝试过,但没有任何效果。我可能不是 MVP,所以可能是这个原因。我真的很想看看您用于将 I 从 hrml->pdf 的东西。我已经写了一年的编程书,我希望能看到它是如何进行的。可惜 Atlas 和 HTMLbook 都消失了。
是的,抱歉,如果表达不清楚,重点是下载是 MVP 支持者会员的福利。
我怎么获得这本书呢?
嘿,嘿!注册成为 MVP 赞助商,你就能获得这本书的访问权限。