2015年4月1日 星期三

讓 Blogger 樹狀標籤只顯示真實標籤名稱

讓 Blogger 樹狀標籤只顯示真實標籤名稱

Wayne Fu 0 A+
blogger-tree-label-simplify多層樹狀標籤」是開站以來,Blogger 最熱門的工具,由於與第二名的差距太大,相信將來寶座的位置也不太會變動。

不過樹狀標籤有一個小缺點,其標籤命名格式為「AAA-BBB-CCC」,當顯示在網頁上時,稍嫌佔版面了一些。如果一篇文章使用了多個樹狀標籤,那麼效果就類似本文開頭的示意圖。

+Alisha艾莉莎 提出了這個問題,希望標籤的版面能簡潔一些,於是有了本文的靈感。如果讀者安裝過樹狀標籤的話,那麼這個可算是必裝的工具。



一、運作規則及準備動作


1. 實際標籤名稱

這個工具會讓樹狀標籤,只顯示最後一個實際標籤的名稱。例如原本標籤名稱與實際顯示的字串分別為:

  • 「AAA-BBB-CCC」→ 顯示 "CCC"
  • 「AAA-BBB-CCC-DDD」→ 顯示 "DDD"


2. 準備動作

根據以上規則,最好重新檢視一下樹狀標籤的命名,例如原本的標籤名稱若是「電腦-Blogger-筆記」,使用這個工具後,會顯示真實標籤名稱 "筆記",但這樣的命名方式,讀者會看得一頭霧水對吧,到底是哪方面的筆記呢?

說不定還有另外一個標籤名稱叫做「電腦-網頁設計-Javascript-筆記」,根據規則,一樣只會顯示 "筆記",這樣就造成混淆了。

因此,最後面的真實標籤名稱,需要重新斟酌如何名命,比較好的調整建議是:

  • 「電腦-Blogger-筆記」→「電腦-Blogger-Blogger 筆記
  • 「電腦-網頁設計-Javascript-筆記」→「電腦-網頁設計-Javascript-JS 筆記



二、效果展示


使用前的樹狀標籤版面大致是這樣:

blogger-tree-label-simplify-1


使用後的樹狀標籤,改以真實標籤名稱顯示,讓版面精簡:

blogger-tree-label-simplify-2



三、安裝程式碼


在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

請到後台「範本」→「編輯 HTML」,游標點進範本區塊,再搜尋以下字串:

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

如果你搜尋到不只一個結果,代表你的標籤在多處顯示,那麼可全部修改。

接著將以上字串,置換為以下程式碼:

<!-- 樹狀標籤只顯示真實標籤 start -->
<a expr:href='data:label.url' rel='tag'>
<script>
(function() {
var oldLabel = "<data:label.name/>".split("-"),
l = oldLabel.length,
newLabel = oldLabel[l - 1];
document.write(newLabel);
})();
</script>
</a>
<!-- 樹狀標籤只顯示真實標籤 end, designed by WFU BLOG -->


儲存後即可看到效果。


樹狀標籤相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

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

TOP