[閒聊] 新版型主題 - 使用 hack.css

Blogger 的使用者最近登入後台的時候，應該會發現 Blogger 更新了全新的響應式(Responsive)範本主題，詳細的故事大家可以參考電腦玩物。

身為一個惡搞系工程師，當然就藉著這個機會把本部落格主題大大翻新囉（對，本篇和 Blogger Reponsive New Template 完全沒有任何關係）

我採用了 hack.css 這套 CSS 框架。簡單、乾淨、Geek，Markdown 般的設計。

原本的版型從 Blogger 預設主題 Simple Theme 修改，陸續簡單加了 Header 還有更改背景等。這次一樣從頭開始，不過不一樣的是我多了許多工具，不用傻傻的在 Blogger 後臺的主題編輯器慢慢修改了。

HTML Entity Decoder

Blogger 的範本就是個 XML，Blogger 主題編輯器預設會在儲存的時候會把字元都跳脫掉(escape)，比如說範本裡的判斷式，就會這樣被轉換：


<b:if cond='a == "b"'>
<b:if cond='a == &#x22;b&#x22;'>


難以理解對吧。既然 Blogger 編輯器會自動轉換，我們版控裡的原始碼當然就存原始的格式就好。

第一步，我利用 HTML Entity Decoder 這套工具，先一次的把所有跳脫字轉換回來，然後貼回 Blogger 編輯器，透過預覽模式確認 XML 解析是否正確，逐步的利用版控程式 (Source Tree 之類的)， 一區段一區段捨棄不該轉的字串。

取消 Blogger 預設 CSS，引入 hack.css

我使用了 How To Remove/Hide Blogger Official CSS In Your Custom Template? 這篇文章的做法，把原本的 <b:skin> 段落換成了：


&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>


（對，就是字面上這樣有點醜醜的，因為已經跳脫過了）

接下來引入 hack.css 。就一如往常，在 head 加上 stylesheet link，然後參照 hack.css 的文件。

花式版型修改

我完全致敬抄襲了 hackcabin 的設計，當然要在 Blogger 裡使用 hack.css，必要的修改還是不可少的。我幾乎把可以隱藏的小工具都關掉了，在拿掉 Blogger 預設 CSS 之後小工具和留言的版型完全走鐘，又做了一些修改。

當然還是得說一下 Git 好棒棒。若是幾年前的我根本無法修改的如此優雅，還不會使用的朋友趕快去學吧 XD

成果

就直接放圖啦，也是多虧 hack.css 本來就寫的很好了，CSS 複寫的部分不多。至於原本的主題長什麼樣子，我自己是有留截圖啦，沒看過的朋友就當做不知道吧 XDDD

BTW，因為有了 hack.css 的幫助，所以新的主題立馬就享有 RWD 功能 XDD 愉悅愉悅

首頁

文章閱讀頁面

 

留言區塊