作者WFU (天璣)
看板Blog
標題[Blogger] 讓標籤能自動樹狀分類
時間Fri Sep 2 12:35:13 2011
******************** 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<=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/
----
※ 發信站: 批踢踢實業坊(ptt.cc)
1F：推 strellson:版上好多高手 09/02 21:43
2F：推 mecca:讚 09/03 16:26
3F：推 LonyIce:專業推 09/03 20:53
4F：推 zerocool:專業！ 09/29 10:14
5F：推 mchen7:好用，謝謝！ 05/11 09:16
※ 編輯: WFU (118.165.24.181), 05/21/2014 08:49:39