自製 Blogger 的範本 ✎ Ken's Blog

Blogger 的版面配置範本，是一個宣告成 XML 的 HTML，所以別忘沒有元素的 Tag 就要自己了斷，例如：

<meta expr:content='data:post.url.canonical' itemprop='url'/>

看懂 data tags

簡單說，blogger 的網頁，分成五類：

index : 就是進去的第一頁，和下一頁、下一頁...
item : 看單一篇文章的那一頁
static_page : 用後台「網頁」中做出來的，例如我這兒，上頭的音樂、Labs 就是 static_page
archive : 根據日期的庫存文章
error : URL 錯誤

樣本就必須根據網頁的類別，長成不同模樣，就像是：

<b:switch var="data:blog.pageType">
    <b:case value="index">
        <h1>this is my blog</h1>
    <b:case value="static_page">
        <h1>this is my .. something</h1>
    <b:case value="item">
        <h1>this is my .. article</h1>
</b:switch>

不過……Jon Snow 說他爹說：「不過之前的話都是廢話」，實際的狀況又複雜很多，等到親自動手了就會知道。

Jon Snow，Jon Snow來自維基百科

建議先套用個簡單的範本，Blogger Theme Data Tags for Widgets就直接拉到文章後面，有個 Developer Theme 可以先拿來套用。

在 Blogger 後台的【主題】，右上角可以備份現有的範本，也可以上傳範本，套用 Developer Theme，搭配 Blogger 的三篇說明：

Developer Theme 中那一堆 Data Tags 的中譯說明可以看這兒有一部分，此外提醒你，那些並非全部的 data tags，等等會再補充。

重點是要搞懂這些 Blogger 專有的 tags，如果似乎搞懂了，再換回 Blogger 提供的範本，這兒的範本都比較複雜，好處是可以用 Blogger 後台的【版面配置】。

我是為了保持手感，所以自己改個 RWD (Responsive web design)，然後之前都用Bootstrap，所以用用看W3.CSS。

再補充幾篇不錯的文章：

最後一篇有一些之前沒有列出的 data tags，所以一定要看。

移除預設的 CSS 檔案

CSS 裡面就是一大堆 id、class name、tag name……，就算全都是自己取的，兩個禮拜不看，就通通忘記他們是在哪邊了。

更何況是看別人的 CSS，所以，Blogger 預設的 CSS，就留給用的到的人吧！

head 裡面的

如果你有看 Developer Theme 的內容，答案就在這個檔案裡面了，將 b:template-skin 和 b:skin 換掉，就可以了，不複述。

外部的 .css 檔案

載入 css 檔案，是非常昂貴的，可以看這一篇文章的說明，所以，不是不用到就可以，還要不讓他載入。

stackoverflow 有人提供了非常簡單的方式，包括 Blogger 預設載入的 javascript 都免掉的方法。

真是可喜可賀。

自製範本之後

我從來沒有暗示或明示，自製範本可以把你的 Blogger 變漂亮，所以，以下就是結果了，左邊那個是套用 Blogger 的範本，右邊那個是我自己作出來的，也就是目前正在使用的。

第一個比較小的原因，是那個範本最寬就是 860px，再寬也是空白的；所以第二個就可以看出 RWD 的優點了，隨著畫面的大小改變版面的配置。

延伸閱讀

請參考這些標籤是 css、javascript、web 的文章，我會 (應該啦！) 陸續更新一些相關的文章。