被404坑了這么多年，最終用它完美搞定

時(shí)間：2023-07-21 05:30:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-21 05:30:01 來源：網(wǎng)站運(yùn)營(yíng)

被404坑了這么多年，最終用它完美搞定：我在日常上網(wǎng)沖浪的過程中，經(jīng)常會(huì)發(fā)現(xiàn)一些有趣或很有價(jià)值的網(wǎng)頁，然后就收藏起來準(zhǔn)備擇日再消化。

不過這些意外發(fā)現(xiàn)的寶藏常常會(huì)在收藏夾里先吃一段時(shí)間的灰，當(dāng)我記起來想再次訪問的時(shí)候，有些頁面可能就已經(jīng)「404」了，甚是可惜。

剪貼到云端筆記也是一個(gè)方法，不過可能會(huì)面臨著排版樣式、以及網(wǎng)頁元素丟失、同步速度慢等問題，所以我一般不會(huì)只把雞蛋裝進(jìn)云端筆記這一個(gè)籃子里。


而另一個(gè)籃子就是很原始，但也很踏實(shí)的本地保存方式。對(duì)那些質(zhì)量特別棒、相見恨晚的帖子我一定會(huì)在本地存儲(chǔ)一份，這樣避免被「404」的同時(shí)也更方便進(jìn)一步管理。

但在本地存儲(chǔ)的這條路上，我走了不少彎路。

彎路一

最開始的時(shí)候，我是用瀏覽器自帶的保存網(wǎng)頁的功能（快捷鍵一般都是 Ctrl+S），但這樣保存會(huì)有個(gè)很討厭的問題，就是除了保存的 .html 文件，網(wǎng)頁中的前端代碼和圖片還會(huì)額外保存在一個(gè)自動(dòng)生成的文件夾內(nèi)，好比下圖。




保存的少了還好管理，當(dāng)你存儲(chǔ)的網(wǎng)頁越來越多，你就知道啥是痛苦了，所以我舍棄了這種保存文件的方式，這種方式其實(shí)在 IE 瀏覽器稱霸的時(shí)代還很流行。

彎路二

然后我想到了還可以通過瀏覽器自帶的虛擬打印機(jī)保存成 PDF 格式的文檔，這樣就可以得到一個(gè)簡(jiǎn)簡(jiǎn)單單的 .pdf 文件，方便管理的同時(shí)，也方便我去給這些 PDF 文檔做筆記。

方法倒是簡(jiǎn)單，去瀏覽器上直接 Ctrl+P 就能喚出打印界面，在目標(biāo)打印機(jī)的選項(xiàng)處選擇另存為 PDF。




但這樣操作有許多致命的缺點(diǎn)，比如打印下的 PDF 文件經(jīng)常會(huì)自動(dòng)改變頁面的布局，使得保存后的頁面布局出現(xiàn)錯(cuò)亂，這對(duì)于想要原汁原味把網(wǎng)頁保存下來的我來說是肯定不能接受的。

在圖片方面這樣保存的坑更多，比如面對(duì)網(wǎng)頁中有長(zhǎng)圖的場(chǎng)景，保存成 PDF 文件會(huì)導(dǎo)致額外的分頁或者圖片直接掛掉。

再比如一些圖片懶加載的網(wǎng)頁，還需要你從頭到尾瀏覽一遍，把圖片加載出來后才能保存，稍有不順，你保存下來的網(wǎng)頁就會(huì)變成這樣。




黑哥我極其不推薦用這種方法去保存網(wǎng)頁，除了不滿意沒有任何收獲，可能這種虛擬打印機(jī)打印的方法只適用于沒有圖片只有文字的場(chǎng)景。

既然不滿意，那就繼續(xù)折騰唄，，怎么會(huì)因?yàn)樽吡藘蓚€(gè)小彎路就這么輕言放棄，所以我開始從茫茫網(wǎng)絡(luò)中扒拉各種保存網(wǎng)頁的工具。

直到我發(fā)現(xiàn)了它，一個(gè)能將網(wǎng)頁完美保存成單 html 文件的神器擴(kuò)展，SingleFile。

SingleFile

不得不說當(dāng)我嘗試使用 SingleFile 了之后，發(fā)現(xiàn)原來它真的就是那個(gè)我一直苦苦尋找的工具。

核心功能就一個(gè)，通過簡(jiǎn)單的操作，把網(wǎng)頁中的除了視頻以外的所有內(nèi)容原汁原味，完完整整的存儲(chǔ)到本地。

用到現(xiàn)在為止，無論你是怎樣的排版，SingleFile 通殺，適應(yīng)程度高到難以想象。

還以黑哥之前寫的那篇 YesPlayMusic 為例，安裝好 SingleFile，打開網(wǎng)頁，直接點(diǎn)擊它的小圖標(biāo)，網(wǎng)頁就開始了自動(dòng)保存。




不用擔(dān)心延遲加載的圖片掛掉，SingleFile 會(huì)自動(dòng)幫你完全加載后再保存。

