介绍

将一个完整的页面保存到单个 HTML 文件中,包括 CSS、图片,类似 MHTML。

下面两个网站简单介绍了一下扩展:

引言

“在游戏开发、实时渲染以及计算机图形学领域,《Real-Time Rendering》系列书籍一直备受推崇。有人说,它是实时渲染的圣经。也有人说,它是绝世武功的目录。”

众所周知,《Real-Time Rendering》之所以是“绝世武功的目录”,除了其精炼、综述式的行文方式,百科大全般的知识体系广度之外,主要在于其引用的丰富而事无巨细的参考文献。这些包含了详细技术细节的参考文献,才是“绝世武功秘籍的本体”所在。

时间来到2018年,《Real-Time Rendering》系列的第四版《Real-Time Rendering 4th》的参考文献的数量已经超过了2000条之多。这些参考文献散落于互联网各地,如果你有查阅过RTR4官网上放出的参考文献的链接(Real-Time Rendering Bibliography - 4th Edition),你会发现其中有不少链接已经失效。如果没有做及时的备份,且对应的文献没有其他提供源,则这些文献会面临着永久失传的风险。

所幸,本人在阅读以及翻译《Real-Time Rendering 4th》期间,花了不少业余时间,几乎详细地完全收集整理了《Real-Time Rendering 4th》2000多条的参考文献,将不少已经失效绝版的参考文献,提前备份保存了下来,构成了具有收藏价值的“绝世武功秘籍的本体”—— RTR4 2000多篇参考文献的典藏合集。

这里引用的引言完全说明了保存网页的痛点。

存档的意义

有很多因素会导致网页消失或变化:

  1. 网站作者不维护了,域名、VPS 等等到期
  2. 网页内容由于各种不可抗力因素删除
  3. 网站域名发生变化,如 unity3d.com 变成 unity.com
  4. 网站 URL 结构发生变化,如 blog.unity3d.com 每篇文章的 URL 中都包含日期,新版本中完全去除了
  5. 网页内容会发生变化,导致当时引用的内容与现在的不一致

因此某些重要信息,需要进行采集并存档,方便后续使用。

存档的需求

  • 保存网页完整的样式,忠实地还原网页原始外观。
  • 最好保存为单个文件,方便存档、备份与分享。
  • 兼容性,可以使用各种平台下的各种软件打开。

文件格式比较

方式/特点 HTML SingleFile MHTML PDF打印 Markdown 截图 印象笔记 剪藏
软件兼容性 好,浏览器都可以打开 中,只有 Chrome 系与 IE 可以打开 好,PDF 阅读器都可以打开 中,需要用户安装支持 Markdown 的文本编辑器 好,所有系统都可以显示图片 差,只能在印象笔记中使用
样式 好,完整保留 好,几乎完整保留样式,除了个别地方有显示异常 1 中,使用了为打印准备的样式 差,会丢失很多样式与效果 好,完整保留 中,不管是完整收藏还是简洁模式都会丢失很多样式与效果
保存方式 单个 html 文件 单个 mhtml 文件 单个 PDF 文件 一个 Markdown 文件或者额外增加一大堆图片文件(如果保存图片的话) 一个图片文件 印象笔记中的一篇笔记
是否分页 是,分页会导致页面显示错乱

总结

总体而言,HTML 格式的兼容性最好,各大厂商的浏览器都可以正常打开显示。并且使用 SingleFile 会将图片样式等都保存在同一个 HTML 中,极大地降低了存档的文件数量。

并且 SingleFile 可以像 PDF 一样忠实地还原网页样式,同时又没有 MHTML 的兼容性问题,几乎是完美的工具。

扩展使用

这个插件还有其他的功能,我做了一张简单的翻译对照图,其中有两个我觉得比较实用的功能,一个是为网页内容添加标注,标注可以当成是边看内容边做笔记;一个是批量保存网页内容

选择上方的第二个选项「Annotate and save the page」,会打开一个新的标签页供你添加标注,页面左上角展示了添加标注可以用到的工具:一个是添加笔记,形式如下图的蓝色的便利贴,输入你想记录的内容,另一个是修剪工具,它可以去除页面中的任意元素,包含文本、图片,删繁就简,删掉你不想保存的内容。

更多保存方法

当然也推荐查找更多保存的方案,根据自己当前的需求选择最好的方案:

其他扩展

不推荐使用 SingleFileZ 这个扩展,默认只能在 Firefox and Microsoft Edge 上使用,想要在 Chrome 上使用需要开启一个额外选项,另外因为不完整的 Chrome 扩展 Manifest V3 API 会在 2023 年 1 月时停止工作。


  1. 实测 GitHub 仓库页面 SingleFile 保存的效果与原始页面一致,而 mhtml 出现了样式差异(Star 与 Fork 按钮)。 ↩︎