自從無名搬來這後 , 許多blog 設定東西要去調整 ,
而google內建的blog系統沒有樹狀結構的分類,
網路上的文章更是對此方面技術介紹些許模糊,
因此來寫一篇以備日後參考
1.首先先到 範本 - > 編輯 HTML
2.這時候就會顯示 該 blog 會使用到所有 javascript 語法 ,
我們只需要做的是 找到 原分類的 語法段落 ,
利用Ctrl+ F (搜尋) <b:widget id="Label
你會找到許多這樣的標籤 一直按ENTER 找到 你blog新增分類的賦予它
的中文名稱 例如像我的是
<b:widget id='Label1' locked='false' title='分類' type='Label'>
找到之後 我們需要將它 <b:widget > </b:widget>語法的整段
段落 取代為下列
<b:widget id='Label3' locked='false' title='文章分類(v2)' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<script>
var label_tree= new Object();
function tn(tag)
{
return tag.substring(1,tag.length-1);
}
function build_node(tree,idx,cnt)
{
if(!tree[idx[0]]){
tree[idx[0]]=new Object();
tree[idx[0]]['_cnt']=0;
tree[idx[0]]['_item']=new Array();
}
tree[idx[0]]['_cnt'] = parseInt(tree[idx[0]]['_cnt']) + parseInt(cnt);
if(idx.length==1){
return tree[idx[0]];
}
return build_node(tree[idx[0]],idx.slice(1),cnt);
}
function add_label(_name,_cnt,_url,_dir)
{
var e1 = new RegExp("\\[(.+?)\\]","g");
var e = new RegExp("\\[(.+)\\]","g");
var m = _name.match(e);
var tag = _name;
var obj=new Object();
obj['tag']=_name;
obj['cnt']=_cnt;
obj['dir']=_dir;
obj['url']=_url;
if(m){
obj['tag']= _name.substring(m[0].length,_name.length);
var m1 = _name.match(e1);
if(m1){
node=build_node(label_tree,m1,_cnt);
if(node){
node['_item'].push(obj);
}
}
}
else{
if(!label_tree['_item']){
label_tree['_item']=new Array();
}
label_tree['_item'].push(obj);
}
}
function menu_exp(id)
{
var ul=document.getElementById("ul_"+id);
var li=document.getElementById("li_"+id);
if (ul.style.display=="none"){
ul.style.display="block"
li.style.backgroundImage="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfhRceZWKvia_DhwyWyI1pS6R2Amb7nBOV-e2KIsCyIapBa1_bcJdALoYzQXtkNsnrZ0xoHbmwAwbbSXX_8dpOVhbetYrvFCxDne4BeHt_fFboKsjRyX3jBCV5euTpyQRwdS07ITc6a4o/)"
}
else {
ul.style.display="none"
li.style.backgroundImage="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNSe0IhiSQQa9GCDxUVzCqJSKcTyolCvlGmZilPE0DRx0rQD-kxRkr279TWCLuczd7vffcIhvlh3sFGkImCT9moirtWGg4HTy8fvhE3QmeswkSHgkEc3wBeCGPKwAGofiKDaOhxWNCtDA/)"
}
}
function draw_obj(obj)
{
document.write("<li style='padding-left: 0px>'");
document.write("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNDRl3Qj0TSPHuLHs1CtAk09XBA4HcpSWpzuwqWD3PaKFLXvEYcxP3fRLvBfIW-I11q5rfv0Qvw8m0S267l88GsyxVLKWMVzX1HP9iZ87txb7lmxhNqlSRK5aNSCmxQQ_ZOCdmCEscmdU/s1600/icon-yellow-bullet.png' /><a dir='"+obj['dir']+"' href='"+obj['url']+"'>"+obj['tag']+"</a>");
document.write("<span dir='"+obj['dir']+"'>("+obj['cnt']+")</span>");
document.write("</li>\n");
}
function draw_tree(tree)
{
for(var tag in tree){
if(tag!='_item'&& tag!='_cnt'){
var rid = Math.random();
document.write("<li class=submenu id=li_"+rid+" onclick=menu_exp('"+rid+"'); style='font-weight:bold;padding-left: 20px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNSe0IhiSQQa9GCDxUVzCqJSKcTyolCvlGmZilPE0DRx0rQD-kxRkr279TWCLuczd7vffcIhvlh3sFGkImCT9moirtWGg4HTy8fvhE3QmeswkSHgkEc3wBeCGPKwAGofiKDaOhxWNCtDA/) no-repeat left 0px;cursor: pointer'>");
document.write(tn(tag));
document.write("("+tree[tag]['_cnt']+")");
document.write("</li>");
document.write("<ul id=ul_"+rid+" style='display:none;padding-left: 20px'>");
draw_tree(tree[tag]);
document.write("</ul>\n");
}
}
if(tree['_item']){
for(var i=0;i < tree['_item'].length;i++){
draw_obj(tree['_item'][i]);
}
}
}
</script>
<b:loop values='data:labels' var='label'>
<script>
add_label('<data:label.name/>','<data:label.count/>','<data:label.url/>','<data:blog.languageDirection/>');
</script>
</b:loop>
<ul>
<script>
draw_tree(label_tree);
</script>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>原出處為 http://gormit-gk.blogspot.tw/2010/01/blog-post_24.html
3.取代後幾乎就等於完成了,接下來是重覆機器式的繁瑣工作
請看圖
重新定義後的標籤結構 需遵照 下列格式 :
假設你想要的樹狀結構是
a1 -
b1 -
(abc)你的文章
就要填寫為這樣 -> [a1][b1]abc
像我只有一層樹狀 所以只有 [a1]abc
4.改完後應該像下圖這樣
5.趕快試一下 檢視你的blog是不是變成這樣了呢?
