<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 後台的【主題】，右上角可以備份現有的範本，也可以上傳範本，套用 Developer Theme，搭配 Blogger 的三篇說明：
Developer Theme 中那一堆 Data Tags 的中譯說明可以看這兒有一部分，此外提醒你，那些並非全部的 data tags，等等會再補充。
重點是要搞懂 <b:section ..> <b:widget ..> 這些 Blogger 專有的 tags，如果似乎搞懂了，再換回 Blogger 提供的範本，這兒的範本都比較複雜，好處是可以用 Blogger 後台的【版面配置】。
我是為了保持手感，所以自己改個 RWD (Responsive web design)，然後之前都用 Bootstrap，所以用用看 W3.CSS。
再補充幾篇不錯的文章：
- 判斷 Blogger 目前要顯示的是哪一個頁面
- 同上
- <b:if cond ...></b:if> 怎麼用
- 新增的 expressions
- 範本語言的新功能
- 從無開始製作 blogger 範本
- Google Blogger/BlogSpot Social Meta Tags for Facebook, Twitter, Google+, Pinterest [v1.0]
移除預設的 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 的優點了，隨著畫面的大小改變版面的配置。
