2015年2月12日

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

A+
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 取得外連」。


想知道還有哪些雲端空間,可在這個 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 相關文章:

11 則留言:

  1. 多謝!這個方法很方便。不過如果空間伺服器為了避免回傳失敗而採用自動轉入提示網址(而不是無回應),可能造成以下兩種情形:1. Fail() false 仍然無法執行該檔案。 2. 的確可以轉入預備的檔案位置;卻讓瀏覽器以為轉入不安全的跨網連線(因為 https 之故)。
    通常使用這個 jQuery 函式在於同網域,不同網域伺服器可能有此疑慮,但我沒有測試過所以無法斷言其實用性。

    回覆刪除
    回覆
    1. 原來有這樣的可能性,感謝提醒,瞭解你說的意思了,如果遇到某個空間有這樣的處理方式時,再來根據回傳代號寫判斷式吧。目前Google Drive、Dropbox 執行上都沒什麼問題,在 Google Drive 失效期間,我就是用這個方式轉到 Dropbox 的。

      刪除
    2. 要排時間將兩方的目錄結構重整同步,大概是最麻煩的部分了。又不想一堆檔案塞進一起,弄完可以放心亂跑了!

      刪除
    3. 找到一個節省管理檔案時間的方法,可以參考「讓 Google Drive 與 Dropbox 同步」。

      刪除
  2. 谷歌這樣子找使用者麻煩很不可取。

    回覆刪除
  3. 我的 Dropbox 是去年註冊的,是 Blogger 社群上的網友,建議我用 Dropbox。是2012年之後了,的確無法使用 Dropbox 的目錄路徑。但是我可以用檔案路徑外連 js 檔。

    範例路徑:搜尋結果.txt朋友金字塔.docx

    回覆刪除
    回覆
    1. @Almighty Demiurge, 這個事件的確不太舒服~

      @Chester Chen, 的確是有找出外連路徑的方法,可惜不包含目錄路徑。

      刪除
    2. 我這個方法,看來是治標不治本的臨時備胎....

      刪除
  4. 有沒有可能找不到</head>這東西Q_Q...雖然我有先下載js到dropbox放,但暫時不管它(blogger)應該沒關係吧?....

    回覆刪除
    回覆
    1. 範本裡一定有 head 這個字串的, 有沒有按照說明 "游標點進範本區塊,按 Ctrl-F 搜尋" 呢?

      如果你不確定範本裡面有沒有 google drive 的外連,最簡單的方法就是等到 8/31,看看有哪個小工具壞了,就是那個工具要更改外連了 ^^

      刪除
    2. 默默的同意第二段意見,我也打算這麼做=w=不過搜尋那個我可能要再試試了,如果是照字面上的方式,應該是沒錯才對啊??‥‥還是等8/31好了=_=不行的話到時再求救XDD~~

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。