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

本篇的內容為 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. 如何將「網頁」小工具改成下拉選單，是詢問度很高的功能，可參考這篇文章：

• 「Blogger導覽列下拉選單__安裝懶人包」

四、側邊欄

側邊欄小工具的程式碼結構都差不多，請按以下範例程式碼舉一反三即可。


以上 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 範本」系列標題：
一、各種註解方式及區塊的修改
二、標頭、導覽列、側邊欄、頁尾區塊的程式碼
三、文章及留言區塊的程式碼

➢➢ 快速選單： １ ２ ３