2019年11月30日

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

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

Wayne Fu 0 A+
blogger-nav-tab-color-change.jpg-讓 Blogger 導覽列的頁籤連結點擊後變色標題的意思也許不太容易能理解,不過搭配圖片就比較清楚了。可參考上方示意圖,出自「WFU 應用精選」,點擊導覽列上的「精選作品」進入該頁面後,這個頁籤的顏色會與其他頁籤不同,能清楚辨識出這個頁面顯示的文章、工具屬於什麼性質。

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




一、官方「標籤」小工具


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

blogger-nav-tab-color-change-1.jpg-讓 Blogger 導覽列的頁籤連結點擊後變色

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

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



二、官方「網頁」小工具


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

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

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



三、修改範本


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

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

blogger-nav-tab-color-change-2.jpg-讓 Blogger 導覽列的頁籤連結點擊後變色

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

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

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

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

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



四、注意事項


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

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


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

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


更多 Blogger 導覽列相關技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP