2010年1月24日 星期日

第二版重新改寫
現在可以支援多層次的分類,並且可以展開/關閉分類
分類仍以中括號作為分類的標籤



使用 [分類1][分類2]標籤 的格式來定義標籤即可

安裝如同第一版的步驟

步驟一
打開版面配置,加入標籤這個小工具, 一定要設定為用按字母排序
顯示設定不重要等下一步的script只會以清單表現

步驟二
選擇"修改HTML" 並鉤選"展開小裝置範本"
找到步驟一新加的小工具 找像下列的字串

<b:widget id="Label2" locked="false" title="標籤" type="Label">
一直到
</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='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<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(http://lh4.ggpht.com/_aunFc5EDRyI/S1u5viwK6ZI/AAAAAAAAAIE/gntN8IjNtQY/minus.gif)"
        }
        else {
            ul.style.display="none"
            li.style.backgroundImage="url(http://lh4.ggpht.com/_aunFc5EDRyI/S1u5tkkq3uI/AAAAAAAAAH8/L3MD-dRtmkY/plus.gif)"
        }        
}
function draw_obj(obj)
{
    document.write("&lt;li style='padding-left: 0px&gt;'");
    document.write("&lt;img src='http://3.bp.blogspot.com/_WoCJXgXotb8/SsBGEeZ7m-I/AAAAAAAAAJg/9imBipUIe7Q/s1600/icon-yellow-bullet.png' /&gt;&lt;a dir='"+obj['dir']+"' href='"+obj['url']+"'&gt;"+obj['tag']+"&lt;/a&gt;");
    document.write("&lt;span dir='"+obj['dir']+"'&gt;("+obj['cnt']+")&lt;/span&gt;");
    document.write("&lt;/li&gt;\n");
}
function draw_tree(tree)
{
    for(var tag in tree){
        if(tag!='_item'&amp;&amp; tag!='_cnt'){
            var rid = Math.random();
            document.write("&lt;li class=submenu id=li_"+rid+" onclick=menu_exp('"+rid+"'); style='font-weight:bold;padding-left: 20px;background: url(http://lh4.ggpht.com/_aunFc5EDRyI/S1u5tkkq3uI/AAAAAAAAAH8/L3MD-dRtmkY/plus.gif) no-repeat left 0px;cursor: pointer'&gt;");
            document.write(tn(tag));
            document.write("("+tree[tag]['_cnt']+")");
            document.write("&lt;/li&gt;");
            document.write("&lt;ul id=ul_"+rid+" style='display:none;padding-left: 20px'&gt;");
            draw_tree(tree[tag]);
            document.write("&lt;/ul&gt;\n");
        }
    }
    if(tree['_item']){
        for(var i=0;i &lt; 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>

可由此下載原始碼

步驟四
按下儲存範本就完成了


步驟五
使用以下的格式作為文章的標籤
使用 [分類1][分類2]標籤 
程式會自動抓出[分類]的內容列表

如發現問題 煩請告知

86 回覆::

Julian 提到...

您好:請問一下您的文章分類按"+","-"號都有作用,但是我的沒有作用,只能按文字部分才能作用。請問必須改哪邊呢??

還有請問如果想要秀出底層的所有文章需要怎麼改呢?謝謝您

找了兩天階層式標籤還是您的最淺顯易懂而且可以多層。真是太強了..

Gormit 提到...

展開的動作是在 <li> 裡做的(function draw_tree 的第一個 document.write 內) "+","-"號是<li>的background. 應該會作用才是...

這個分類抓的是 data:labels, 沒有包括底層文章. 要秀出底層的所有文章不太容易, 可能要用blog API 吧, 我也沒試過.

Sarah 提到...

你好~我使用好一陣您這個方法了~謝謝您~
我最近換blogger版型後呀~
我的+號會壓在我的分類字上~請問我該怎麼調整才會落在第一個字的左方呢?
http://imsarahsong.blogspot.com/

Gormit 提到...

我看了一下你的頁面, 新的樣板多了個
text-indent: -15px

所以有兩個可能的改法可以試試;
改法一
找到 function draw_tree(tree) 內有

padding-left: 20px; (兩個)

改成

padding-left: 35px;

改法二
在padding-left: 20px;後面加上

padding-left: 20px;text-indent: 0

Sarah 提到...

我照你提的方法一成功了~
謝謝您~XD

翠華流 提到...

謝謝你!這個功能我想要很久了~按照你的步驟成功修改!我有引用你的文章喔!感謝你的教學^^

Unknown 提到...

很好用哦!!感謝您的教學...
引用您的文章,作為我的部落格架設的記錄!
如不同意請告知,即刻刪除!
http://trustworthycpa.blogspot.com/

Gormit 提到...

沒問題 歡迎轉載

yoyo 提到...

您好,使用過您的方法之後,我的blog沒有任何更動。請問是不是因為目前我只有一個文章分類的關係呢?

Gormit 提到...

沒看到很難猜耶
也有可能是不同範本的問題

點子 提到...

我有成功! 很高興^_^ 謝謝你!
不過我有個疑問,我點+之後會出現下一個分類
再點一次+ 會突然全部收起來
再點一次+ 才會展開
這是我網誌↓
http://ideaslamp.blogspot.com/
這個有辦法解決嗎??

Julian 提到...

您好:想順便請問一下 雙語要如何設定呢??謝謝
我知道內容要自己寫 但是如何設定切換呢@@?

Gormit 提到...

點子:
我試了一下 我覺得是網頁在開啟後又刷新了一次 (reload)
所以之前開的又合上了
但等到網頁完全載入後就部會了

可能跟用的其中一個小工具有關吧

Gormit 提到...

rainlily 提到...
您好:想順便請問一下 雙語要如何設定呢??謝謝

這到沒什麼技巧啦 我用的是兩個獨立的blog. 然後在範本裡加了連結, 中文的加英文連結 英文的加中文連結
不曉得這樣有回答到你的問題嗎?

Unknown 提到...

原始碼沒辦法下載耶... ><

Gormit 提到...

我試了下沒問題啊
可以用Firefox試試看吧
有時 IE 挑的狠
不然直接 E 給你?

Unknown 提到...

可以了~~我再來試試~~
請問分類可以在多幾層嬤??
標籤只可以輸入一個還是可以輸入多個呢?

Gormit 提到...

可以啊 所以才叫多層次分類
像這樣設定文章分類

[分類1][分類2]標籤 

就可以了

Unknown 提到...

我發現我還是沒辦法下載範本><
一直會出現這盎的訊息
Sorry, we are unable to scan this file for viruses.
We are experiencing technical difficulties
還是請您E給我好了~~

Unknown 提到...

可以了!!真是太感謝了!!!

binruei 提到...

請問一下有辦法讓分類標籤按照自訂的順序來排列嗎

Gormit 提到...

"binruei 提到...
請問一下有辦法讓分類標籤按照自訂的順序來排列嗎"

沒有做排序ㄟ...
不曉的您打算怎麼個排法呢?
把標籤加上特別的排列順序嗎?

Unknown 提到...

終於可以好好的分類了~
好用喔。。。
謝謝呢~

Julian 提到...

您好:您說雙語是要準備兩個部落閣當切換
那麼flag counter可以使用同一個嗎?謝謝

Gormit 提到...

如果直接copy 應該就是同一個counter.
counter鏈結的URL裡面有你的個人代碼

Kuanpl 提到...

感謝,真的好用~~
請教如果要把[階層一][階層二]改為不要出粗體字,應該在哪裡改阿?
THX

Gormit 提到...

Kuanpl:
在 function draw_tree(tree) 內
大約下5行的地方 找到
style='font-weight:bold;....
把 font-weight:bold 拿掉即可

Kuanpl 提到...

many thanks ~~
已經改好了,忍不住給你一個讚!

阿博哥 提到...
作者已經移除這則留言。
newhope10 提到...

想請問一下,您的文章分類按"+"會有作用耶,我的沒辦法,我有試過你給第一個提問的人回答,可我有看沒有懂,還是沒成功,可以再跟我解釋一下嗎?

還有我按了分類的字後(例如:遊記),下面跳出來的東西,離(遊記)很近ㄟ,請問怎麼改呢?

這是我的blog,拜託幫我看一下!! 感恩喔~
http://newhope10.blogspot.com/

newhope10 提到...

不好意思再請問一下,文章分類的字很大可以改小嗎? 文章分類下面跳出來的東西(例如: 紐約州),可以跟(遊記)對齊嗎? 謝謝

匿名 提到...

http://lovenee.blogspot.com/
我的blog

想請教您
我的問題是右側ARCHIVES那邊
忽然沒辦法點選箭頭了
也就是我沒辦法展開年月的文章一覽表
我在家是用firefox
一開始以為是我滑鼠故障的關係所以無法點
但是今天在公司用IE也沒辦法點開

可以麻煩您指點是哪邊出了問題嗎?
或email給我: lovenee@hotmail.com
感激不盡~

匿名 提到...
作者已經移除這則留言。
Gormit 提到...

buybuyusa:
字體是在 li 的範本格式中設定的
打開部格的範本設計>修改 HTML
找到 #sidebarleft li{
font-size 改成 11px 應該就可以解決對齊的問題

#sidebarleft li {
font-size: 11px;
font-weight: normal;
list-style-type: none;
}

如果不想改字體大小可以找到
function draw_tree(tree) 內有

padding-left: 20px; (兩個)
可以調整縮排的距離

另外發現一個 BUG
function draw_obj(obj)
{
document.write("<li style='padding-left: 0px>'");

要改為
document.write("<li style='padding-left: 0px'>");

Gormit 提到...

CHRISTINE:
拜訪您的網頁時 有些Javascript error.發生. 這會使後續的script 無法正常運作
小弟沒法看您網頁的原始範本內容 恐怕沒法提供更多的線索

Gormit 提到...

buybuyusa:
您的網頁 分類按"+" 在firefox 會正常運作 在IE不行
小弟也很納悶...

newhope10 提到...
作者已經移除這則留言。
newhope10 提到...

Gormit,

謝謝你詳細的講解!!

但是我找了半天都找不到 #sidebarleft li{font-size 這個東西,所以也沒辦法改字體大小

這是我螢幕上看到的,沒看到你說的bug耶 ><
document.write("<li style='padding-left: 0px>'");

Gormit 提到...

buybuyusa10:
#sidebarleft li 可能因範本不同吧

那就直接改 style 吧
function draw_tree(tree) 內有
style='font-weight:bold;padding-left: 20px;font-size:11px;

style='display:none;padding-left: 20px';font-size:11px;

Unknown 提到...

請問一下,若想要在文章分類之下list出所有文章title可以怎麼設定?

Gormit 提到...

Yvonne:
我也曾經想過 可是沒有簡單的方法
理論上用Google API可能可以
但我還沒學會....

Huck Bakery 提到...

我依照步驟做了,但沒反應,連文章分類的"+"都沒出現,請問有可能那些地方出了問題?我想一一嘗試去解決,謝謝

Huck Bakery 提到...

我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
XML 錯誤訊息: The value of attribute "expr:class" associated with an element type "null" must not contain the '<' character.

以上是我操作後的錯誤訊息,煩請幫忙,謝謝

Gormit 提到...

Huck Bakery:
html editor 有點討厭 存檔時會自動將 html 的標記 escape. 如果做copy/paste, escape 的部分就會造成你看到的錯誤

★ JaNey ★ 提到...

謝謝你,有個問題想問,是否可以改分類的字型與顏色嗎?

Gormit 提到...

字型字體通常由範本中的css設定的 不同的範本可能會有一些出入
我的範本中用的字體是定義在 #sidebarleft li

明日.今日.昨日 提到...

你好,我想請問一下是不是能把分類後面的計數去掉?
因為我把標籤小工具本身的顯示文章數關掉之後
樹狀列上還是有顯示數字
稍微看一下語法之後,心想應該是語法本身有帶計數的功能
但是因為對語法不熟,怕亂改反而出問題
所以想來請問一下該怎麼改才好
感謝你的答覆^_^

小靈 提到...

不好意思,請問我為什麼沒辦法下戴原使碼???

sanyasi 提到...

請問無法下載原始碼,直接copy頁面上的編碼是否格式會移位而造成失敗咧?

Gormit 提到...

請再試試下載連結 現在應該可以了
大概太久沒登入被鎖了吧
直接copy會有錯誤
是因為有 xml escape 的問題

sanyasi 提到...

1.蒙您快速回應備感luck;經下載還是不行,有何其
它方法呢!謝謝您

2.從小到大雖身為女兒身卻未曾特別喜歡娃娃,但平時即特喜歡了解成果背後的過程,拜讀您製作的細節竟有一股感動,凡事都有背後的千般萬難,還好也都各有專注投入其中、不覺其難甚至enjoy的人,這世界才能充滿光彩。

obsidian 提到...

感謝您的教學,真是太有用的資訊了!請問如何才能下載原始碼使用呢?
使用firefox或IE點選連結總是顯示
Sorry, we are unable to retrieve this document.
謝謝您。

roelove 提到...

可以麻煩您e 原始碼給我嗎?我的也無法下載ㄟ,很感謝您~~

roelove 提到...

我的mail: roelove0914@gmail.com

Unknown 提到...

感謝大的的分享,目前已可使用,功能正常

Vegan狂熱! 提到...

您好!我使用了您的階層分層,很成功!
可是想請問一下,我希望[分類1]出現的數亮是[分類2]的,而不是[分類2]下的總文章數,要怎麼改呢?

比如說[分類2]有兩個,總文章數有16個
但[分類1]顯示的卻是16,我希望顯示的是2

請問要如何修改呢?>"<

感謝大大!

Vegan狂熱! 提到...

另外,我是直接copy耶(因為無法下載原始碼),但可以運作@_@

假日旅行社中國事業部 提到...

您好我原先是參考http://www.ensky.tw/2011/09/blogger.html的小外掛
可惜IE環境一直無法使用(chrome可用)
非常感謝您分享的這個文章分類工具!!非常好用呢!!
不過有點小問題想詢問
IE的環境下點選第二個階層以後都會自動關閉回到上層再點選一次第一階層才會出現第二階層及第三階層
開啟及關閉皆發生同樣的情況
chrome卻不會

(我現在是暫時於function menu_exp(id)下的 else 中把ul.style.display="none"變成block)
但如此一來就變成無法收合
不知道有沒有其他方法呢?
http://holidaystravelservice.blogspot.com/

Unknown 提到...

我這邊按照做法做出現了下列訊息耶>< 能教一下嗎 感謝啦!!

我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
XML 錯誤訊息: Element type "li" must be followed by either attribute specifications, ">" or "/>".

Error 500

Wayne Fu 提到...

to Gormit大:您的程式滿強的,可以做到無限階層標籤,小的目前只有寫出兩層標籤出來,真是學習了~~可惜因為使用了 Abin 的「相關文章」hack,無法使用[AAA][BBB]這種格式的標籤,否則相關文章就會失效。

to binruei:如果要求標籤按照順序的話,可參考 http://wayne-fu.blogspot.com/2011/08/blogger_11.html

Ben & Maggie 提到...
作者已經移除這則留言。
Ben & Maggie 提到...
作者已經移除這則留言。
恍惚熊 提到...

感謝你這篇教學~
終於弄出標籤的子分類了~

不過一開始一直都失敗..囧"
然後才發現是新版的編輯器在搞我..
(一直說錯誤 不給存)

壹澪 提到...

你好,我想請問關於分類後
第一和第二階層間的間距太大了
應該要怎麼改比較好?

bbb 提到...

終於找到我想要的語法了!!感謝您的教學...
引用您的文章,作為我的部落格架設的記錄!
如不同意或有意見請告知,即刻刪除!
http://bbb-pc.blogspot.tw/

Unknown 提到...

我的部落格
http://zettoman.blogspot.tw/
按照你的方法

可是階層一點進去文有文章
只有文章數...

我只設階層1還是一定要階層2?

omega 提到...

連結好像失效了
不好意思可以把原始碼E給我嗎~
感謝

john19910208@gmail.com

Amao Kuo 郭阿茂 提到...
作者已經移除這則留言。
global.diza@gmail.com 提到...

使用 [分類1][分類2]標籤 的格式來定義標籤即可,不好意思不知如何處理

Unknown 提到...

我也有同樣問題耶,使用 "[分類1][分類2]標籤" 的格式來定義標籤即可,不好意思不知如何處理,因為文章都已先完成並PO上網誌了,如何更改標籤讓其可以正常運作,煩請指導!感謝~

Unknown 提到...

用 "[分類1][分類2]標籤" 的格式來定義標籤終於成功了! 但奇怪的是最上層標籤統計文章數量譬如為10,結果下拉展開後實際僅5,每個大分類皆有如此現象,可否協助解答?感恩

Ssu 提到...

妳好,用了您的方法我終於成功了 !
但是我想請教有沒有可能不要出現"+"或"-" 但是仍然可以下拉的方式呢? >"< 我的項目符號後面有+-感覺很奇怪QQ
謝謝!

YUI CHIA 提到...

用你的方法成功了!谢谢 ^^

云步∕云太 提到...

一直對blogger只有標籤的文章分類感到困擾,利用您提供的方法總算能將版面整理得更加整齊,真的非常感謝!

流星.留聲 提到...

看了幾個網頁, 有看沒有懂, 用了你的方法, 終於成功做到樹狀分類了, 謝謝你。

Medbear 提到...

大大您好,您這個作法真的是簡單易懂,感謝您的分享。不過我在執行後有個小問題,就是我的文章分類的標題跟它左邊的"+"號不會在同一個水平,不曉得您是否可以幫我解決這個問題,再次感謝您。
我的部落格:http://medbear.blogspot.com/

SEN 提到...

謝謝~很好用~

A_ 提到...

感謝!!解決了我的疑惑!!
也感覺很有趣:)

HappyMickey 提到...

多謝, 成功了, 將你教學引用了, 希望多啲朋友學會, Thanks.

Unknown 提到...

謝謝了~這樣很方便

莎樂兒 提到...

你好~我是blogspot新手,謝謝你的分享,有文章分類真的很好!

alandai 提到...
作者已經移除這則留言。
Macapathy 提到...
作者已經移除這則留言。
Macapathy 提到...

您好

請問您
我進入"修改HTML" 後並沒有看到"展開小裝置範本"這個選項,我該如何更改呢?忽略這個選項繼續下面的動作後,卻沒有樹狀階層。
謝謝您

Erin Huang 提到...

你好
用了這個方法可以有多層次分類了
但發現展開後跳不出該分類的文章耶
http://goodayconcept.blogspot.tw/
可以麻煩幫我看看嗎
感謝你喔

Miya Tan 提到...

我找這個找了好久,終於找到了,這個超級有用的!!
非常感謝你寫出這個程序!!真的太棒了!!!!