[教學]Blogger 範本﹍(1) 各種註解方式及區塊的修改

這個系列的文章共有三篇，目的是為了方便修改 Blogger 範本時，可快速找到正確的修改區塊。先前發表的「讓Blogger能顯示 "單篇文章瀏覽數"」，由於這個小工具每個人想擺放的位置不一定都一樣，如此要說明擺放位置變的異常困難。

於是將範本的各個重要區塊的程式碼整理了一下，並附帶簡單說明，這樣以後除了說明方便，有篇文章可以隨時參照，自己也可將範本中的每個區塊加上註解，搜尋起來就非常迅速了。


一、範本註解方式

如果常常修改範本的話，建議在自己範本的每個區塊都加上中文註解，這樣以後只要搜尋中文註解的字串，就能很快找到對應的程式碼。

並且，範本的官方原始碼最好不要真的刪除，改用註解的方式讓原始碼沒有作用即可。若將原始碼覆蓋掉，而當新裝的程式碼有問題時，除非有備份檔，否則就很難恢復原狀了。

以下內容節錄自發表在「Blogger中文社群的討論串」：

1. HTML 的註解語法：

<!-- 註解內容 -->
以上的註解內容將不會被執行。例如小工具標題的程式碼為 <h2><data:title/></h2>，若要讓標題不顯示，當然可以把這段程式碼刪除，不過建議用這樣的方式：

<!--<h2><data:title/></h2>-->

2. CSS 的註解語法：

/* 註解內容 */
例如範本中 CSS 區塊可能會看到

body {
color: $(body.text.color);
}
想要改文字顏色的色碼時，記得把原來的預設值寫到註解裡面──

body {
color: #aaaaaa ; /*預設值為 $(body.text.color)*/
}
這不是一個很好的舉例，只是為了說明概念，因為Blogger後台有更好用的改顏色工具。


3. Javascript 的註解語法：

◎ 單行註解方式：

// 註解內容

◎ 多行註解方式：

/*
註解內容
*/


二、Blogger 各區塊的語法格式

1. 配置圖：先來張 Blogger 版面配置的簡圖──



在上圖中，導覽列、網誌文章、側邊欄等等，都是一個完整的區塊，而每個區塊則分別可以塞進許多小工具，例如側邊欄的「網誌存檔」、「關於我自己」都是小工具。


2. 語法結構：每個區塊的 Blogger 語法結構都一樣，類似下面這樣：

<b:section.....>  // 這是區塊的開始
<b:widget.....>  // 第一個小工具的開始
<b:includable.....>  // 小工具的第一段程式開始
.
. 程式碼只能擺在這個區間
.
</b:includable>  // 小工具的第一段程式結束
<b:includable.....>  // 小工具的第二段程式開始
.
. 程式碼只能擺在這個區間
.
</b:includable>  // 小工具的第二段程式結束
.
. (更多程式段落)
.
</b:widget>  // 第一個小工具的結束
<b:widget.....>  // 第二個小工具的開始
<b:includable.....>
.
. 程式碼只能擺在這個區間
.
</b:includable>
.
. (更多程式段落)
.
</b:widget>  // 第二個小工具的結束
.
. (更多小工具)
.
</b:section>  // 這是區塊的結束

3. 註解程式碼：任何的 HTML、JS、CSS 程式碼，在 Blogger 語法所建構的區塊之中，只能擺放在以上「程式碼只能擺在這個區間」的位置，說的更精確一些，也就是擺放在 <b:includable.....> 與 </b:includable> 的區間。

因此要註解程式碼的話，也是得遵循這個規則，依照「一、範本註解方式」的方法，例如 "樹狀標籤程式碼" 要註釋頭尾位置，註釋擺放的位置及方法可參考以下──

<b:includable.....>
.
<!-- 樹狀標籤開始 -->
樹狀標籤程式碼
<!-- 樹狀標籤結束 -->
.
</b:includable>


三、修改小工具的設定

再參考一次版面配置的簡圖──



如上圖紅圈之處，我們會發現小工具的左邊，若有藍色活頁孔洞的話，那麼這個小工具就能 "任意拖拉、移動位置"，而且編輯該小工具時有 "移除" 的選項。

對於 Blogger 預設不讓我們移動、移除的小工具，只要在範本裡更改了參數，就能達到這個目的。以頁尾的「內容出處」為例，找到這個小工具的程式碼：

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
把小工具裏 "locked" 這個參數的值 'true' 改成 'false' 即可，效果如下圖：



上面可看到，「內容出處」這個小工具的藍色活頁孔洞出現了，這樣就可以從編輯畫面將它移除了。我的作法是另外用一個「HTML/JAVASCRIPT」小工具取代，這樣才能塞得下我所有要擺的提示文字、版權宣告、圖案等等。不過吃果子要拜樹頭，Google 免費提供我們部落格平台，該給的 Credit 還是留給人家，「Powered by Blogger」這樣的文字我還是會留著。

只是，Blogger 預設不讓我們移除的小工具，先不要看了本篇就急著移除，請看完下面一篇之後再決定哪些是否移除，之後會一個個說明。


「Blogger 範本」系列標題：
一、各種註解方式及區塊的修改
二、標頭、導覽列、側邊欄、頁尾區塊的程式碼
三、文章及留言區塊的程式碼

➢➢ 快速選單： １ ２ ３