2012年12月12日

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

A+

(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 導覽列相關技巧:

8 則留言:

  1. <2759528165828202351>(以上內容請勿刪除,從括號之後開始留言)不客氣~ ^^

    回覆刪除
  2. 現在的範本導覽列在右上角一點點
    也不能移動
    請問還有方法可以改成將標籤設在導覽列嗎?
    覺得這樣版面看起來很舒服
    謝謝你

    回覆刪除
  3. <1903115383947995514>(以上內容請勿刪除,從括號之後開始留言)你說的右上角是指「資訊主頁 、登出」那一欄嗎,如果是的話,那不算導覽列。

    Blogger 的導覽列在後台-->網頁-->將網頁顯示為「最上層標籤」,這樣就能顯示出來了。我看你的文章標籤太多了,並不適合放在導覽列, 建議你安裝「Blogger文章分類__多層樹狀標籤」比較適合。

    回覆刪除
  4. <6005790699166969603>(以上內容請勿刪除,從括號之後開始留言)您好,我說的導覽列是在"版面配置"右上角有一個導覽列,那個框框下有一個"編輯",點進去就只有"NAVBAR"組態可以選擇,我就是因為看了版主的"多層樹狀標籤"這一文,剛剛才努力改好了文章分類,現在要開始進行語法部份,希望可以成功,謝謝你~

    回覆刪除
  5. <386703659081752499>(以上內容請勿刪除,從括號之後開始留言)navbar 那個是官方的導覽列,我們沒辦法作什麼更動。如果要使用像我網頁上方那一排「首頁、本站使用的hack及工具、文章列表...」,那才是能自訂的導覽列,在版面配置裡叫做 "網頁" 小工具. 祝你樹狀標籤安裝成功!

    回覆刪除
  6. <1155462764913952525>(以上內容請勿刪除,從括號之後開始留言)我剛安裝樹狀標籤,可是不知道哪裡出了錯?沒有出現,只出現全部收合(我要哭了),想請問這情況是發生什麼事?謝謝你

    回覆刪除
  7. <4641988952022045438>(以上內容請勿刪除,從括號之後開始留言)我看了你的標籤,大分類字串使用了全形句號 "。", blogger 系統常常對全形符號的編碼解讀不一樣,所以請你先不要使用全形符號,例如改用半形符號代替,這樣應該就 ok 了.

    另外,樹狀標籤後續如果還有安裝上的問題,麻煩留言到相關文章,其他訪客若有類似問題時可以參考,謝謝!

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。