讓Blogger的標籤能「多層」樹狀分類__（一）基本安裝

(Pic from: I Loathe Multi Level Marketing)過去雖然使用了「兩層式樹狀標籤」來管理，使側邊欄標籤不至於凌亂，不過伴隨著文章數逐漸增多後，當一個標籤下有了三、四十篇文章，不但訪客爬文花時間，自己找舊資料也麻煩，就算部落格裝了文章分頁的功能，也是要跳好幾頁才能爬完一個標籤的文章。

因此為了訪客的方便，其實也是給自己回頭找資料方便，例如 "Blogger Hack" 這標籤原本有將近三十篇，個人習慣把文章分類細分到一個標籤下最多十幾篇，一個頁面就能顯示該標籤所有文章的狀態，如此完全不需要跳頁就能一覽該標籤的文章；以上就是著手構思多層次樹狀標籤的源起。

2013.1.4 公告

樹狀標籤更新版本已經發佈，請「按此跳至新版頁面」，安裝新版本可避免舊版本會發生的狀況與問題。


一、基本功能

基本安裝的版本包含了以下基本功能：

1. 自訂要展開的層數

2. 每個大分類、次分類都有開合開關

3. 每個大分類、次分類標籤都能統計文章數

4. 可選擇是否顯示大分類、次分類的統計文章數


二、準備動作

1. 跟「兩層式樹狀標籤」一樣，先將 Blogger 所有文章的標籤改為 "AAA-BBB" 這樣的階層標籤格式，請參考下圖──



以本文的標籤為例，原本正常的標籤名稱是「多層樹狀分類」，但要使用這個樹狀標籤系統的話，必須將標籤名稱改為階層式，彼此之間用 "-" 分隔開，就像上圖一樣，將標籤改為「電腦-Blogger Hack-樹狀標籤-多層樹狀標籤」，這樣系統才能辨別。由於本版本支援多層次標籤，想分幾層就能分幾層，例如 "AAA-BBB-CCC-DDD-EEE" 就能分成五層囉！而文章數不多的情況下，一開始只要兩層就夠用了；隨著文章數增多再來增加層級進行管理。

2012.12.15 增補

【留言 #22】發生了標籤名稱使用單引號「'」讓程式當掉的結果，由於單、雙引號「'」「"」這兩個符號在 js 裡面當成字串的話會讓程式當掉，請避免用這兩個符號當標籤名稱。

另外，標籤名稱也請避免使用全形符號，因為常會造成 Blogger 的編碼錯誤而讓程式當掉。

2. 到 Blogger 後台 → 範本 → 修改 HTML

3. 接著把下面的 Javascript 插入 </head> 的前面：

<script type="text/javascript">
var Category_Name = ["電腦","休閒","理財"];
</script>
  (1) 如果安裝過兩層式樹狀標籤，這個動作是重複的，就不必再做了。
  (2) 以上紅色的字串請改為想要的大分類名稱（就是標籤格式 "AAA-BBB" 中的 AAA）。

  (3) 要填入幾個大分類都可以，填入的順序就是在側邊欄由上到下顯示出來的順序。

  (4) 字串必須放在雙引號內，每個字串用逗號隔開；最後一個字串的雙引號後面不能有逗號。



三、安裝主程式碼

如果在側邊欄有新增「標籤」這個小工具的話，相信在範本內可找到類似以下的原始碼：（沒有的話請先安裝「標籤」小工具）

    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
接著將以上全部的幾十行程式碼，全部置換為以下內容（如果安裝過「兩層式樹狀標籤」，就沒有以上內容，請將舊的兩層式樹狀標籤程式碼置換為以下內容，小心！請先備份範本）：


存檔後重新檢視網頁就可以看到效果，請參考本站右邊的側邊欄；不過會發現不完全一樣對不對？除了圖示、間隔有調整過，因為本篇只是基本安裝，而標籤「全展開」、「全收起」的功能，為了不讓本文版面太凌亂，會另開一篇說明；且某些開合的圖案經過 Blogger 處理後會變形，這也需要另外一篇完整的文章來說明。

2012.8.25 補充

