讓Blogger的標籤能樹狀分類__（二）安裝篇

一、準備動作

看完「第一篇」後，對於本篇的程式碼會比較容易理解。若不瞭解程式碼想直接套用也是可以，相較於其他版本的樹狀標籤，本篇文章的程式碼是實測過在 IE 下也能正常執行的，請按以下步驟進行即可：

2012.6.8 公告

本文為 "兩層式" 樹狀標籤，現在已經有新版 "多層式" 樹狀標籤，如果有兩層以上的分類需求，請參考「讓Blogger的標籤能"多層"樹狀分類__（一）基本安裝」

1. 將 Blogger 所有的標籤改為 "AAA-BBB" 的格式，AAA 代表大分類，BBB 代表真正的標籤名稱，舉例來說，如果某文章的大分類是 "電腦"，真正標籤名稱是 "Facebook"，那麼就要將文章的標籤名稱改為 "電腦-Facebook"。標籤命名規則想瞭解進一步的說明，請參考第一篇第三節第 1 點：設定大分類。

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

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

<script type='text/javascript'>

var Category_Name=new Array("電腦","休閒","理財")

function hide(sec)
{
       var e = document.getElementById(sec);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
}

function swap(me,main,alt)
{
me.innerHTML = (me.innerHTML == main) ? alt : main;
}
</script>

(1) 以上紅色的字串請改為想要的分類名稱（就是標籤格式 "AAA-BBB" 中的 AAA）。

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

(3) 字串必須放在雙引號內，每個字串用逗號隔開。


二、主程式碼

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

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

接著將以上全部的幾十行程式碼，全部置換為以下內容：


存檔後重新檢視網頁就可以看到效果，就如同本 Blog 右邊的側邊欄一樣。

2012.5.25 提醒

目前 Blog 右邊側邊欄的樹狀標籤為新版本，支援多層次的樹狀標籤，本文為舊版本只支援兩層的樹狀標籤
之後想要使用依照樹狀標籤排列的文章列表，請參考「Blogger 文章列表＋快速顯示"讚"統計」；想要讓這樣的文章列表動態顯示，請參考「動態檢視 Blogger 文章列表」。

若想瞭解如何修改細項設定的話，請繼續往下看主程式碼的執行流程。


處理大分類：

A: 由於動用到 "for" 迴圈以及判別式，所以主程式碼必須使用 javascript。

E: 利用 "for" 迴圈，一個個處理 "Category_Name" 裡面所有的大分類字串。請小心 "&lt;" 是 "<" 的跳脫碼，某些字元單獨出現沒有用跳脫碼則範本是無法儲存的。

J: 動用到原始碼的部分需利用 document.write 處理，在這行所有標籤被丟進迴圈依序處理。

L: "<data:label.name/>" 存放原始 "AAA-BBB" 格式的標籤名稱，在此將 "AAA" 分解為 "Category" 變數；"BBB" 分解為 "NewLabel" 變數。

如果標籤不是用 "-" 來分隔的話，「OldLabel.search("-")」這裡雙引號內請換成自選的分隔符號。


收合大分類：

N: 當分解出來的 "AAA" (存放在 "Category" 變數) 等於預設大分類名稱 "Category_Name" 的時後──

R: 印出大分類名稱。其實這一行要做的事很多，還包含了收合大分類的功能。

其中 "隱藏、顯示" 切換功能的函數 "hide"，因為大分類之下所有的標籤要同步切換，如果切換的區域錯誤就糟糕了，所以必須將同一個分類的區塊設在同一個 <div> 標籤之內，並且每個分類的 <div> 要取不同的 id，這樣 "hide" 函數才能分辨。

但要手動為不同的 id 取名稱很麻煩，剛好利用 E 行的 "for" 迴圈，將 id 名稱設為 "Category_Name[i]"，這樣每個分類都能自動分配自己 <div> 區塊的 id ──就是獨一無二的分類名稱。

另外可以自行修改的部分有幾個地方：

color : 顏色
font-family : 字型
font-weight : 字體形式
"➥","➷" : 收合的圖案
"《","》" : 分類名稱的裝飾

如果收合的圖案要改用圖檔，請參閱文末 2011.10.23 增補

S: 設定執行 hide 函數時，切換收合的 <div> 區域起始點。


顯示真正標籤：

U: 將分解出來的真正標籤 "BBB"（存放在 "NewLabel" 變數），替換掉原本的標籤名稱，附加超連結功能，顯示標籤文章數。另外，這一行的 "➨" 符號也可自行替換。

Z: 讓 loop 迴圈回頭處理下一個標籤。

2012.5.6 增補

看了「A Casual Place」的樹狀標籤效果後，每個大分類之間應該要空一格效果比較好，因此請修改 AA 行的程式碼：

AA: 第二行的
if (Print_Category_Title[i]==1){document.write("</div>")}
在</div>前面增加<p/>即可，如同以下：
if (Print_Category_Title[i]==1){document.write("<p/></div>")}

