被404坑了这么多年,最终用它完美搞定插图

我在日常上网冲浪的过程中,经常会发现一些有趣或很有价值的网页,然后就收藏起来准备择日再消化。

不过这些意外发现的宝藏常常会在收藏夹里先吃一段时间的灰,当我记起来想再次访问的时候,有些页面可能就已经「404」了,甚是可惜。

剪贴到云端笔记也是一个方法,不过可能会面临着排版样式、以及网页元素丢失、同步速度慢等问题,所以我一般不会只把鸡蛋装进云端笔记这一个篮子里。

而另一个篮子就是很原始,但也很踏实的本地保存方式。对那些质量特别棒、相见恨晚的帖子我一定会在本地存储一份,这样避免被「404」的同时也更方便进一步管理。

但在本地存储的这条路上,我走了不少弯路。

弯路一

最开始的时候,我是用浏览器自带的保存网页的功能(快捷键一般都是 Ctrl+S),但这样保存会有个很讨厌的问题,就是除了保存的 .html 文件,网页中的前端代码和图片还会额外保存在一个自动生成的文件夹内,好比下图。

被404坑了这么多年,最终用它完美搞定插图1

保存的少了还好管理,当你存储的网页越来越多,你就知道啥是痛苦了,所以我舍弃了这种保存文件的方式,这种方式其实在 IE 浏览器称霸的时代还很流行。

弯路二

然后我想到了还可以通过浏览器自带的虚拟打印机保存成 PDF 格式的文档,这样就可以得到一个简简单单的 .pdf 文件,方便管理的同时,也方便我去给这些 PDF 文档做笔记。

方法倒是简单,去浏览器上直接 Ctrl+P 就能唤出打印界面,在目标打印机的选项处选择另存为 PDF。

被404坑了这么多年,最终用它完美搞定插图2

但这样操作有许多致命的缺点,比如打印下的 PDF 文件经常会自动改变页面的布局,使得保存后的页面布局出现错乱,这对于想要原汁原味把网页保存下来的我来说是肯定不能接受的。

在图片方面这样保存的坑更多,比如面对网页中有长图的场景,保存成 PDF 文件会导致额外的分页或者图片直接挂掉。

再比如一些图片懒加载的网页,还需要你从头到尾浏览一遍,把图片加载出来后才能保存,稍有不顺,你保存下来的网页就会变成这样。

被404坑了这么多年,最终用它完美搞定插图3

黑哥我极其不推荐用这种方法去保存网页,除了不满意没有任何收获,可能这种虚拟打印机打印的方法只适用于没有图片只有文字的场景。

既然不满意,那就继续折腾呗,,怎么会因为走了两个小弯路就这么轻言放弃,所以我开始从茫茫网络中扒拉各种保存网页的工具。

直到我发现了它,一个能将网页完美保存成单 html 文件的神器扩展,SingleFile。

SingleFile

不得不说当我尝试使用 SingleFile 了之后,发现原来它真的就是那个我一直苦苦寻找的工具。

核心功能就一个,通过简单的操作,把网页中的除了视频以外的所有内容原汁原味,完完整整的存储到本地。

用到现在为止,无论你是怎样的排版,SingleFile 通杀,适应程度高到难以想象。

还以黑哥之前写的那篇 YesPlayMusic 为例,安装好 SingleFile,打开网页,直接点击它的小图标,网页就开始了自动保存。

被404坑了这么多年,最终用它完美搞定插图4

不用担心延迟加载的图片挂掉,SingleFile 会自动帮你完全加载后再保存。

无论你是动图还是长图,SingleFile 都会完完整整把它们存入你本地,看看之前挂了的那张图。

被404坑了这么多年,最终用它完美搞定插图5

你甚至还可以这样用,比如遇到黑哥新搞的这个小破站网页访问不流畅的时候,用这个扩展就可以快速下载到本地,比你干等着快多了,简直是立等可取。

我通常还会对网页做一些笔记,强大的 SingleFile 同样也贴心的提供了这方面的支持。

右键点击菜单里的扩展小图标,你会发现有个叫「标注并保存该页面」的选项。

被404坑了这么多年,最终用它完美搞定插图6

选择并点击,SingleFile 同样会优先延迟加载完所有的图片,然后在当前页面的顶部会出现一个供你做笔记的功能栏。

被404坑了这么多年,最终用它完美搞定插图7

添加不同颜色的标注,选取文本为不同颜色的高亮,甚至能删除网页中的任意元素,当然对于任意操作 SingleFile 还支持撤销和恢复之前的操作。

被404坑了这么多年,最终用它完美搞定插图8

当你做好了笔记,再去保存网页,这时保存的网页就是你调教后的网页,等你后续再次查看时帮你轻松理清脉络、回忆起最初的所思所想。

被404坑了这么多年,最终用它完美搞定插图9

如果你觉得 SingleFile 不过如此,那你还真小瞧它了,在之前右键点击扩展小图标时,SingleFile 还支持网页内容的部分保存,多标签的保存,甚至是自动保存。

不过如果没有特殊情况,我不建议开启那个自动保存的功能,你要是不小心马虎了,本地甚至有被塞满的风险。

至于 SingleFile 到底将 .html 文件保存到了哪里,不妨看看你浏览器默认的下载文件目录,SingleFile 存储的目的地就是那里。

不得不说所有过去烦恼我的问题被 SingleFile 解决的干干净净。

骚操作

所有保存到本地的网页其实还有一个弊端,那就是没办法再享受浏览器的扩展。

之前黑哥推荐给大家的什么暗黑模式、油猴脚本啥的都不再支持。

为了能像平常那样享受我们辛辛苦苦找来的浏览器扩展,其实还需要一个骚操作,利用第三方工具把本地主机变成服务器。

我这里用的是 Everything,在工具-选项中找到 HTTP 服务器这一栏,勾选启用 HTTP 服务器,然后把绑定接口改为 127.0.0.1(本地),端口用默认的 80 就行,最后记得把服务器页面位置改为你存放离线 .html 文件的目录,搞定。

被404坑了这么多年,最终用它完美搞定插图10

开启 HTTP 服务器后,你在浏览器上的地址框内输入的内容可就要变变了。

其实就是把你存放离线网页的文件夹目录改为 127.0.0.1,再加上文件名的方式访问,访问地址比如会变成这样,127.0.0.1为什么你还在用网易云音乐?.html。

通过这一波操作后,浏览器打开的网页就又可以开心使用扩展了。

这里再多提一嘴,Everything 的 HTTP 服务如果是在公网环境下(你在家使用当然没有任何这方面的隐患),贸然打开还是有泄露文件的风险,小伙伴们谨慎使用。

总结

不管怎么说,SingleFile 这个扩展真的是帮了大忙,但是下载网页不过是我们获取知识的第一步,后续的管理、复习、深入同样重要且重要程度没有先后之分。

在信息被炸成碎片的今天,我们或许有很多获取知识的手段,但不管什么时候,我还是希望大家能在本地搞一个备份。

因为你永远不知道你原先看到的那些教程、那些前人的精华分享什么时候会消失在网络。

至于我们收藏的那些东西,既然已经被我们收藏,就别让它一直吃灰,学习永远都是进行时。

后续,我可能会考虑出一个关于本地文件管理的心得分享文章,先挖个坑,感兴趣的话,用一大波在看砸过来。

长按二维码关注回复 210226 获取

被404坑了这么多年,最终用它完美搞定插图11

被404坑了这么多年,最终用它完美搞定插图12

 电报群:wldxh  QQ 群:451768616 公众号:网罗灯下黑