2013年3月1日 星期五

[教學]Blogger 範本﹍(2) 標頭、導覽列、側邊欄、頁尾區塊的程式碼

[教學]Blogger 範本﹍(2) 標頭、導覽列、側邊欄、頁尾區塊的程式碼

Wayne Fu 0 A+
本篇的內容為 Blogger 範本各個區塊的程式碼整理,包含除了文章區塊外的所有區塊(標頭、導覽列、側邊欄、頁尾區塊),並附帶簡單說明。建議參考系列文「第一篇」,在範本中加上註解,如此日後搜尋、修改都很方便。

以下大標題依照範本中出現的順序排列──


一、官方導覽列

<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 "標籤" 小工具放在導覽列實作」,讓「標頭」區塊的位置跑到「網頁」小工具的下方。

2015.3.3 補充:可參考「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. 這個區塊是指官方的「網頁」小工具,以上為整個區塊程式碼的範圍。

「網頁」小工具最好不要移除,否則將來要裝回去可能困難重重。因此,如果不想顯示官方「網頁」小工具的話,可以在後台選擇將其隱藏起來,如下圖:




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>

這個小工具如果刪除的話,倒是沒什麼危險性。刪除的方法及替換方式請直接參考「第一篇」→「三、修改小工具的設定」即可。



接下來,下一篇要介紹的是範本裡最重要的「文章及留言區塊」程式碼。


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

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