「多層樹狀標籤」是開站以來，Blogger 最熱門的工具，由於與第二名的差距太大，相信將來寶座的位置也不太會變動。不過樹狀標籤有一個小缺點，其標籤命名格式為「AAA-BBB-CCC」，當顯示在網頁上時，稍嫌佔版面了一些。如果一篇文章使用了多個樹狀標籤，那麼效果就類似本文開頭的示意圖。
+Alisha艾莉莎 提出了這個問題，希望標籤的版面能簡潔一些，於是有了本文的靈感。如果讀者安裝過樹狀標籤的話，那麼這個可算是必裝的工具。
一、運作規則及準備動作
1. 實際標籤名稱
這個工具會讓樹狀標籤，只顯示最後一個實際標籤的名稱。例如原本標籤名稱與實際顯示的字串分別為：
- 「AAA-BBB-CCC」→ 顯示 "CCC"
- 「AAA-BBB-CCC-DDD」→ 顯示 "DDD"
2. 準備動作
根據以上規則，最好重新檢視一下樹狀標籤的命名，例如原本的標籤名稱若是「電腦-Blogger-筆記」，使用這個工具後，會顯示真實標籤名稱 "筆記"，但這樣的命名方式，讀者會看得一頭霧水對吧，到底是哪方面的筆記呢？
說不定還有另外一個標籤名稱叫做「電腦-網頁設計-Javascript-筆記」，根據規則，一樣只會顯示 "筆記"，這樣就造成混淆了。
因此，最後面的真實標籤名稱，需要重新斟酌如何名命，比較好的調整建議是：
- 「電腦-Blogger-筆記」→「電腦-Blogger-Blogger 筆記」
- 「電腦-網頁設計-Javascript-筆記」→「電腦-網頁設計-Javascript-JS 筆記」
二、效果展示
使用前的樹狀標籤版面大致是這樣：
使用後的樹狀標籤，改以真實標籤名稱顯示，讓版面精簡：
三、安裝程式碼
在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。
請到後台「範本」→「編輯 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 -->儲存後即可看到效果。
樹狀標籤相關文章：