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