2013年2月1日 星期五

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

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

Wayne Fu 0 A+
這個系列的文章共有三篇,目的是為了方便修改 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 範本」系列標題:
一、各種註解方式及區塊的修改
二、標頭、導覽列、側邊欄、頁尾區塊的程式碼
三、文章及留言區塊的程式碼

➢➢ 快速選單:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP