一种将线上内容精简格式后保存到本地的方法

发布于:2022-10-10

目录

在线信息保存这一步现在有一个不可能三角:

  1. 保存过程便捷
  2. 排版简洁
  3. 信息属于自己

过去第三点显得没有那么紧迫,但实际上它才是一切的核心1。但同时,我也不希望对便捷性和美观性放弃太多,所以一直在探索解决方案,尝试平衡三者。目前的方案是在便捷性做了较大妥协(但以后可以通过其它方式弥补),优先满足了美观性和信息归属问题。这算是对我摸索的一个阶段性的小结。UTGD 团队在用的过程中也在对它不断优化。现在发出来,也希望起到抛砖引玉的作用。

在第 2 点排版方面,在所有查询到的方案里,从主观上我最喜欢的是 Safari 阅读模式对文章的再排版。特别是它的余白和阴影,让你感觉这是放在桌子上的一张纸,上面规规矩矩地展示内容,再无其它。

Alt text
Safari 阅读模式

注:本方法是一套通用方法。也就是说,即使你不用 Safari 的阅读模式,而是用其它的再排版服务,也可以用本方法,将再排版的内容保存到本地.

将 Safari 的阅读模式保存到本地

此处以 Safari 举例,除了因为个人品味的偏好,也因为 Safari 阅读模式所能覆盖的页面是最广的。毕竟它来自苹果,存活能力高于其它竞品,且愿意主动支持的网页也更多。

这个方法的原理非常朴素,就是在 Safari 阅读模式的状态下,去获取它的所有 HTML 内容。具体步骤也不麻烦:

第一步:先在 Safari 里打开阅读模式,快捷键 ⇧Shift - ⌘Command - R

Alt text
Safari 阅读模式

第二步:在网页空白处单击鼠标右键,显示“Inspect Element(检查元素)”。

Alt text
右键 – 检查元素

如果没有这个按钮,则需要在 Safari 中打开“开发者菜单”:

Alt text
勾选“在菜单栏中显示开发菜单”

打开它的过程是:在 Safari 中打开设置选项(⌘Command - ,(逗号)) → 选择 “Advanced(高级)” → 再勾选页面底部的 “Show Develop menu in menu bar(在菜单栏中显示开发菜单)”

第三步:在打开 Inspect Element 之后,选中并复制右侧的 HTML 代码即可:

Alt text
复制页面的 HTML 代码

第四步:把这个 HTML 代码保存到本地。如果你没有顺手的编辑器,可以使用 Sublime Text,它功能比较单纯,基础功能可以永远免费使用。:

Alt text
将 HTML 粘贴到 Sublime Text

走完上面 4 步,最核心的事情已经做完了,你已经真正拥有了这篇文章。接下来是一些修补和可选项。

调整图片宽度

在对比网页里的文章和保存为 HTML 的文章之后,我们会发现,有一些文章中的部分图片不能很好的居中显示,会出现出框问题。

Alt text
出框问题

这是本方法唯一的排版问题,替换以下代码就能解决它。你需要在你刚才保存的 HTML 文件中,搜索 #article img ,然后你会看到以下代码:

        #article img {
            /* By default, images are centered on their own line. */
            margin: 0.5em auto;
            display: block;
            height: auto;
        }

我们将其替换为以下代码,就能解决问题:

        #article img {
            /* By default, images are centered on their own line. */
            margin: auto;
            display: block;
            height: auto;
            max-width: 100% !important;
            margin-inline-start: 0px !important;
        }

代码替换完毕后,再次保存内容。再次打开 HTML 文件,你会发现图片已经正常地文章在文章中居中显示,不会出框。

将网页转化为 PDF

HTML 格式固然轻便,但它的弊端是只保存了文本和代码。图片以及其它的资源型文件,都还在平台2的服务器端储存着。当文章被彻底删除或者禁止访问,你也无法再读取到文章中的图片。或者这些图片等资源都在服务器上,但没有联网,你还是无法读取它们。这样,一些图片里含有关键信息的文章就会损失价值。

为了保障图片获取的一个方案是保存为 PDF。PDF 也是我最习惯的批注格式。没有特殊情况,我都会把 HTML 的文件给转化为 PDF。

Alt text
在 DEVONthink 中将 HTML 转化为 PDF

把 HTML 转化为 PDF 非常容易,有大量的可选方案3。我所使用的工具是 DEVONthink. 原因主要是它可以把 HTML 转化为单页 PDF。这是我个人最喜欢的阅读模式,它还原了在 Safari 中阅读的体验,以及我们绝大多数时候使用屏幕阅读时的向下滚动的体验:

Alt text
DEVONthink 里的单页 PDF

