備份 Blogger 範本的訣竅﹍修改 Blogger 範本的觀念 (1)

如果是本站的忠實讀者，那麼修改範本可說是稀鬆平常的事。而常常修改 Blogger 範本的話，最重要的一件事，就是能否養成正確的備份範本習慣。

有的讀者可能會好奇，備份範本有什麼了不起，跟 Copy & Paste 一樣稀疏平常，只要知道快速鍵怎麼按就會做這件事了，有需要特地寫一篇文章嗎？的確非常需要，除了自己使用 Blogger 早期所引發的不測，WFU 也看過太多慘案，因此就算有備份的習慣，都不一定能避免悲劇的發生。唯有具備正確的觀念與工具，才能確保範本的安全──或許，都不修改才是最安全的。

只要踏上修改範本這條路，那麼這個系列文的重要性，跟「Blogger範本內容」系列文是並駕齊驅的。本篇要提供的進階觀念大致如下：

1. 如何正確備份範本
2. 如何養成習慣
3. 如何比對不同版本差異

一、悲劇的發生

進入主題之前，如同交通安全講習，先播放一些肇事的影片，比較能正視其危險性。以下舉例一些可能會引起災難的操作──

1. 誤刪程式碼

對於不熟悉程式碼的讀者，範本中的內容其實跟阿拉伯文、韓文這類文字的視覺效果差不多。就算我們跟著網路上的教學 step by step 操作，也是會有操作失誤的時候，當不小心多複製了一行、或是不小心刪除了一行，面對一堆火星符號，很可能看不出差異的。


2. 忘記出處

許多網路上的安裝程式，有一部分要放 </head> 前、有一部分要放奇特的位置、有一部分要放 </body> 之前等等，總之程式碼得拆成好幾個地方放。

不要說過幾個禮拜，隔天我們就忘了哪部份是什麼作用，將來要移除不但不記得出處、也無法完整移除，殘存的程式碼遲早跟範本其他程式打架，這都是幾個月、一年以後才會發現的事。


3. Javascript 會打架

一般來說，安裝第三方外掛都會有風險，除非自己對 js 很懂，否則網路上的小工具良莠不齊，不幸裝到品質較差的 js 工具時就有可能有問題。以下大略舉幾個例子：

• 全域變數太多，導致跟其他工具的變數相同，而讓程式互相衝突
• 不同的工具使用不同的框架版本，例如某個小工具使用的 jquery 版本不同，而導致其他工具失效。
• 就算沒有變數及版本的問題，某些工具一定會打架，例如「圖片延遲外掛Lazy Load」與「燈箱Fencybox」

有興趣了解更多，可參考「部落格最好避免第三方外掛」系列文。


4. 缺乏版本控制

許多讀者在修改範本前會備份檔案，我們假設叫做 "檔案 A"，就當他是最乾淨的一個版本。若是發現有問題後，會將 "檔案 A" 還原回範本，若是沒問題就繼續使用當前範本內容。

不過常常下一次修改範本時，備份檔案還是存到 "檔案 A"，那麼此時風險就來了，因為 "檔案 A" 被覆蓋過，不見得是最乾淨的版本了。

系統中很可能有一個 bug 在第四次覆蓋時發生，只是一直都沒發現，等到第十次修改時才蹦出來。但此時的 "檔案 A" 已經是前一次覆蓋的狀態，再也無從恢復到第四次修改時的狀態了。

只要發生了以上的情形，對於一般沒有程式基礎的使用者而言，這個網站大概就得砍掉重來了，除非具有 debug 程式的能力，可以自行將臭蟲抓出來。

二、如何正確備份範本

藉由以上的說明，相信讀者現在都可以了解，「如何備份範本」是多麼重要，以下一個個說明正確的作法。

1. 誤刪程式碼及忘記出處

解決的方法可參考「Blogger 範本各種註解方式」→「一、範本註解方式」，在一個完整段落的程式碼前後加上註解，可避免將來衍生的各種狀況，要查驗問題歸屬也變得容易。

