2015年4月25日

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

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 -->


儲存後即可看到效果。


樹狀標籤相關文章:

3 則留言:

  1. 請問,如果我想要真實標籤的顯示,是顯示階層標籤的「大分類」,也就是第一層的名稱,有沒有辦法這樣處理呢?

    回覆刪除
    回覆
    1. 程式碼 newLabel = oldLabel[l - 1]; 改成 newLabel = oldLabel[0]; 即可

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。