[教學]將 Blogger「標籤」小工具放在導覽列實作

(Pic from: Office Worker)之前在「+Shu-Yuan Tien ── Office Worker」看到標籤出現在導覽列覺得挺神奇的，研究了一陣後發現可以在後台先把導覽列用滑鼠拖曳到網頁最上方，接著再把「標籤」小工具拖曳到導覽列，那麼網站所有的標籤就會自動出現在導覽列，不必像以前導覽列的使用方式，得一個個手動把標籤連結加上去。

這給了我一個靈感，如果把「標籤」拉到導覽列，而側邊欄其他工具拉到最底下，那麼整個版面可以全部留給文章，閱讀起來實在太舒服了，而且所有重要的導覽功能仍在網頁上方，訪客不會找不到想要的功能，就像我的「三國志分站」這樣的效果。

只不過在實作時遇上了一些要解決的狀況：

1. 分站使用的官方範本為「圖片視窗」，導覽列的頁籤有圓角效果，當導覽列拉到網頁最上方時，頁籤變成飄浮在空中的感覺(囧～)。
2. 標籤拉到導覽列，按下標籤時，該標籤會顯示不正常。

最後花了一番功夫解決，以下第一點為大致說明 Blogger 運作的原理，想直接看安裝及解決過程的實作請跳「二、調整導覽列」。


一、Blogger 運作的原理

標題的圖片比較不清楚，下面這張圖比較清楚：



其實不止「標籤」小工具，其他小工具也可以拉到導覽列，只是使用「標籤」的效果會比較好。而拉到導覽列的小工具，在範本裡每個小工具的項目會被自動加上 <ul>、<li> 的語法，再配合預設的 CSS 設定 (float: left)，標籤就會乖乖在導覽列排列整齊。

接下來根據不同範本會有不同狀況，有的範本做完以上動作就可以收工了；但如果是官方範本「圖片視窗」的導覽列(不確定其他範本會不會也有這個情形)，範本裏自動新增的判斷句會影響點擊頁籤後的效果──

判斷1: 如該頁籤的網址就是當前的網址，該頁籤套用某個 CSS 效果。
判斷2: 該頁籤的網址非當前的網址，顯示預設的效果。

在「圖片視窗」這個範本，「標籤」小工具被當成導覽列後，標籤的程式碼跟原本的導覽列程式碼是有些出入的，導致上面提到的判斷句會執行錯誤，點擊頁籤後會變成下面的狀況──




點擊後會發生標籤名稱無法正常顯示的情形。


另外就是導覽列拉到網頁最上方的情形，如果原本導覽列不是頁籤的形狀，拉上去看起來就不會奇怪；但如果是頁籤的形狀，拉到網頁最上方看起來就會像下圖這般──



只有兩個圓角的頁籤形狀浮在空中很奇怪，以下就先來說明怎麼調整原本導覽列的位置及形狀。



二、調整導覽列



1. 版面配置：如上圖，在後台版面配置我將導覽列(就是「網頁」小工具)拉到最上面，側邊欄已經被我撤掉，文章區塊的寬度調成整個版面的寬度。請注意「網頁」、「標頭」、「標籤」這三個要黏在一起，而「標籤」要跟下方的「網誌文章」有一點間隔。

2. 調整位置：導覽列離網頁上方有一段距離不好看，需要細調一下 CSS 參數，到 Blogger 後台打開範本文件 → 編輯 HTML → 搜尋 PageList1 這個字串可找到這個小工具的區塊。

往下幾行可找到 <div class='widget-content'> 這個字串，改成 <div class='widget-content' style='margin-top: -25px;'> 後是我覺得比較滿意的位置。但是每個人的範本不一樣，-25px 這個參數需要根據自己的版面來調整，建議可參考「Google Chrome 開發人員工具__調整部落格版面實作」這一篇的方法來調整比較方便，節省不斷儲存範本、重整頁面的時間。

3. 調整形狀、外框大小：飄在空中的頁籤形狀很醜(只有兩個圓角)，若改成四個圓角比較好看(IE8(含)以下不支援圓角效果)。接續上個動作，繼續往下找到這段程式碼：

<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
把這段程式碼的 a 元素塞入圓角語法就搞定了，加入以下紅字部分的語法：

<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href' style='border-radius: 10px; padding: 0px 5px;'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href' style='border-radius: 10px; padding: 0px 5px;'><data:link.title/></a></li>
</b:if>
</b:loop>

除了圓角語法的 10px, 另外 padding 的參數 0px 5px 可調整外框的大小(第一個參數 0px 代表文字到上、下外框的距離；第二個參數 5px 代表文字到左、右外框的距離)，這些參數都可自行調整，直到找到自己滿意的效果。同樣建議用「Google Chrome 開發人員工具」來作細部調整。


三、調整標籤小工具

如果你的範本如同「一、Blogger 運作的原理」所提，出現標籤點擊前、點擊後的異狀，才需要進行以下動作。

一樣到 Blogger 後台打開範本文件 → 編輯 HTML → 搜尋 <div expr:class='"widget-content " + data:display + "-label-widget-content"'> 找到標籤小工具的區塊(如果不只一個標籤小工具，請自行判斷一下要改的是哪一個)。

往下會找到一段 <b:loop ... 一直到 </b:loop> 的程式碼，大概像下面這樣

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
把以上所有程式碼置換為以下程式碼──

<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<li class='selected'><a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a></li>
<b:else/>
<li><a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a></li>
</b:if>
</b:loop>
其原理就是參照「二、調整導覽列」的程式碼形式，當網址為點擊的標籤頁面時，在該 li 元素裡面加入 class='selected'；非點擊的標籤頁面時，li 元素保持原狀，這樣顯示就不會出錯了。

如果前面還沒看過我的分站效果的話，這裡再提供一次「我的分站連結」，可以預視一下以上動作修改後的效果。


四、小結

本篇的實作算是有點客製化，適合想要舒適閱讀版面的部落格，且側邊欄小工具不能太多，剛好在我的分站用得上。說不定看完本篇之後，你也可以想出不錯的版面應用方式。

Blogger 導覽列相關技巧：