標題的意思也許不太容易能理解，不過搭配圖片就比較清楚了。可參考上方示意圖，出自「WFU 應用精選」，點擊導覽列上的「精選作品」進入該頁面後，這個頁籤的顏色會與其他頁籤不同，能清楚辨識出這個頁面顯示的文章、工具屬於什麼性質。這功能 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 官方範本及佈景主題」→ 不建議對範本進行修改！
◎ 若留言要輸入語法，"<"、">"這兩個符號請用其他符號代替，否則語法會消失！
◎ 為了過濾垃圾留言，所有留言不會即時發佈，請稍待片刻。
◎ 本站「已關閉自刪留言功能」。