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

「多層樹狀標籤」是開站以來，Blogger 最熱門的工具，由於與第二名的差距太大，相信將來寶座的位置也不太會變動。

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

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

一、運作規則及準備動作

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

儲存後即可看到效果。

四、官方新版 RWD 範本

2018.1.14 新增：

如果使用「官方新版 RWD 範本」的話，以上修改方式無效，請改用以下方法。

請到後台「主題」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </body> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

<!-- 樹狀標籤只顯示真實標籤 start -->
<script>
//<![CDATA[
$(".post-labels a").each(function() {
var $this = $(this),
label = $this.html(),
l;
if (label.indexOf("-") > 0) {
l = label.split("-").length;
label = label.split("-")[l - 1];
}
$this.html(label);
});
//]]>
</script>
<!-- Designed by WFU BLOG -->

第 1 行可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。

樹狀標籤相關文章：