WFU 寫的工具都會加上註解，其用意即是在此，且註解附上出處，將來有狀況也可知道要到哪裡求援。建議讀者從其他網站安裝的工具，在備份範本之前也記得要先加上完整的註解內容，這是必須養成的習慣。

另外補充一點，為了避免程式碼的安裝分散各處，WFU 有時會製作懶人包，將程式碼集中一處。但懶人包常常不會有最佳的程式執行效率，關於這一點，後續的系列文會介紹如何正確處理範本中的 HTML/JS/CSS。


2. Javascript 會打架

有鑑於大部分讀者不一定能自行對 js 進行 debug，這部份必須嚴格的進行範本備份的版本控制，請見下一點說明。

唯有進行版本控制，當發生 js 打架、某個小工具無法運作時，逐一將各個備份的版本還原，然後嘗試一個個刪除 js 小工具，來測試出產生問題的工具是那一個或那一些。


3. 版本控制

這是 WFU 的個人習慣，不見得適用每個人，不過提供一點概念當參考，讀者可以依據自己修改範本的頻率與週期進行調整。

如前所述，我們不知道潛藏的 bug 什麼時候會蹦出來，因此我固定每個月會備份一次，一年就會有十二個版本，檔名加上日期可易於辨識版本。

但是一個月之內只有一個版本仍是太過冒險，因為我修改的頻率很高，因此在週期備份的時間點(例如月底)之外，只要有重大修改，我會另外使用暫存檔，共有四個，檔名大概像是 "temp1" ～ "temp4" 這樣，便於循環使用。可以確保短期有短期的還原點、長期有長期的還原點，發生問題時得以逐一往回還原測試。

三、小工具及文章也需要備份

1. 小工具

2017.8.1 補充：在 Blogger 推出新的「RWD 範本」之後，現在各處的小工具內容，都已儲存在範本之中，因此不用另外手動備份小工具了，可省下不少麻煩。


這也是滿重要的概念，所有的小工具內容，是直接儲存在 Blogger 後端伺服器，而非範本之中，所以光是備份範本，並無法保證小工具的內容安全無恙。

如果是「HTML/Javascript」、「網誌清單」等等的小工具，不小心誤刪了的話，內容是無論如何救不回來的。

所以新建了這些小工具後，需要記得備份一次小工具的內容。不過不需要定期備份，這算是「一次性的備份」。當然，如果之後修改過內容的話，還是得重新備份。


2. 文章

這個主題過去曾發表，Blogger 文章的備份技巧請直接參閱「部落格文章如何全自動備份」。

四、實用的輔助工具

1. 習慣養成

備份的習慣並不容易養成，想靠人腦的記憶力來維持慣性更是不可能，好在習慣可以藉由工具的輔助來達成。如果預計每個月備份一次範本的話，可參考「Checker Plus for Google Calendar使用心得」──




藉由輔助工具的定時提醒，要忘記這件事也很困難。且就算時間到了忙不開、無法進行備份，只要點一下彈出視窗，就能設定延遲提醒的時間，例如兩小時、一天後，那麼屆時這個輔助工具仍會監督我們，直到完成任務為止。


2. 比對範本差異

有時為了在不同版本的範本之間 debug，我們會需要知道不同版本的內容，到底差在哪裡。那麼這個工具「WinMerge」就非常實用了。




WinMerge 可以讓我們載入兩份文件，同時列出兩個視窗，而內容不同的地方會以不同的顏色標示出來，讓我們很快就能找出版本的差異。

關於軟體的下載、操作與心得，可直接參考這篇「
WinMerge 文件檔案比對軟體，找出兩份文件內容的差異」。

五、小結

從早期自己的經歷，到現在逐漸養成一套 SOP 流程，相信我的 Blogger 範本備份習慣與經驗，可以供讀者參考與借鏡。而有了多份整齊的備份檔案後，相信範本修改起來也可以減少恐懼、更加得心應手。

先求有，再求好，有了基本觀念後，下一篇將會介紹如何調整範本中的 Javascript/CSS，來讓網頁的執行更順暢：

• 修改 Blogger 範本的觀念 (2)如何讓 Javascript/CSS 執行有效率

修改 Blogger 範本的觀念 系列文章：