兩個月前,我把部落格移轉到 Hugo + Netlify 平台,主要原因是為了方便以 Markdown 來撰寫和發布文章:我可以把正在撰寫的書稿內容直接複製一部份到另一個 Markdown 檔案裡,稍微調整就成了一篇網誌,而且只要 git push 就能發佈文章。
然而,兩個月後,我又回到了 Google Blogger 的懷抱,還換了新的版面。
之所以回到 Blogger 平台,是因為我還是需要它提供的一些現成的方便功能,比如說,我很容易就能調整版面樣式、提供 e-mail 訂閱、或者在側邊欄加掛一些小東西。
在搬回 Blogger 之前,我還考慮過 Medium。但有了前次移轉經驗,我認為 Medium 並不符合我的需要,至少目前還沒有很強烈的誘因讓我想要把寫作習慣移轉過去。
閒話少說,這次主要是紀錄我把部落格搬回來 Blogger 平台的時候採用新版型(template,或者說「模板」)所碰到的一些狀況。
除了版面樣式合我的意,我還喜歡它內建了三種留言板:Blogger、Disqus、和 Facebook,而且還可以自行調整要三個都用還是只用其中一兩個。留言板是以頁籤方式呈現,讓使用者能夠自行選擇想要使用的留言板系統。頁籤的顯示順序亦可從後台設定。下圖是我調整後的留言板:
Sora Front 有說明文件,也有教學影片,而且作者還有在留言板回覆提問,這讓我在選擇模板時放心不少。
Sora Front Template
我這次改用的模板是 Sora Front,有免費和付費兩種版本。免費版本會有一部份 JavaScript 程式碼經過編碼保護,無法閱讀和修改。我用的是免費版本,一樣可以自行修改模板裡面的 CSS 和 HTML,這個部分倒是沒有發現什麼特別的限制。除了版面樣式合我的意,我還喜歡它內建了三種留言板:Blogger、Disqus、和 Facebook,而且還可以自行調整要三個都用還是只用其中一兩個。留言板是以頁籤方式呈現,讓使用者能夠自行選擇想要使用的留言板系統。頁籤的顯示順序亦可從後台設定。下圖是我調整後的留言板:
Sora Front 有說明文件,也有教學影片,而且作者還有在留言板回覆提問,這讓我在選擇模板時放心不少。
為了解決此問題,我找到一份文件:
Solved!! Recent Post, Featured Post, Slider, Random Post, Related Post Not Working
按照文件中的指示來逐一設定,「似乎」有比較正常,但還是偶爾會出現剛才說的空白區塊的狀況。
Solved!! Recent Post, Featured Post, Slider, Random Post, Related Post Not Working
按照文件中的指示來逐一設定,「似乎」有比較正常,但還是偶爾會出現剛才說的空白區塊的狀況。
還好我不需要 Featured Post、Random Post、和 Related Post 等功能,不用擔心它們是否也會偶爾出狀況。這些區塊雖然可豐富版面,但也可能讓人眼花撩亂。至於 Recent Post(新進文章列表),我是用 Blogger 平台本身提供的 RSS 區塊來達成(儘量用內建的功能,比較不會有問題)。
除了剛才提到的狀況,我還花了不少時間微調模板的 CSS、Facebook plugin 的程式碼區塊、按讚與分享按鈕等等,以及把過去兩個月發布於另一部落格的文章轉回這裡(需要使用 Blogger 平台提供的網址重新導向功能來逐一設定每一篇文章)。這些工作聽起來好像沒什麼,卻花了我整整一天的時間。
所以說,搬家真的很累啊! Orz
首先是 Sora Front 模板的修改:
最後來一張套用新模板之後的首頁半身照:
所以說,搬家真的很累啊! Orz
修改紀錄
修改的細節太多,只能整理我還記得的部分。首先是 Sora Front 模板的修改:
- 原本使用 jquery v1.11,改為 v3.3.1。
- 修改模板的 HTML 和 CSS:內文字型大小設定為 16 點,超連結顏色、側邊欄樣式、把文章標題下方的橫幅廣告移除(隱藏)……等等。
- 把下面這行刪除,不然在使用 Facebook 留言板時,一送出訊息就會出現訊息 "More Than One OG URL Specified"。
<b:include data='blog' name='all-head-content'/> - 修改 Facebook plugin 的程式碼,改用新版本,語言從 en_US 改為 zh_TW。
- 移除每篇文章下方的社群分享按鈕,改用 Facebook 官方提供的按讚分享 plugin。
- 首頁顯示文章列表也加入 Facebook 分享按鈕。
- 把 Font Awesome 版本從 4.5 改成 4.7。注意:不可用 5.x 的版本,因為 v4 和 v5 兩個版本的 CSS 類別名稱改動不少,而免費版的 Sora Front 樣板有一些原始碼被編碼而無法修改;若改用 Font Awesome v5,勢必造成某些圖示無法正常顯示。
- 把原先透過 CSS 隱藏的 Quick Edit 按鈕恢復。(我覺得這功能很重要,不知為何作者刻意隱藏此按鈕)
Blogger 本身的設定也有需要配合修改的地方,如下:
- 把留言板關閉(設定成「隱藏」),並且關閉 Google+ 留言功能。
- 把「允許網誌資訊提供」(RSS Feed)選項從「簡短」改成「完整」。
- 把「行動版主題」選項改為「在行動裝置上顯示電腦版主題」。(因為 Sora Front 模板本身已經有自適應的設計)
最後來一張套用新模板之後的首頁半身照: