2014年9月2日

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

A+
如果是本站的忠實讀者,那麼修改範本可說是稀鬆平常的事。而常常修改 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. 小工具

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

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

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


2. 文章

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



四、實用的輔助工具


1. 習慣養成

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




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


2. 比對範本差異

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




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

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



五、小結


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

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


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

11 則留言:

  1. 感謝wfu大的分享!超級實用!先前我也發生過亂改,導致真的要砍掉重練的痛,,

    回覆刪除
  2. 1.程式碼註解真的太太太太太重要了! 由於wayne都會註解所以我每次在修改範本的時候總是可以很快找到要改的地方,謝謝你的細心與貼心^^

    2. 2-3 「如前所述,我們不知道潛藏的 bug 什麼時候會蹦出來,因此我固定每個月會備份一次,一年就會有十二個版本,檔名加上日期可易於辨識範本的話,可。」是不是還有文字被誤刪了?

    3.小工具我一直以來都有另外備份在Evernote裡面,因為自己知道改範本是很常態的,小工具也常常換,所以萬一哪天我要換全新的範本或是買了客製化範本之後就可以以最快的速度把可以先上的小工具先上以免影響前台讀者閱讀的順暢度。

    4.文章備份部分我利用IFTTT來自動轉發筆記到EVERNOTE,應該是堪用了。

    5.最後介紹的比對範本軟體真的是太實用了,謝謝WAYNE不藏私分享。這樣以後萬一發生悲劇的時候至少可以先自己比對看看,真的不行再對外求助以減少別人的困擾^^"

    回覆刪除
  3. <6686940380744957616>(以上內容請勿刪除,從括號之後開始留言)修改範本的必經之路 ^^

    回覆刪除
  4. <2627524554071376304>(以上內容請勿刪除,從括號之後開始留言)謝謝提醒,沒想到有這樣的 copy & paste 低級錯誤...XD

    evernote 是萬用工具包啊~可惜阿冠無法體會,哈哈~

    嗯~orsino 的 debug 功力會越來越好 ^^

    回覆刪除
  5. <5307691725952171743>(以上內容請勿刪除,從括號之後開始留言)哈哈 真的!!感同身受!也謝謝你每次都分享好文喔!感覺自己慢慢有在進步中!!

    回覆刪除
  6. 1. 誤刪程式碼&忘記出處
    通常我不會在範本裡用註解蓋掉本來的語法,都直接刪掉居多。取而代之的,是另外用一份文件記錄自己改了些什麼。註解一多,會讓HTML本身變肥

    2. 缺乏版本控制
    若使用Dropbox或GoogleDrive備分可以自動保留一定時間內的版本變動,Dropbox印象中是90天,GoogleDrive則無期限,但會多占用一份空間。順帶一提,OneDrive的版本歷程只支援Office文件、Box則是要付費。

    3.比對範本差異
    沒說我還真不知有這東西,不過官網只有安裝版,沒有Binary。
    不過後來發現Portableapss有製作可攜版(http://goo.gl/kxJHIf ),算是解決了這問題。

    回覆刪除
  7. <1911475991780618748>(以上內容請勿刪除,從括號之後開始留言)[quote]1. 誤刪程式碼&忘記出處...2. 缺乏版本控制[/quote]會寫程式的話,當然用自己習慣的方法即可。這篇主要提供給不熟悉程式碼的使用者,初期打安全牌比較保險,等變成老手之後,再使用自己的方法。

    [quote]Portableapss有製作可攜版[/quote]文中的教學連結已經有免安裝版了。

    回覆刪除
  8. 你好,看完這篇文章,想請問:

    用BLOGGER的備份與還原的功能得到的XML檔案,跟手動把HTML檔案複製到記事本上還是不理解兩者的差異在哪裡@@?

    匯出的XML檔案可以避免手動複製貼上時選錯檔案存檔而產生不可逆的錯誤嗎?
    (也就是用匯入匯出的功能,每匯出一次都是獨立的XML,比較不會有覆蓋檔案的風險?)

    除此風險之外,如果記事本的整理很確實,並且確實的分類與存檔、另存新檔的話,其效果是不是都一樣呢?

    謝謝^^

    回覆刪除
  9. 另外想到,如果每變動一次BLOG後就開心的記事本存檔(有按照時間與內容分類),是不是跟匯入匯出的意思相同?

    回覆刪除
  10. <3884855430594057935>(以上內容請勿刪除,從括號之後開始留言)>> 手動把HTML檔案複製到記事本上還是不理解兩者的差異在哪裡

    HTML 檔案是怎麼來的?你要怎麼把這個 HTML 檔案還原?

    >> 如果記事本的整理很確實,並且確實的分類與存檔、另存新檔的話,其效果是不是都一樣呢? 每變動一次BLOG後就開心的記事本存檔(有按照時間與內容分類),是不是跟匯入匯出的意思相同?

    重要的是備份概念,至於作法不必拘泥,依個人習慣即可。

    回覆刪除
  11. 我在看完你的這篇文章之前,都是去範本那邊的HTML全選後複製貼上到記事本上。

    就是這個HTML囉@@

    回覆刪除

張貼留言注意事項:

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