本篇的內容為 Blogger 範本各個區塊的程式碼整理,包含除了文章區塊外的所有區塊(標頭、導覽列、側邊欄、頁尾區塊),並附帶簡單說明。建議參考系列文「第一篇」,在範本中加上註解,如此日後搜尋、修改都很方便。
以下大標題依照範本中出現的順序排列──
一、官方導覽列
1. 這個區塊可參考這個「Blogger中文社群討論串」將其隱藏起來。
2. 建議不要刪除「官方導覽列」這個小工具,因為裡面的程式碼綁定了一些重要功能,例如 "小工具的快速編輯圖示";如果把「官方導覽列」刪了,會導致這些圖示消失而無法快速編輯。因此如果不想看到「官方導覽列」,建議隱藏就好。
二、標頭區塊(HEADER)
1. 整個區塊的範圍
以上為整個區塊程式碼的範圍;title 後面的藍色字串是自己部落格的名稱。
可參考「第一篇」,將 locked 的參數由 "true" 改為 "false",便可將「標頭」區塊拉到別的位置。
實際的應用可參考「將 Blogger "標籤" 小工具放在導覽列實作」,讓「標頭」區塊的位置跑到「網頁」小工具的下方。
2. 網站名稱
在標頭區塊中,以上區間為顯示 "網站名稱" 的程式碼;其中代表網站名稱的字串為 <data:title/>。
3. 網站敘述
在標頭區塊中,以上區間為顯示 "網站敘述" 的程式碼;其中代表網站敘述的字串為 <data:description/>。
三、水平功能導覽列("網頁"小工具)
1. 這個區塊是指官方的「網頁」小工具,以上為整個區塊程式碼的範圍。
「網頁」小工具最好不要移除,否則將來要裝回去可能困難重重,請參考這個案例:「Blogger 中文社群討論串」
因此如果不想顯示官方「網頁」小工具的話,可以在後台選擇將其隱藏起來,如下圖:
2. 如何將「網頁」小工具改成下拉選單,是詢問度很高的功能,可參考以下兩篇文章:
四、側邊欄
側邊欄小工具的程式碼結構都差不多,請按以下範例程式碼舉一反三即可。
以上 A~M 為一般小工具的程式碼結構。
A:紅色字串為小工具的標題字串,通常在範本裡搜尋標題字串就能找到目標小工具區塊。
B:如果這個小工具只有一個程式區段,那麼結構就會是 B~L行這樣,B 行的 id 名稱會是 'main';如果有多個程式區段,那麼就會有多個類似 B~L 行的結構,但是起始的 id 名稱會不同。
C~E:顯示小工具標題的程式碼;如果不想顯示小工具標題,將 D 行註釋起來即可,就像這樣:<!--<h2><data:title/></h2>-->
F~K:這個區間為小工具真正執行的程式碼;如果是「HTML / Javascript」小工具的話,G~I只會顯示 <data:content>,這個字串代表輸入到「HTML / Javascript」小工具的所有程式碼。
J:這一行代表「快速編輯的小圖示」,不過不一定總是在這個位置。
「側邊欄小工具」必須小心的是,儲存在小工具的內容,似乎沒有辦法備份,萬一不小心刪除了小工具,裡面的資料就再也無法恢復!例如我曾誤刪了「網誌清單」小工具,結果裡面的所有網址連結再也無法恢復,只能憑印象一個個手動增加回去,但結果就是一些好網站的網址還是忘了...
因此填入側邊欄小工具的內容,例如各種網址連結資料、「HTML / Javascript」小工具的程式碼,都得自己另外備份才保險。
五、頁尾版權宣告
這個小工具如果刪除的話,倒是沒什麼危險性。刪除的方法及替換方式請直接參考「第一篇」→「三、修改小工具的設定」即可。
接下來,下一篇要介紹的是範本裡最重要的「文章及留言區塊」程式碼。
「Blogger 範本」系列標題:
一、各種註解方式及區塊的修改
二、標頭、導覽列、側邊欄、頁尾區塊的程式碼
三、文章及留言區塊的程式碼
➢➢快速選單: 123
以下大標題依照範本中出現的順序排列──
一、官方導覽列
<b:widget id='Navbar1' locked='true' title='導覽列' type='Navbar'>
<b:includable id='main'>
.
. 官方導覽列程式碼
.
</b:includable>
</b:widget>
1. 這個區塊可參考這個「Blogger中文社群討論串」將其隱藏起來。
2. 建議不要刪除「官方導覽列」這個小工具,因為裡面的程式碼綁定了一些重要功能,例如 "小工具的快速編輯圖示";如果把「官方導覽列」刪了,會導致這些圖示消失而無法快速編輯。因此如果不想看到「官方導覽列」,建議隱藏就好。
二、標頭區塊(HEADER)
1. 整個區塊的範圍
<b:widget id='Header1' locked='true' title='WFU BLOG (標頭)' type='Header'>
.
.
</b:widget>
以上為整個區塊程式碼的範圍;title 後面的藍色字串是自己部落格的名稱。
可參考「第一篇」,將 locked 的參數由 "true" 改為 "false",便可將「標頭」區塊拉到別的位置。
實際的應用可參考「將 Blogger "標籤" 小工具放在導覽列實作」,讓「標頭」區塊的位置跑到「網頁」小工具的下方。
2. 網站名稱
<b:includable id='title'>...</b:includable>
在標頭區塊中,以上區間為顯示 "網站名稱" 的程式碼;其中代表網站名稱的字串為 <data:title/>。
3. 網站敘述
<b:includable id="description">...</b:includable>
在標頭區塊中,以上區間為顯示 "網站敘述" 的程式碼;其中代表網站敘述的字串為 <data:description/>。
三、水平功能導覽列("網頁"小工具)
<b:widget id='PageList1' locked='false' title='網頁' type='PageList'>
.
.
</b:widget>
1. 這個區塊是指官方的「網頁」小工具,以上為整個區塊程式碼的範圍。
「網頁」小工具最好不要移除,否則將來要裝回去可能困難重重,請參考這個案例:「Blogger 中文社群討論串」
因此如果不想顯示官方「網頁」小工具的話,可以在後台選擇將其隱藏起來,如下圖:
2. 如何將「網頁」小工具改成下拉選單,是詢問度很高的功能,可參考以下兩篇文章:
四、側邊欄
側邊欄小工具的程式碼結構都差不多,請按以下範例程式碼舉一反三即可。
以上 A~M 為一般小工具的程式碼結構。
A:紅色字串為小工具的標題字串,通常在範本裡搜尋標題字串就能找到目標小工具區塊。
B:如果這個小工具只有一個程式區段,那麼結構就會是 B~L行這樣,B 行的 id 名稱會是 'main';如果有多個程式區段,那麼就會有多個類似 B~L 行的結構,但是起始的 id 名稱會不同。
C~E:顯示小工具標題的程式碼;如果不想顯示小工具標題,將 D 行註釋起來即可,就像這樣:<!--<h2><data:title/></h2>-->
F~K:這個區間為小工具真正執行的程式碼;如果是「HTML / Javascript」小工具的話,G~I只會顯示 <data:content>,這個字串代表輸入到「HTML / Javascript」小工具的所有程式碼。
J:這一行代表「快速編輯的小圖示」,不過不一定總是在這個位置。
「側邊欄小工具」必須小心的是,儲存在小工具的內容,似乎沒有辦法備份,萬一不小心刪除了小工具,裡面的資料就再也無法恢復!例如我曾誤刪了「網誌清單」小工具,結果裡面的所有網址連結再也無法恢復,只能憑印象一個個手動增加回去,但結果就是一些好網站的網址還是忘了...
因此填入側邊欄小工具的內容,例如各種網址連結資料、「HTML / Javascript」小工具的程式碼,都得自己另外備份才保險。
五、頁尾版權宣告
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
.
.
</b:includable>
</b:widget>
這個小工具如果刪除的話,倒是沒什麼危險性。刪除的方法及替換方式請直接參考「第一篇」→「三、修改小工具的設定」即可。
接下來,下一篇要介紹的是範本裡最重要的「文章及留言區塊」程式碼。
一、各種註解方式及區塊的修改
二、標頭、導覽列、側邊欄、頁尾區塊的程式碼
三、文章及留言區塊的程式碼
➢➢快速選單: 123