設計一個類似sfgg一樣的一鍵分享工具

初衷

筆者發現sfgg裡面有一個非常好用的工具，網址：https://segmentfault.com/news，截圖如下：

當我們把它拖動到瀏覽器的書籤欄的時候，我們就可以使用它分享自己感覺不錯的文章了。

2.拿到sfgg的這段js腳本

當我們把滑鼠放到「分享到SegmentFault」時，顯示了一段js腳本，右鍵複製鏈接地址，得到如下內容：

javascript:(function(){vara=encodeURIComponent(window.document.title),b=encodeURIComponent(window.location.href);window.open("https://segmentfault.com/news#"+a+"/"+b)})();void;

3.分析js腳本的含義

看了一眼上面的js代碼，筆者發現：先拿到分享頁的標題和網址，再使用window.open發起一個get請求跳轉到sfgg的分享頁（當然如果沒有登錄會跳轉到登錄界面）

4.事情沒有這麼簡單

我們打開一篇站內的文章：https://wenda.shukaiming.com/article/14，然後點擊「分享到SegmentFault」，接著點擊提交之後，查看分享內容：

嚓，竟然有一個站內閱讀把文章採集了下來，我們看看：

5.如何獲取一張網頁的主要內容？

這是一件比較複雜的任務，筆者先偷個懶看看PHP有沒有對應的pkg幫我們解決這個問題，經過簡單的Google搜索，我們找到了兩個開源庫：

https://github.com/scotteh/php-goose

https://github.com/andreskrey/readability.php

筆者選擇了goose（鵝），這裡沒有過多的比較。

來吧，測試一下，筆者拿sfgg裡面分享次數最多的幾個網站作為測試對象跟sfgg進行對比，看看抽取主要內容的效果如何？

composerrequirescotteh/php-goose

結果各種慢到死，根本沒法接受，第二個開源庫看起來好像不錯，但是穩定性好像不夠。

後來筆者找到了一個使用nodejs實現的文章內容抽取開源項目，簡單試用了兩下，效果不錯，速度也快了很多（筆者沒有深究原因）：

https://github.com/thomastuts/article-extractor

速度是很快，但是微信公眾平台的圖片卻抓取不到，什麼鬼？

經過一番探索，找到了個神奇項目：https://github.com/luin/readability，效果很不錯。

另外，筆者還發現一個問題：不可能匹配所有的網站，但可以添加一些通用的規則，否則得不償失，例如網站改版之後就重新寫適配規則。

6.保存各個網站的圖片

我發現sfgg都是把圖片保存到了自己的網站目錄下，這樣一來可以防止文章中的圖片鏈接失效導致採集的文章顯示出問題，另一方面保持了自己網站主動調配圖片資源的靈活性。

代碼稍後奉上，未完待續。

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

否則很難通過。

（以上系廣告合作內容，請同學們注意甄別內容真偽！）

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！