讓Blogger的標籤能樹狀分類__（一）原理篇

(Pic from: 123rf.com)一、前言

Blogger 的文章一多後，側邊欄的標籤就會像堆滿雜物的儲藏室，不分類一下的話看起來十分凌亂，尤其是看到一團密密麻麻的標籤雲時。

在網路上搜尋了各種將標籤樹狀分類的方法，找到「愣阿批居：Blogger 支援樹狀結構多層次標籤」這個方案最佳，優點為：「1. 可分類標籤」、「2. 大分類可收合（節省空間）」、「3. 不必手動擴充標籤」、「4. 統計各標籤文章數」。

2012.6.8 公告

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

「不必手動擴充標籤」是一項很方便又重要的突破，因為許多樹狀分類的方案，若想在大分類之下新增小分類，必須重新打開程式碼來手動新增，這是很麻煩的事。可惜此方案在 IE 下執行會出錯，而偏偏 IE 是最多使用者的瀏覽器。愣大 的這個方案是改寫自有名的樹狀程式「dtree」，對於原始程式由於實力不足無法全看懂，且 愣大 尚無暇修正 IE 下的 bug，只好自行土法煉鋼研究 javascript 語法，直接 hack Blogger 的原始碼來達到上面所提的四大需求，以下是自行求解過程的筆記。


二、Blogger 標籤功能原始碼

在側邊欄有新增「標籤」這個小工具的話，相信在範本內可找到類似以下的原始碼：

    <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>
這一整段就是要 hack 的地方，裡面的意思 愣大 在 該篇文章 有大略解釋過，也有提到「官方文件」對於一些參數的說明。而以上一大段的程式碼對於 hack 有需要的地方只有四行：

1. <b:loop values='data:labels' var='label'>
2. <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
3. <span dir='ltr'>(<data:label.count/>)</span>
4. </b:loop>

A. 將所有標籤丟進迴圈
B. 顯示標籤名（包含列出該標籤文章的超連結）
C. 顯示標籤文章數
D. 結束迴圈

這四行是要 hack 的主幹，以下是針對這四行進行修改擴充、達到三大需求的概念流程，若想跳過流程直接套用程式碼的話可直接看「讓Blogger的標籤能樹狀分類(二)」。


三、概念流程

1. 設定大分類：

愣大 設定標籤的方式 " [AAA][BBB]C "：AAA代表第一層大分類，BBB是第二層，C才是真正標籤。不過 WFU 的版本只有使用兩層而已，因為認為兩層就足夠保持版面的美觀了，所以目前還沒有三層以上的需求。有需要用到三層以上標籤的朋友，可參考此篇的概念自行擴充程式碼。

另外使用此版本的標籤，建議使用 "AAA-BBB" 的形式，因為如果有使用 Abin大 的「相關文章 (Related Post)」hack，那麼標籤 AAA 用刮號 "[]" 框起來會造成標籤判讀錯誤的問題，在該篇文章下面的留言有人提到此事，且有些符號會造成標籤的判讀錯誤，為了保險起見，"AAA-BBB" 是 WFU 測試過的安全格式，但若分隔符號不想用 "-" 的話就得請自行測試是否 OK 了。

接下來，將大分類 "AAA" 的變數取名為 "Category_Name"，設為字串陣列：

var Category_Name=new Array("休閒","理財","電腦")
想要幾個分類名稱都可自行置換


2. 處理大分類

for (var i=0;i<=Category_Name.length;i++)
{
document.write("<b:loop values='data:labels' var='label'>")

var OldLabel = "<data:label.name/>"
var LabelPosition = OldLabel.search("-")
var Category = OldLabel.substr(0,LabelPosition)
var NewLabel = OldLabel.substring(LabelPosition+1)
利用 for 迴圈，一個個處理 "Category_Name" 裡面所有的大分類字串。

參照本文第二節的原始碼，"<data:label.name/>" 存放原始的 "AAA-BBB" 標籤名稱，現在要將它分解："AAA" 分解為 "Category" 變數；"BBB" 分解為 "NewLabel" 變數。

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


3. 收合大分類

A. 這個網頁是網路上搜尋到將某區塊 "隱藏、顯示" 的切換語法：

Toggle Visibility - Show/Hide Anything

B. 這個網頁是網路上搜尋到的 "文字、符號" 切換語法：

Swapping Content


為了有以上兩個效果，先將以下語法丟到 </head> 之前：

<script type='text/javascript'>
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>
接著以下的語法就能實現大分類的收合效果，效果可直接在本 Blog 右邊側邊欄，對所有分類進行收合測試。

if (Category == Category_Name[i])
{
document.write("<div style='color: #073763; font-family: \"標楷體\"; font-weight: bold;'><span onclick='hide(\""+Category_Name[i]+"\");swap(this,\"➥\",\"➷\")' style='cursor: pointer; color: #3778cd;'>➷</span>《"+Category_Name[i]+"》</div>")
以上的格式、顏色、字形、符號，可自行置換成自己喜歡的樣式。另外，document.write 的括弧裡面把程式碼當字串塞進去時，有雙引號「"」的地方都要改成「\"」


4. 顯示真正標籤

document.write("　➨ <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><span dir='ltr'>"+NewLabel+"</span></a>(<data:label.count/>)<br/>")
這一段就是修改第二節的那四行原始碼中的 B、C 行，為了美觀增加一些空格、符號，然後將原本的標籤名稱置換成我們的真正標籤 "BBB"："NewLabel" 變數。


好了，以上 1～4 點的流程為了方便，採獨立說明的方式，要整合這 4 點起來需要增加一些連接的程式碼，且還會遇上一些困難，下一篇將這 4 點的程式碼全部串起來一併說明。


1. Blogger 支援樹狀結構多層次標籤」
2. 加入相關文章功能 (Related Post)
3. Toggle Visibility - Show/Hide Anything
4. Swapping Content
「讓Blogger的標籤能樹狀分類」系列標題：
一、原理篇
二、安裝篇
三、全部開合
四、記憶開合狀態

➢➢ 快速選單： １ ２ ３ ４