解決困難：

以上的流程與概念並不困難，很可惜把這些程式碼串在一起後，要解決的問題不少：

1. 執行 hide 函數時，切換收合的 </div> 區域起點、終點：

起始點 <div> 設在 S 行，似乎終點 </div> 應該設在 W 行的位置；但這樣的話處理每個標籤時，由於不斷迴圈的關係，變成重複執行 S 行與 W 行，重複設定 <div> 與 </div>。

因此必須加入一個機制，讓處理同一個分類的所有標籤時，<div> 只執行最初的第一次，</div> 只執行最後一次。

採取的方法是在 C、H 行設 "Print_Category_Title[i]" 變數，利用 P 行檢查此變數是否為 0，可確保是處理到該分類第一個標籤時才印出大分類、執行 hide 函數、設定 <div> 起點，所以 P 行同時解決了多個問題。

接著處理完該分類第一個標籤時，在 X 行命令 "Print_Category_Title[i]" 等於 1，確保處理該分類第二個之後的標籤, 不會執行 R、S 行。

那麼 </div> 區域終點到底應該在哪裡呢？ J ～ Z 行是 loop 迴圈的頭尾，處理完該分類所有標籤後才會跳到下一行，因此把設立終點的位置放在 Z 行後面，在 AA 行判斷 "Print_Category_Title[i] = 1" 就可印出 </div>。

這時有個變數，一開始設定分類名稱完，如果先把分類設定好但該分類還沒有新增任何文章時，那麼執行 J～Z 後 "Print_Category_Title[i]" 永遠會等於 0，因為執行到 N 行後就會直接跳 Z 行了。

所以 AA 行的這個判斷式非常非常重要！檢查 "Print_Category_Title[i]" 是否為 1，可以讓尚無文章的分類不會執行 </div>。因為無文章的分類並不會執行 S 行來印出 <div>，這樣可以避免 Blogger 多執行一個 </div> 造成版面錯誤。


2. <div>、</div> 錯亂問題：

Blogger 對於範本的內容檢查得很嚴謹，因此就算解決了第 1 點的難題，還是無法成功地儲存範本（常常 hack 範本內容的話應該不是陌生的一件事），debug 了半天才找出來原來是 <div> 與 </div> 的順序跟數量不對稱。

請看 J～Z 的 loop 迴圈之內，S 行內有 <div> 的起點，而我們知道終點在 AA 行。但由於 AA 行是在 loop 迴圈之外，所以 Blogger 在迴圈內找不到 </div> 終點。

所以不得已在loop 迴圈內 W 行加入很白吃的一個判斷式來騙過 Blogger，捏造了個不會發生的 (i==-1)，讓 Blogger 感受到 </div> 的存在...Google 也懂「雙雙對對，萬年富貴」？

不過到此還是不能儲存，因為這樣一來換成 AA 行的 </div> 落單了，在它之前找不到 <div> 的存在。好的，如你所願，一樣在 AA 行捏造了個永遠不會發生的 (i==-1)，讓 </div> 成功地找到了另外一半 <div>，而我也終於可以成功地將範本儲存，總算月圓人團圓，皆大歡喜.... -_-


後記：

後來想到，如果將 javascript 裡面的所有 "<>" 符號改用跳脫碼，例如 "<div>" 改成 " &lt;div&gt;"，就不會有以上第 2 點的錯亂問題了。只不過這麼一來，所有的標籤都將變成亂碼，以後自己想要修改某部分程式碼的時候，反而會看得十分痛苦，花費更多時間解讀。所以，也許第 2 點的解決方式還是有其必要性吧～

2011.10.14 增補

J.C. 於【留言 #04】詢問樹狀分類能否有全部開合的效果，已將此效果需要的程式碼整理於「讓Blogger的標籤能樹狀分類__（三）全部開合」

2011.10.23 增補

J.C. 於【留言 #05】詢問開合圖案能否改為圖檔，如此必須做以下更改：

1. R 行 </span> 之前的 "➷" 圖案，要置換為 <img id='"+ Category_Name[i] +"_image' src='圖片網址1'/>

2. R 行 「swap(this,\"➥\",\"➷\") 」改為「swap(\""+ Category_Name[i] +"_image\")」

3. </head> 之前的 swap 函數內容全部置換為以下：

function swap(sec){
var e = document.getElementById(sec);
e.src = (e.src == '圖片網址1') ? '圖片網址2' : '圖片網址1';
}

由於 swap 函數在 WFU BLOG 有多處共用此函數，建議將 2011.10.23 增補這個 hack 的 swap 函數名稱改為其他名稱，以避免 swap 函數在別處失效。另外，程式碼的語法都是套用舊有的形式，請參照本文內容應該就可以瞭解。

同「讓Blogger的標籤能樹狀分類(一)」
「讓Blogger的標籤能樹狀分類」系列標題：
一、原理篇
二、安裝篇
三、全部開合
四、記憶開合狀態

➢➢ 快速選單： １ ２ ３ ４