該依賴只要套上預設即可,十分方便
不過最新的 release 已經是 2016 年的事了...
實際也有些按鈕已經過時,無法使用
icarus 本身是支援多種分享功能的
由於 sharejs 停止維護,官方建議採用別的分享功能
AddToAny
其一是因為該插件支援的社群足夠多,也有持續在維護
與 blog 代碼沒甚麼交集,自定義客製方便
踩雷過程
簡單選一下想要的按鈕,產出代碼後,扔進 jsx 內
到此應該就搞定了,簡單 build 看下輸出
hmmm...為什麼會是一片空白呢?
沒有 CSS ?
看了下原始碼,似乎是 css 沒有載入
不過 css 這些內容應該會隨著 js 懶加載一併輸出才對
花了些時間尋找問題,之後發現
原來是被瀏覽器擋住了,會被瀏覽器攔截主要有幾個可能性
如果網站是透過 HTTPS 協定提供服務的,而嘗試載入的資源(如 page.js)使用的是 HTTP 鏈接,那麼這種「混合內容」可能會被現代瀏覽器封鎖。 確保所有外部載入的資源都使用 HTTPS 來避免這種問題。
瀏覽器可能會因為安全策略(Content Security Policy)而阻止某些腳本的載入。
服務商有可能因為沒有提供適當的跨域策略(Cross-Origin Resource Sharing),導致資源無法載入
一些廣告攔截器或安全相關的瀏覽器擴充功能可能會阻止諸如 AddToAny 這樣的第三方服務。
由於我們網站跟 AddToAny 都是 https,第一點可以排除
本站並沒有設置 CSP (目前沒有)
AddToAny 這類插件沒處理好 CORS 的機率是很低的
簡單排除一下,比較有可能的是被廣告攔截器擋住了
喔喔喔!總算出來了!
廣告攔截器
試了一下分享功能正常,就是按鈕有點多
可能減少一些..style 之後客製一下...
恩..不過這樣其實還沒有解決阿?
根據統計,全世界有至少四成的人口,常駐開啟廣告攔截器在上網
只是我看的到而已,如果其他人看不到的話就沒意義了 qq
不過攔截的問題其實也好解決,只要讓他不會被攔截就好了嗎!(廢話)
方法有很多,最簡單的是將原本被攔截的檔案納入網域下
載入原本就是同域名下的資源,通常就能繞過限制了。
<script async src="https://static.addtoany.com/menu/page.js" defer={true}></script>
根據產出的代碼來看,主要是這個檔案需要拉進 blog
整理一下格式,創建一個 addtoany.js 放進去
以 hexo 來說就是將 js 檔案放在 themes/{theme_name}/source/js 底下
之後回到 addtoany.jsx 修改來源
<script async src="/js/addtoany.js" defer={true}></script>
RUN!
失敗了!
載入失敗的檔案反而變多了!
更多的廣告
看了下失敗的內容,來源都是出自 addtoany.js,也就是剛剛新增的檔案
回頭翻代碼...
看來是原本的 page.js 又引入了其他檔案
然後其他檔案又被攔截了...
雖然有點亂,但還是好解決的
首先在 source 目錄新增 addtoany 資料夾
將 addtoany.js 改名回 page.js ,放進 addtoany 資料夾
原本 addtoany.jsx 的 script 也要修改
<script async src="/addtoany/page.js" defer={true}></script>
之後將三個攔截的檔案拷貝整理後,在 source/addtoany 創建同名檔案
然後..然後...
然後在 core.js 引用了更多會被攔截的 url...
估計是進行一些第三方 icon 的載入等等...
結語
重新看 core.js 的代碼,進行修改,最終是成功了
但是
修改已經壓縮過的代碼,過程是麻煩且沒營養的
處理方法相當於暴力破解,也不排除往後產生其他 ERROR 的可能,故這邊不多贅述———
如果有幸你也在想辦法處理 AddToAny 的問題,又懶得架 cdn
這邊提供整理後的檔案,歡迎參考。
MD5: e4c6ac982c223e6449d1d962be077bfb
SHA1: a9cc39cc5e9a7d0854d63b15a4801829c1718efb