[小工具] 徹底解決網站外連空間問題﹍幫 Google Drive 的 JS 檔買保險

Google Drive 上星期發生了「JS 檔外連失效」事件，雖然日前已經修復，但相信所有經歷這件事的站長都不好受，心理也會留下陰影，是否哪天殘破的部落格版面又要重現？

誠如我在上一篇提到的，「放在雲端的任何東西，沒有一樣是絕對安全的」，網站隨時有開天窗的風險總是無法安心。不想讓舊事一再重演，必須幫部落格四項重要資料「範本、文章、圖片、外連」買保險。本篇將說明，如何為網站的 "外連檔案" 找到各種備胎，並在出狀況時由系統自動替換，省去人工手動更換各處連結，算是一個徹底解決的方案。

方法雖好，不過算是程式人的工具，若熟悉 Javascript、Jquery 的站長比較能自行處理。

一、分散式檔案管理

先說明一下原理，如同伺服器一般，為了確保檔案存取正常，不受任何事故而影響資料庫，那麼各種意外導致的異常，例如天災、斷電、未授權的存取(駭客)等等，必須將檔案同步異地存放。經由分散式的檔案管理，事故發生時可由備份處取得檔案內容、或立即回覆狀態，絲毫不影響伺服器的運作。

經由同樣的構想，如果在 Google Drive(或你的主要雲端空間)發生的異常狀態，導致所有外連檔案失效，而我們能事先將所有檔案，在另一個雲端空間保有備份，經由本文工具的輔助，當偵測到異常狀態時，自動改用備份空間的連結，就能解決「雲端外連空間無法信任」這個問題了。

然而，我們要怎麼讓程式判斷，Google Drive 的 A 檔案，自動對應到另一個空間的同一個 A 檔案呢？程式很短很好寫，但如何對應檔案才是最大的問題。

解決的方法為，我們準備的所有雲端空間，都必須是「支援目錄路徑」的空間。如此雖屬不同空間，但檔名相同時，就能自動判斷了。

二、準備「支援目錄路徑」的雲端空間

說真的，「支援目錄路徑」的雲端空間並不多，且漸漸都開始收費了，也許站長們可趁還沒收費前搶先註冊帳號。不過維持外連檔案、確保網站運作這件事很重要的話，如果將來雲端空間開始收費、且金額不大時，我想這筆開銷是必須的。

以下提供幾個目前 WFU 知道的「支援目錄路徑的雲端空間」，有相關資訊的讀者也歡迎補充：

1. Google Drive：2016.4.12 補充：由於「Google Drive 檔案外連功能將於 2016 年 8 月關閉」，第 1 點的內容可略過。

既然已經修復了，就繼續使用。其目錄路徑格式大致長的像這樣──

https://googledrive.com/host/0BxkdlfTTti-aSlU3SDg5RUVtNll/檔案名稱.js
取得 Google Drive 外連路徑的方法，請參考「Google Drive 取得檔案外連網址原理分析」、「Google Drive 外連產生器」。


2. Dropbox：很可惜，2012 以後才註冊的使用者，必須付費才能使用。其目錄路徑格式大致長的像這樣──

https://dl.dropboxusercontent.com/u/39186009/test/檔案名稱.js

3. Hinet：我本身是 Hinet 用戶，所以有免費的 60MB 空間。如果你也是 Hinet 用戶，可以申請來當備用的外連空間，放多少 JS 檔都綽綽有餘。其目錄路徑格式大致長的像這樣──

http://帳號名稱.myweb.hinet.net/檔案名稱.js

4. Google Site：這個平台需要一點時間上手，詳細的介紹及操作教學請參考這篇「Google 協作平台」


5. Github：：對於大部分部落格站長而言，Github 的使用概念比較不一樣，要熟悉這個平台需要不少時間，可參考這篇文章進行註冊、安裝、及上傳：「用 Github 存取網頁 JS/CSS 外連檔案 + 使用技巧」。


想知道還有哪些雲端空間，可在這個 WIKI 頁面「Comparison of file hosting services」，從 "Direct access" 這一欄尋寶，看能否找到「支援目錄路徑的雲端空間」，有點難度就是。

三、安裝工具

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

1. 請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

以下參數修改請參照以上程式碼行號：

B：這一行可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jquery，以免重複安裝。

F：紅色字串請填入主要的雲端空間資料夾路徑，例如前面提到的 Google Drive 目錄路徑，但不包含檔名字串 (檔案名稱.js)。

G：紅色字串請填入備用的雲端空間資料夾路徑，例如前面提到的 Dropbox 或 Hinet 目錄路徑，但不包含檔名字串 (檔案名稱.js)。

儲存後請看接下來的檔案外連使用方法。

四、基本使用方法

安裝本文工具後，等於是外連檔案交給這個工具託管，那麼呼叫外連檔案的方式也需要修改。

1. 所有外連的檔案，請放在同一個資料夾，也就是程式碼 F、G 行自己設定的那些目錄路徑。同檔案、不同空間的兩個檔案名稱必須相同。

2. 呼叫外連檔案的語法如下：

$.link("檔案名稱");
藍色字串只需要填入檔名即可，不需要填入路徑。以下舉實例說明──

「Blogger 相關文章 V2」原本呼叫外連 js 檔的內容為 Q~V 行：

(function () {
var url = "https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/related-post-2-140516-min.js",
script = document.createElement("script");
script.src = url;
document.documentElement.firstChild.appendChild(script);
} )();

呼叫的方法為，將以上所有內容改為以下語法：

$.link("related-post-2-140516-min.js")

五、進階使用方法

這部分提供給進階使用者，如果外連 js 執行結束後，需要執行 callback 動作，可加上 callback 函數，使用方法為──

$.link("檔案名稱", callback);

或是你也可以直接將 callback 函數內容當成參數傳送──

$.link("檔案名稱", function(){ // 執行動作寫在這裡 });

六、優點總結

裝了這個工具後，我們的部落格就成了伺服器等級的網站，就像無預警斷電時還有備用 UPS 可支援。簡單總結一下其優點：

1. 不怕流量被限制：當主要空間達到一日的流量上限後，這個工具會自動切換，改讀取次要空間相同檔名的檔案。

2. 不擔心伺服器不穩：有時瞬間連線人數過多時，雲端空間伺服器可能會不穩、或暫時限制某些檔案的讀取。同第 1 點，遇到這些狀況時，這個工具會自動切換，改讀取次要空間相同檔名的檔案。

3. 管理方便：以往如果換了外連空間，更改範本中所有外連路徑是一件痛苦的事。使用這個工具後，只需要更改資料夾路徑的設定，所有檔案都可無痛轉移陣地。

4. 切換彈性：若哪天主要空間忽然變得龜速，想要改用次要空間，那麼就把 F、G 行的主要、次要資料夾路徑互換，幾秒鐘就完成這件事。

相信經由以上幾點說明，可瞭解這個小工具的威力。花一點時間來修改各處連結，外連空間將不再成為站長的頭痛問題。

Google Drive 相關文章：