讓 Blogger 導覽列的頁籤連結點擊後變色

標題的意思也許不太容易能理解，不過搭配圖片就比較清楚了。可參考上方示意圖，出自「WFU 應用精選」，點擊導覽列上的「精選作品」進入該頁面後，這個頁籤的顏色會與其他頁籤不同，能清楚辨識出這個頁面顯示的文章、工具屬於什麼性質。

這功能 Blogger 不必另外寫程式也能做到，但有一些小問題需要解決，本篇會說明如何處理。

一、官方「標籤」小工具

如果「將 Blogger "標籤"小工具放在導覽列 」，可以實現這個效果，請參考該篇操作說明，版面效果則可參考分站「三國志 11」進行測試，例如下圖為點擊導覽列上標籤頁籤「火攻」的效果：



把「標籤」工具拉到導覽列雖然操作很方便，會自動出現 "頁籤"變色的效果，但缺點也很明顯：

• 只能放「標籤」連結，無法放其他任何頁面的連結
• 也不能放「首頁」連結

二、官方「網頁」小工具

若導覽列使用最常用的「網頁」小工具，彈性就比較大了，優缺點如下：

• 優點：任何頁面連結、外部網址都能手動加入
• 缺點：
  
  • 加入標籤頁籤稍微麻煩一點，要自行找出標籤頁面的連結
  • 而且使用標籤連結時，點擊進入標籤頁面後，頁籤不會變色

為了解決「網頁」小工具使用標籤連結時，進入標籤頁面不會變色的問題，必須修改範本官方 Blogger 語法才行。

三、修改範本

不熟悉語法的話，自行修改範本是非常危險的事，建議讀者先閱讀「備份範本的訣竅」系列文章，再進行以下動作。

備份完範本後，進入 Blogger 後台「主題」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋「網頁」小工具的 ID，通常是 PageList1或 PageList2這樣的字串，如下圖：

• 圖中可看到已找到「PageList1」這個小工具的區塊
• 請注意 2 處紅色底線 data:link.isCurrentPage的 Blogger 語法，這就是代表「當網址為頁籤連結時」的意思
• 然而「網頁」小工具此語法對 "標籤頁面連結"是無效的

因此請將 2 處紅色底線的字串，改為以下字串：

data:blog.canonicalUrl == data:link.href

這段 Blogger 語法的意思是「當頁面標準網址等於頁籤網址時」，此語法可相容每種頁面，包含 "標籤"頁面，以及行動版頁面。

改完後儲存即可看到效果。

四、注意事項

雖然以上語法在邏輯處理上都沒問題，但執行起來還是遇上一些麻煩：

• 標籤使用「中文」字串時，data:blog.canonicalUrl所代表的網址，以及 data:link.href所代表的網址，其中一個會被編碼
• 導致一個有中文字串、一個是英數字串，兩者字串不相等，所以頁籤無法變色
• 另外連結網址也不可使用「相對網址」(省略 http 傳輸協定、或省略網域)，必須使用「絕對網址」，也就是完整的 http 網址
• 否則兩邊的字串一樣判定不相等

最後整理一下使用本篇這個功能時，需注意的地方：

• 為文章另外設定「英文標籤」
• 設定連結時需使用「絕對網址」