DEVONthink 转换的 PDF 格式不是将其转化为图片,文档内所有文字都可以正常选中。所以我们可以直接在 DEVONthink 中进行完整的批注操作。

并且,因为 DEVONthink 有自动化功能,当我把 HTML 文件拖到指定文件夹,就可以自动为这个 HTML 生成一份 PDF 版本,省了我手动去做这些事。

用 Web Archive 加一份保险

另一个应对 HTML 丢失图片风险的对策是使用 Web Archive。一个网页的 Web Archive 包含了该网页的文本、链接和图像,这就让我们在离线时也可以查看图像。

获取一个网页的 Web Archive 非常容易。在 Safari 中直接用快捷键 ⌘Command - S,就会弹出一个选项让你选择保存为 Page Source(也就是 HTML) 还是 Web Archive:

Alt text
将网页保存为 Web Archive

只要在这里选择保存为 Web Archive 就可以了。

但要注意,我目前没有找到 Web Archive 和 Safari 阅读模式共存的方法。那么,这意味着如果保存内容为 Web Archive 就不能再拥有简洁的排版了吗?不是的。

第一个方法,是用其它服务来精简页面排版,然后用 Web Archive 来保存它。这就可以让你在本地拥有一份精简了排版的内容。

另一个方法,则是下面要提到的使用 DEVONthink 来切除页面中不需要元素的办法。即使你使用其它网页精简服务,它所精简的结果也未必符合你的期望。还有可能在网页上再加上一些其它与阅读无关的元素。这些都可以用 DEVONthink 来解决。

万一遇到阅读模式无法解决的页面

虽然阅读模式在我的使用体验中覆盖足够广。但它还是会有一些页面无法处理。我曾经遇到过一些使用复杂元素的微信公众号文章,没有办法很好地保存下。这时的 DEVONthink 的 HTML “所见即所得”编辑功能同样能发挥功效。

我们以这篇排版算是精美的微信公众号文章《世界丨李约瑟:商业与科学的失落》为例。如果你在 macOS 的 Safari 上尝试使用阅读模式对它重新排版,你会发现——它无法读取所有内容。

这时候的解决方案是——直接把文章的 Web Archive 保存到 DEVONthink. 随后就可以在 DEVONthink 中裁剪一切不需要的元素。

在 DEVONthink 的 Preview(预览)视图下,它会把 HTML 页面变成一个可完全编辑的页面,并且给你提供批注工具。这也就是说,除了增删内容,你也可以在 HTML 下非常直观地批注

Alt text
DEVONthink 预览模式的工具视图

举个例子。这漂浮在页面右上角的小 QR code 是我第一个想祓除的对象。我只需要:

  1. 滚到页面最底部
  2. 把光标放在最后一个字符后面
  3. 按着 ⇧Shift
  4. 再按几下向下的方向键 ,就可以选中它。
  5. 随后一个 ⌫Delete 就可以将其祓除
Alt text
有无 QR Code 对比

除了这个 QR code,我们也可以删掉页面中的任意元素,比如文头文尾的广告:

Alt text
有无文首广告对比

小结

以上就是 UTGD 内部用了几年将线上内容精简格式后保存在本地的方法。它主要解决了 2 个问题4

  1. 内容属于自己,不再莫名消失
  2. 精简排版,便于阅读、批注

在认识到线上内容消失得比我看得还快之后,我迫不及待地寻找了这个在这篇文章看起来不太方便的方案。用了一段时间后,分享给了 UTGD Team。随后大家也为这套方法添砖加瓦。解决图片居中问题的就是 @沨沄极客@Minja 也为这套流程打造自动化操作,提高效率。这些文章在未来相继都会跟大家见面。


  1. 本地保存益处良多,原因另写文章详述。 

  2. 就是你阅读文章的网页或平台。比如这篇文章的图片,就保存在 UTGD 的服务器上。而微信公众号,图片则保存在微信的服务器上。 

  3. 建议大家这一步首先尝试各种网页的免费工具,有大量免费工具可用,没必要直接上 DEVONthink. 我在这里提到 DEVONthink 是因为我早就在用 DEVONthink,而不是因为 DEVONthink 的这个功能所以买了它。请注意工具完成的功能,如有替代不必破费。 

  4. 只要同时能解决这两者的工具,都可以用,不必拘泥于文章里提到的工具。 

关联文章

相关文章

欢迎加入鹈鹕社

请登录您的账户

注册账户

请填写以下注册信息

找回密码

请输入您的用户名或邮件地址,重置密码

“这篇文章不 Work 啦!”

本文中有错误或过时的内容吗?
向“不 Work 机器人”报错,
第一时间获得更新通知。

此功能仅供 Untag 订阅会员使用。
你可以购买会员资格后使用。