無論你是動(dòng)圖還是長(zhǎng)圖，SingleFile 都會(huì)完完整整把它們存入你本地，看看之前掛了的那張圖。




你甚至還可以這樣用，比如遇到黑哥新搞的這個(gè)小破站網(wǎng)頁訪問不流暢的時(shí)候，用這個(gè)擴(kuò)展就可以快速下載到本地，比你干等著快多了，簡(jiǎn)直是立等可取。


我通常還會(huì)對(duì)網(wǎng)頁做一些筆記，強(qiáng)大的 SingleFile 同樣也貼心的提供了這方面的支持。

右鍵點(diǎn)擊菜單里的擴(kuò)展小圖標(biāo)，你會(huì)發(fā)現(xiàn)有個(gè)叫「標(biāo)注并保存該頁面」的選項(xiàng)。




選擇并點(diǎn)擊，SingleFile 同樣會(huì)優(yōu)先延遲加載完所有的圖片，然后在當(dāng)前頁面的頂部會(huì)出現(xiàn)一個(gè)供你做筆記的功能欄。




添加不同顏色的標(biāo)注，選取文本為不同顏色的高亮，甚至能刪除網(wǎng)頁中的任意元素，當(dāng)然對(duì)于任意操作 SingleFile 還支持撤銷和恢復(fù)之前的操作。




當(dāng)你做好了筆記，再去保存網(wǎng)頁，這時(shí)保存的網(wǎng)頁就是你調(diào)教后的網(wǎng)頁，等你后續(xù)再次查看時(shí)幫你輕松理清脈絡(luò)、回憶起最初的所思所想。




如果你覺得 SingleFile 不過如此，那你還真小瞧它了，在之前右鍵點(diǎn)擊擴(kuò)展小圖標(biāo)時(shí)，SingleFile 還支持網(wǎng)頁內(nèi)容的部分保存，多標(biāo)簽的保存，甚至是自動(dòng)保存。

不過如果沒有特殊情況，我不建議開啟那個(gè)自動(dòng)保存的功能，你要是不小心馬虎了，本地甚至有被塞滿的風(fēng)險(xiǎn)。

至于 SingleFile 到底將 .html 文件保存到了哪里，不妨看看你瀏覽器默認(rèn)的下載文件目錄，SingleFile 存儲(chǔ)的目的地就是那里。

不得不說所有過去煩惱我的問題被 SingleFile 解決的干干凈凈。

騷操作

所有保存到本地的網(wǎng)頁其實(shí)還有一個(gè)弊端，那就是沒辦法再享受瀏覽器的擴(kuò)展。

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

為了能像平常那樣享受我們辛辛苦苦找來的瀏覽器擴(kuò)展，其實(shí)還需要一個(gè)騷操作，利用第三方工具把本地主機(jī)變成服務(wù)器。

我這里用的是 Everything，在工具-選項(xiàng)中找到 HTTP 服務(wù)器這一欄，勾選啟用 HTTP 服務(wù)器，然后把綁定接口改為 127.0.0.1（本地），端口用默認(rèn)的 80 就行，最后記得把服務(wù)器頁面位置改為你存放離線 .html 文件的目錄，搞定。




開啟 HTTP 服務(wù)器后，你在瀏覽器上的地址框內(nèi)輸入的內(nèi)容可就要變變了。

其實(shí)就是把你存放離線網(wǎng)頁的文件夾目錄改為 127.0.0.1，再加上文件名的方式訪問，訪問地址比如會(huì)變成這樣，127.0.0.1/為什么你還在用網(wǎng)易云音樂？.html。

通過這一波操作后，瀏覽器打開的網(wǎng)頁就又可以開心使用擴(kuò)展了。

這里再多提一嘴，Everything 的 HTTP 服務(wù)如果是在公網(wǎng)環(huán)境下（你在家使用當(dāng)然沒有任何這方面的隱患），貿(mào)然打開還是有泄露文件的風(fēng)險(xiǎn)，小伙伴們謹(jǐn)慎使用。

總結(jié)

不管怎么說，SingleFile 這個(gè)擴(kuò)展真的是幫了大忙，但是下載網(wǎng)頁不過是我們獲取知識(shí)的第一步，后續(xù)的管理、復(fù)習(xí)、深入同樣重要且重要程度沒有先后之分。

在信息被炸成碎片的今天，我們或許有很多獲取知識(shí)的手段，但不管什么時(shí)候，我還是希望大家能在本地搞一個(gè)備份。

因?yàn)槟阌肋h(yuǎn)不知道你原先看到的那些教程、那些前人的精華分享什么時(shí)候會(huì)消失在網(wǎng)絡(luò)。

至于我們收藏的那些東西，既然已經(jīng)被我們收藏，就別讓它一直吃灰，學(xué)習(xí)永遠(yuǎn)都是進(jìn)行時(shí)。

下載：https://wws.lanzous.com/ikNDMmdhx3i

本文首發(fā)于微信公眾號(hào)網(wǎng)羅燈下黑（wldxh8），未經(jīng)授權(quán)請(qǐng)勿轉(zhuǎn)載