讓標籤能自動樹狀分類 - 部落格

******************** 2012.6.9 增補 *******************************

本篇為兩層樹狀標籤，如果有兩層以上的需求，請參考「讓 Blogger的
標籤能"多層"樹狀分類：

http://www.wfublog.com/2013/01/multi-tree-label-update.html

*******************************************************************


一、前言：

讓 Blogger 標籤能樹狀分類的方法找了很久，一直沒有比較便利的方
式，大多是需要手動增加。直到在網路上找到「愣阿批居：Blogger
支援樹狀結構多層次標籤」這個方案最佳，優點為：「1. 可分類標籤」
、「2. 大分類可收合（節省空間）」、「3. 不必手動擴充標籤」、
「4. 統計各標籤文章數」。

可惜此方案在 IE 下執行會出錯，而偏偏 IE 是最多使用者的瀏覽器。
因 愣大 尚無暇修正 IE 下的 bug，只好自行研究 hack Blogger
的原始碼來達到上面所提的四大需求，請按以下動作來安裝此功能。


二、準備動作

1. 將 Blogger 所有的標籤改為 "AAA-BBB" 的格式，AAA 代表大分類，
BBB 代表真正的標籤名稱。

2. 到 Blogger 後台打開範本文件：修改 HTML → 勾選展開小裝置範
本

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

<script type='text/javascript'>
var Category_Name=new Array("XXX","YYY,"ZZZ")

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). 以上 "XXX","YYY","ZZZ" 的字串請改為想要的大分類名稱（就
是標籤格式 "AAA-BBB" 中的 AAA）。

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

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


三、主程式碼

接著參考 愣大 這篇文章：http://ppt.cc/HaJe ，請先確定側邊欄有「
標籤」的小工具，然後要更改的原始碼是 "<b:if cond='data:displ
ay == "list"'>" 一直到 "</b:if>" 之間的幾十行程式碼，請全部置
換為以下內容：

<script type='text/javascript'>

var Print_Category_Title=new Array(Category_Name.length)

for (var i=0;i&lt;=Category_Name.length;i++)
{
if (i==Category_Name.length){break;}
Print_Category_Title[i]=0

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)

if (Category == Category_Name[i] )
{
if (Print_Category_Title[i]==0)
{
document.write("<div style='color: #073763; font-famil
y: \"標楷體\"; font-weight: bold;'><span onclick='hide(\""+
Category_Name[i] +"\");swap(this,\"?\",\"?\")' style='cursor
: pointer; color: #3778cd;'>?</span>《"+ Category_Name[i] +"》
</div>")
document.write("<div id='"+ Category_Name[i] +"' style
='display: block'>")
}
document.write("　? <a expr:dir='data:blog.languageDirec
tion' expr:href='data:label.url'><span dir='ltr'>"+ NewLabel
+"</span></a>(<data:label.count/>)<br/>")

if (Print_Category_Title[i]==-1){document.write("</div>")
}
Print_Category_Title[i]=1
}
document.write("</b:loop>")
if (Print_Category_Title[i]==-1){document.write("<div>")}
if (Print_Category_Title[i]==1){document.write("</div>")}
}
</script>

存檔後重新檢視網頁就可以看到效果。


----
Blogger 調校資料庫
http://www.wfublog.com/

----