留言 #16 Marst Lee 遇到特殊的狀況，複製程式碼時，會連程式碼的編號 A. B. C. 都一起複製，但是若使用市佔率較普遍的瀏覽器，不太會發生把編號也一起複製的情形；Marst Lee 使用的瀏覽器名稱為「360極速瀏覽器」，也請複製時注意一下若發生連編號也複製的情形時，建議改用 Chrome、Fire、IE 等本部落格測試正常的瀏覽器複製。

四、注意事項

目前測試的結果發現有兩點需要注意：

1. 如果設定了不存在的大分類名稱，會造成版面亂掉：例如 Category_Name 裡面設定了 "AAA","BBB" 兩個大分類，實際上部落格若是沒有一篇文章是用到 "BBB" 這個大分類的話，那麼當程式碼讀不到 "BBB" 這個分類時，就會有版面的問題。也許某些站長會有習慣把大分類設好，再來慢慢寫文章，省得常常新增大分類，這是可以理解的；如果有這方面的需求請另外告知，再來想想怎麼改程式碼。

2. 任何大分類、次分類名稱請不要當作真實的標籤名稱：例如設定了 "健康-飲食-早餐" 這個標籤後，大分類是 "健康"、次分類是 "健康-飲食"，真實標籤名稱是 "早餐"，那麼之後請不要把其他文章的標籤設成 "健康" 或是 "健康-飲食"，因為原本這兩個分類名稱都會各自統計子標籤的文章數目；如果再把標籤設成 "健康" 或是 "健康-飲食"，每個標籤也都會有自己的文章數目，那麼系統就分不出 "健康" 到底是分類還是標籤，也就不知道要怎麼統計文章數目了，希望這樣的說明能夠理解。


五、自訂參數、版面配置

如果滿意系統預設的參數、版面配置，那麼就可以開始使用了；如果想要自訂參數、版面配置，請繼續往下看。

C：所有紅字的部分都是可以改的參數──

  showLevel：預設顯示兩層的樹狀標籤，如果想顯示三層就填入 3，以此類推。
2012.7.27 增補

把 showlevel 的參數改為 1，則預設只會顯示一層標籤，就成了預設全部收起的效果。
  showTitleCount：預設會顯示每個大分類、次分類的文章總數；如果不想顯示大分類、次分類的文章總數，請填入 "N"。
  openLogo：展開樹狀標籤的圖案，可改為自己想要的圖示。
  closeLogo：收起樹狀標籤的圖案，可改為自己想要的圖示。
  listLogo：條列標籤的圖案，可改為自己想要的圖示。
  sp：標籤的分隔符號，可自行定義為別的符號，那麼文章的標籤也要改為自定義的分隔符號。例如：改成 "»" 符號的話，標籤就要改成 "AAA»BBB»CCC" 的格式。

E～H：Loop 所有標籤，將標籤名稱、超連結、文章數等資料存在 tLabel_Data 這個陣列，並且排序。

J～T：一言難盡，總之是判斷哪些標籤的大分類、次分類名稱不需要印出。

V～AG：很難解釋，總之是算出每個大分類、次分類的文章總數。

AH：終於有可以修改的地方了──

  k * 10：這是大分類、次分類縮排的 px 值，10 這個數字可根據自己想要縮排的程度而調整。
  color：這裡的顏色數值決定 "開合圖案" 的顏色。

AJ：style='color: #073763; font-family: \"標楷體\"; font-weight: bold;' 這裡的內容決定大分類、次分類的顏色、字型、字體粗細。

AO：k * 10 的改法跟 AH 行一樣，這裡是設定真實標籤名的縮排程度。

AQ～BF：呃...嗯...總歸就是找出開合區域的終點，印出 </div>。

BL：如果每個大分類之間不想要空一行，可以把 <p/> 刪掉。

以上便是大致可修改的地方，每個人喜歡的顏色、圖示、配置、長寬都不一樣，如果改哪裡還有問題請再個別提出了，下一篇的內容為樹狀標籤全部開合的修改方法；如果有排序的問題、開合圖案字元想使用圖檔，請看第三篇。


「讓Blogger的標籤能多層樹狀分類」系列標題：
一、基本安裝
二、全部開合
三、各種疑難雜症
四、更新版本

➢➢ 快速選單：１ ２ ３ ４