公告版位

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


(Pic from: Office Worker)


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

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

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

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


一、Blogger 運作的原理

標題的圖片比較不清楚,下面這張圖比較清楚:



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

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

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

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




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


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



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

全文已移往WFU BLOG 主站,請點:「將 Blogger「標籤」小工具放在導覽列實作

創作者介紹

WFU BLOG

Wayne Fu 發表在 痞客邦 PIXNET 留言(8) 人氣()


留言列表 (8)

發表留言
  • Phil Ko
  • 感謝詳細的介紹
  • Wayne Fu
  • <2759528165828202351>(以上內容請勿刪除,從括號之後開始留言)不客氣~ ^^
  • 白色羽毛
  • 現在的範本導覽列在右上角一點點
    也不能移動
    請問還有方法可以改成將標籤設在導覽列嗎?
    覺得這樣版面看起來很舒服
    謝謝你
  • Wayne Fu
  • <1903115383947995514>(以上內容請勿刪除,從括號之後開始留言)你說的右上角是指「資訊主頁 、登出」那一欄嗎,如果是的話,那不算導覽列。

    Blogger 的導覽列在後台-->網頁-->將網頁顯示為「最上層標籤」,這樣就能顯示出來了。我看你的文章標籤太多了,並不適合放在導覽列, 建議你安裝「<a href="http://wayne-fu.blogspot.tw/2013/01/multi-tree-label-update.html" rel="nofollow">Blogger文章分類__多層樹狀標籤</a>」比較適合。
  • 白色羽毛
  • <6005790699166969603>(以上內容請勿刪除,從括號之後開始留言)您好,我說的導覽列是在"版面配置"右上角有一個導覽列,那個框框下有一個"編輯",點進去就只有"NAVBAR"組態可以選擇,我就是因為看了版主的"多層樹狀標籤"這一文,剛剛才努力改好了文章分類,現在要開始進行語法部份,希望可以成功,謝謝你~
  • Wayne Fu
  • <386703659081752499>(以上內容請勿刪除,從括號之後開始留言)navbar 那個是官方的導覽列,我們沒辦法作什麼更動。如果要使用像我網頁上方那一排「首頁、本站使用的hack及工具、文章列表...」,那才是能自訂的導覽列,在版面配置裡叫做 "網頁" 小工具. 祝你樹狀標籤安裝成功!
  • 白色羽毛
  • <1155462764913952525>(以上內容請勿刪除,從括號之後開始留言)我剛安裝樹狀標籤,可是不知道哪裡出了錯?沒有出現,只出現全部收合(我要哭了),想請問這情況是發生什麼事?謝謝你
  • Wayne Fu
  • <4641988952022045438>(以上內容請勿刪除,從括號之後開始留言)我看了你的標籤,大分類字串使用了全形句號 "。", blogger 系統常常對全形符號的編碼解讀不一樣,所以請你先不要使用全形符號,例如改用半形符號代替,這樣應該就 ok 了.

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