「多層樹狀標籤」是本站最熱門的 Blogger 工具，不過安裝、使用有問題而留言提問的數量，也是最多的。原因可能是安裝方式比較複雜，沒那麼容易一次成功。這次 V2 改版使用了懶人包的安裝方式，相信可以大幅減少出錯的機率。同時改版最大的不同是加入「切換摘要及標題模式」，這個許多站長想要的功能。
不過也許多數站長只需要單純的樹狀標籤功能，因此決定將「切換摘要及標題模式」功能以另外的版本號發佈，區別如下：
- V2.0：安裝懶人包
- V2.1：「切換摘要及標題模式」
以下先介紹改版的特點、修正的部分，想要直接安裝懶人包請直接跳到「二、準備動作」。
(圖片出處: pixabay.com)
一、特點
V2.0 版的效果大致如下：
1. 修正功能
舊版留言提出了不少狀況，以下是新版改善的部分：
- 舊版的標籤名稱若使用 "全形符號"或 "特殊字元"，有可能讓程式執行錯誤；新版修正了這個現象。
- 舊版只能顯示樹狀標籤，也就是 "AAA-BBB"這樣的階層格式；新版也能顯示一般非樹狀的標籤名稱。
- 舊版需要在範本中修改原始碼，有可能找不到位置或改錯地方；新版只要直接新增程式碼就好，比較簡單。
2. 新增功能
- 如果熟悉 CSS，新版可以自訂所有的版面樣式。
- 最上方新增「導航欄位」
- 導航欄位可選擇加入「切換摘要及標題模式」的功能
二、準備動作
若曾安裝舊版的話，請先刪除舊版程式碼。請務必做完以下三個動作，再開始安裝程式碼：
1. 設定標籤小工具
若沒安裝過「標籤」小工具的話，可到後台 → 版面配置 → 新增一個「標籤」小工具 → 填入標題後，如下圖：
將紅框處分別勾選 "按字母排序"、"清單"、"顯示每個標籤的文章數"。
如果有某些標籤不想顯示出來，第一個選項可改為「選取的標籤」。
2. 找出標籤小工具的 ID
到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋「標籤」小工具的標題名稱，例如我設定為 "分類"：
如上圖，我的標題名稱 "分類"，同一行紅框處的 ID 字串為 "Label1"，請記下你的 ID 字串。
3. 設定文章標籤
請先將部落格所有文章的標籤，改為樹狀標籤的格式。例如原本的標籤名稱為 "CCC"，請改成 "AAA-BBB-CCC"這樣的形式。
上圖這篇文章原本的標籤名稱為 "多層樹狀標籤"，現在改為四層標籤，大分類名稱為 "電腦"，其餘請見圖中說明。
若沒事先為文章設定樹狀標籤的話，那麼這個工具將無法顯示階層分類的效果。
三、安裝程式碼
在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。
1. JQUERY + CSS
請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/*樹狀標籤 V2*/
#Label1 {
display: none;
}
#tl2_main,
#tl2_nav {
font-size: 13px;
font-weight: bold;
}
#tl2_nav {
background-color: #eee;
margin-bottom: 10px;
padding: 3px;
}
#tl2_nav a {
display: inline-block;
box-sizing: border-box;
width: 50%;
text-align: center;
border-left: 1px dashed #aaa;
}
#tl2_nav a:first-child {
border-left: 0;
}
#tl2_nav a,
#tl2_main a {
text-decoration: none;
}
#tl2_main img {
vertical-align: middle;
}
.tl2_category {
margin-top: 2px;
}
a.tl2_catText {
}
.tl2_subArea {
margin: 0 0 5px 10px;
}
.tl2_label {
margin-left: 5px;
}
</style>第一行綠色字串可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。
紅色字串 "Label1"請改為「二、準備動作」→「2. 找出標籤小工具的 ID」→ 自己的 ID 字串
如果熟悉 CSS，可自行修改其餘 CSS 參數。
2. 安裝主程式
接著請搜尋
以下參數修改請參照以上程式碼行號：
E：紅色字串請改為自己的標籤小工具 ID，也就是前面「二、準備動作」→「2. 找出標籤小工具的 ID」→ 自己的 ID 字串
F：最重要的設定，這裡設定了所有要顯示出來的樹狀標籤 "大分類"字串，請參考綠色字串的說明
G：預設會打開的標籤層數
H：預設大分類、次分類會顯示文章數
I~K：預設使用的開合圖示、標籤圖示，也可使用圖檔
L~M：導航欄使用的 "展開"、"收合"提示圖示及文字，也可使用圖檔
存檔後即可看到效果，也可參考本站側邊欄最上方的效果。
四、相關工具
使用這個樹狀標籤後，也建議順便參考以下相關的使用技巧或工具：
1. 批次修改標籤
如果網站有大量文章需要批次修改標籤，建議參考這篇文章，以避免 Blogger 操作上的一個大 Bug：
2. 簡化樹狀標籤
如果覺得樹狀標籤格式太長，版面不太好看，建議安裝以下這個工具：
使用前的樹狀標籤版面大致是這樣：
使用後的樹狀標籤，改以真實標籤名稱顯示，讓版面精簡：
五、常見 FAQ
發問前建議先檢視以下常見 FAQ，若不在下列事項，留言請附上網址方便檢視異常狀況。
Q1: 為何安裝完畢後，無法顯示樹狀標籤？
Ans: 請一一檢視是否完成以下動作：
- 文章的標籤是否已經設定為樹狀標籤的格式 →「二、準備動作」→「3. 設定文章標籤」
- 標籤小工具是否正確設定 →「二、準備動作」→「1. 設定標籤小工具」
- 程式碼 F 行是否設定了正確的大分類名稱
- 請參考「官方文件」，標籤名稱不要使用這些符號：&<>@!+,#
- 請檢查是否使用了非主流的瀏覽器，複製的的程式碼包含了行號 A、B、C...，這樣程式是無法執行的。請使用本站建議的瀏覽器 Chrome、Firefox、Opera 等複製程式碼，就沒問題了。
Q2: 標籤顯示可以排序嗎？
Ans: 英數可以排序，但中文用 js 是無法排序的。可在次分類自行加上英數符號來達到排序效果，例如 "1.本家"、"2.分家"，或 "A.本家"、"B.分家"類似這樣。
Q3: 外表看起來沒問題，但是要打開收合的分類會一直縮回去，根本來不及點？
Ans: 這是舊版讀者的留言，並自行找到問題所在：「我原本使用chrome，後來發現IE很正常，chrome 改用無痕模式試，結果沒問題，一個一個試插件，發現是Adblock Pro這個插件的問題，必須整個關閉才會正常，就算加到例外問題也還是存在，所以我沒問題了」
另外若是瀏覽器裝了其他外掛、網站裝了其他外掛、或是非官方範本，都有可能跟這個工具相衝突，建議自行一一移除外掛，來找出可能導致衝突的外掛程式。
更多實用工具：