Blogger 文章分類﹍樹狀標籤 V2.0 -- 安裝懶人包

「多層樹狀標籤」是本站最熱門的 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 搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/*樹狀標籤 V2*/
#Label1 {
display: none;
overflow: auto;
}

#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. 安裝主程式

接著請搜尋 </body> 這個字串，找到後在此字串的前一行，插入以下程式碼：


以下參數修改請參照以上程式碼行號：

E：紅色字串請改為自己的標籤小工具 ID，也就是前面「二、準備動作」→「2. 找出標籤小工具的 ID」→ 自己的 ID 字串

F：最重要的設定，這裡設定了所有要顯示出來的樹狀標籤 "大分類" 字串，請參考綠色字串的說明

G：預設會打開的標籤層數，填入 1 為全部收起的狀態

H：預設大分類、次分類會顯示文章數

I~K：預設使用的開合圖示、標籤圖示，也可使用圖檔

L~M：導航欄使用的 "展開"、"收合" 提示圖示及文字，也可使用圖檔


存檔後即可看到效果，也可參考本站側邊欄最上方的效果。

四、相關工具

使用這個樹狀標籤後，也建議順便參考以下相關的使用技巧或工具：

1. 批次修改標籤

如果網站有大量文章需要批次修改標籤，建議參考這篇文章，以避免 Blogger 操作上的一個大 Bug：

• Blogger 批次修改標籤的方法及注意事項

2. 簡化樹狀標籤

如果覺得樹狀標籤格式太長，版面不太好看，建議安裝以下這個工具：

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

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




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

五、常見 FAQ

發問前建議先檢視以下常見 FAQ，若不在下列事項，留言請附上網址方便檢視異常狀況。

Q1: 為何安裝完畢後，無法顯示樹狀標籤？

Ans: 請一一檢視是否完成以下動作：

1. 文章的標籤是否已經設定為樹狀標籤的格式 →「二、準備動作」→「3. 設定文章標籤」
2. 標籤小工具是否正確設定 →「二、準備動作」→「1. 設定標籤小工具」，同時請特別注意不要勾選「標籤雲」。
3. 程式碼 F 行是否設定了正確的大分類名稱
4. 請參考「官方文件」，標籤名稱不要使用這些符號：「&<>@!+,#」，也不要使用雙引號「"」、單引號「'」，都會讓程式當掉。
5. 請檢查是否使用了非主流的瀏覽器，複製的的程式碼包含了行號 A、B、C...，這樣程式是無法執行的。請使用本站建議的瀏覽器 Chrome、Firefox、Opera 等複製程式碼，就沒問題了。

Q2: 標籤顯示可以排序嗎？

Ans: 英數可以排序，但中文用 js 是無法排序的。可在次分類自行加上英數符號來達到排序效果，例如 "1.本家"、"2.分家"，或 "A.本家"、"B.分家" 類似這樣。


Q3: 外表看起來沒問題，但是要打開收合的分類會一直縮回去，根本來不及點？

Ans: 這是舊版讀者的留言，並自行找到問題所在：「我原本使用chrome，後來發現IE很正常，chrome 改用無痕模式試，結果沒問題，一個一個試插件，發現是Adblock Pro這個插件的問題，必須整個關閉才會正常，就算加到例外問題也還是存在，所以我沒問題了」

另外若是瀏覽器裝了其他外掛、網站裝了其他外掛、或是非官方範本，都有可能跟這個工具相衝突，建議自行一一移除外掛，來找出可能導致衝突的外掛程式。


Q4: 要怎麼讓樹狀標籤在一開始的時候就保持收合的狀態？

Ans: 請看程式碼 G 行的註解


Q5: 留言 #19 討論串詢問，官方新版 RWD 範本的標籤工具，預設會將內容收合，有沒有什麼方法能預設一開始就顯示呢？

Ans: 請在程式碼 P、Q 這兩行之間插入以下這行程式碼──

$(function () {$("#Label1 .collapsible-title").click()});
字串 Label1 請改為你的小工具 ID。


Q6: 留言 #37 討論串詢問，要怎麼在行動版也顯示"樹狀標籤"的功能？

Ans: 請參考「Blogger 行動版範本修改技巧整理」進行設定。

但同時請參照留言注意事項：手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。


更多實用工具：

• 本站使用的 Blogger hack 及工具整理