這功能 Blogger 不必另外寫程式也能做到,但有一些小問題需要解決,本篇會說明如何處理。
一、官方「標籤」小工具
如果「將 Blogger "標籤" 小工具放在導覽列 」,可以實現這個效果,請參考該篇操作說明,版面效果則可參考分站「三國志 11」進行測試,例如下圖為點擊導覽列上標籤頁籤「火攻」的效果:
把「標籤」工具拉到導覽列雖然操作很方便,會自動出現 "頁籤" 變色的效果,但缺點也很明顯:
- 只能放「標籤」連結,無法放其他任何頁面的連結
- 也不能放「首頁」連結
二、官方「網頁」小工具
若導覽列使用最常用的「網頁」小工具,彈性就比較大了,優缺點如下:
- 優點:任何頁面連結、外部網址都能手動加入
- 缺點:
- 加入標籤頁籤稍微麻煩一點,要自行找出標籤頁面的連結
- 而且使用標籤連結時,點擊進入標籤頁面後,頁籤不會變色
為了解決「網頁」小工具使用標籤連結時,進入標籤頁面不會變色的問題,必須修改範本官方 Blogger 語法才行。
三、修改範本
不熟悉語法的話,自行修改範本是非常危險的事,建議讀者先閱讀「備份範本的訣竅」系列文章,再進行以下動作。
備份完範本後,進入 Blogger 後台「主題」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋「網頁」小工具的 ID,通常是
- 圖中可看到已找到「PageList1」這個小工具的區塊
- 請注意 2 處紅色底線
data:link.isCurrentPage 的 Blogger 語法,這就是代表「當網址為頁籤連結時」的意思 - 然而「網頁」小工具此語法對 "標籤頁面連結" 是無效的
因此請將 2 處紅色底線的字串,改為以下字串:
data:blog.canonicalUrl == data:link.href
這段 Blogger 語法的意思是「當頁面標準網址等於頁籤網址時」,此語法可相容每種頁面,包含 "標籤" 頁面,以及行動版頁面。
改完後儲存即可看到效果。
四、注意事項
雖然以上語法在邏輯處理上都沒問題,但執行起來還是遇上一些麻煩:
- 標籤使用「中文」字串時,
data:blog.canonicalUrl 所代表的網址,以及data:link.href 所代表的網址,其中一個會被編碼 - 導致一個有中文字串、一個是英數字串,兩者字串不相等,所以頁籤無法變色
- 另外連結網址也不可使用「相對網址」(省略 http 傳輸協定、或省略網域),必須使用「絕對網址」,也就是完整的 http 網址
- 否則兩邊的字串一樣判定不相等
最後整理一下使用本篇這個功能時,需注意的地方:
- 為文章另外設定「英文標籤」
- 設定連結時需使用「絕對網址」
更多 Blogger 導覽列相關技巧:
沒有留言:
張貼留言注意事項:
◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。