部落格搬回 Blogger 平台

兩個月前，我把部落格移轉到 Hugo + Netlify 平台，主要原因是為了方便以 Markdown 來撰寫和發布文章：我可以把正在撰寫的書稿內容直接複製一部份到另一個 Markdown 檔案裡，稍微調整就成了一篇網誌，而且只要 git push 就能發佈文章。

然而，兩個月後，我又回到了 Google Blogger 的懷抱，還換了新的版面。

之所以回到 Blogger 平台，是因為我還是需要它提供的一些現成的方便功能，比如說，我很容易就能調整版面樣式、提供 e-mail 訂閱、或者在側邊欄加掛一些小東西。

在搬回 Blogger 之前，我還考慮過 Medium。但有了前次移轉經驗，我認為 Medium 並不符合我的需要，至少目前還沒有很強烈的誘因讓我想要把寫作習慣移轉過去。

閒話少說，這次主要是紀錄我把部落格搬回來 Blogger 平台的時候採用新版型（template，或者說「模板」）所碰到的一些狀況。

Sora Front Template

我這次改用的模板是 Sora Front，有免費和付費兩種版本。免費版本會有一部份 JavaScript 程式碼經過編碼保護，無法閱讀和修改。我用的是免費版本，一樣可以自行修改模板裡面的 CSS 和 HTML，這個部分倒是沒有發現什麼特別的限制。

除了版面樣式合我的意，我還喜歡它內建了三種留言板：Blogger、Disqus、和 Facebook，而且還可以自行調整要三個都用還是只用其中一兩個。留言板是以頁籤方式呈現，讓使用者能夠自行選擇想要使用的留言板系統。頁籤的顯示順序亦可從後台設定。下圖是我調整後的留言板：

Sora Front 有說明文件，也有教學影片，而且作者還有在留言板回覆提問，這讓我在選擇模板時放心不少。

然而，我還是碰到了一些小問題。比如說，每一篇文章的下方有一個區塊，裡面提供了前往上一篇和下一篇文章的連結，如下圖：

但我在調整模板 XML 檔案內容時，經常發現這個導覽區塊的內容一片空白：

為了解決此問題，我找到一份文件：

Solved!! Recent Post, Featured Post, Slider, Random Post, Related Post Not Working

按照文件中的指示來逐一設定，「似乎」有比較正常，但還是偶爾會出現剛才說的空白區塊的狀況。

目前可以確定的是，如果從部落格首頁點進文章內頁，則文章下方的導覽區塊可正常顯示。但如果在文章頁面按 Ctrl+F5 強制刷新頁面，導覽區塊就會出問題。後來，不知我修改了哪個地方，上述狀況似乎已經不再出現，但已無法確定是改了哪個地方才修好的（有可能是關閉 Blogger 留言板，或者把 jQuery 版本從 v1.11 改成 v3.3.1）。

還好我不需要 Featured Post、Random Post、和 Related Post 等功能，不用擔心它們是否也會偶爾出狀況。這些區塊雖然可豐富版面，但也可能讓人眼花撩亂。至於 Recent Post（新進文章列表），我是用 Blogger 平台本身提供的 RSS 區塊來達成（儘量用內建的功能，比較不會有問題）。

除了剛才提到的狀況，我還花了不少時間微調模板的 CSS、Facebook plugin 的程式碼區塊、按讚與分享按鈕等等，以及把過去兩個月發布於另一部落格的文章轉回這裡（需要使用 Blogger 平台提供的網址重新導向功能來逐一設定每一篇文章）。這些工作聽起來好像沒什麼，卻花了我整整一天的時間。

所以說，搬家真的很累啊！ Orz

修改紀錄

修改的細節太多，只能整理我還記得的部分。

首先是 Sora Front 模板的修改：

1. 原本使用 jquery v1.11，改為 v3.3.1。
2. 修改模板的 HTML 和 CSS：內文字型大小設定為 16 點，超連結顏色、側邊欄樣式、把文章標題下方的橫幅廣告移除（隱藏）……等等。
3. 把下面這行刪除，不然在使用 Facebook 留言板時，一送出訊息就會出現訊息 "More Than One OG URL Specified"。
   <b:include data='blog' name='all-head-content'/>
4. 修改 Facebook plugin 的程式碼，改用新版本，語言從 en_US 改為 zh_TW。
5. 移除每篇文章下方的社群分享按鈕，改用 Facebook 官方提供的按讚分享 plugin。
6. 首頁顯示文章列表也加入 Facebook 分享按鈕。
7. 把 Font Awesome 版本從 4.5 改成 4.7。注意：不可用 5.x 的版本，因為 v4 和 v5 兩個版本的 CSS 類別名稱改動不少，而免費版的 Sora Front 樣板有一些原始碼被編碼而無法修改；若改用 Font Awesome v5，勢必造成某些圖示無法正常顯示。
8. 把原先透過 CSS 隱藏的 Quick Edit 按鈕恢復。（我覺得這功能很重要，不知為何作者刻意隱藏此按鈕）

Blogger 本身的設定也有需要配合修改的地方，如下：

1. 把留言板關閉（設定成「隱藏」），並且關閉 Google+ 留言功能。 
2. 把「允許網誌資訊提供」（RSS Feed）選項從「簡短」改成「完整」。
3. 把「行動版主題」選項改為「在行動裝置上顯示電腦版主題」。（因為 Sora Front 模板本身已經有自適應的設計）

最後來一張套用新模板之後的首頁半身照：

Happy blogging!