2012年6月15日

讓Blogger的標籤能「多層」樹狀分類__(二)全部開合

A+

(Pic from: I Loathe Multi Level Marketing)
如果網站的多層樹狀標籤想要有全部開合的功能,那麼按照「上一篇」 完成基本安裝後,可以接續本篇的操作。

2013.1.4 公告

樹狀標籤更新版本已經發佈,請「按此跳至新版頁面」,安裝新版本可避免舊版本會發生的狀況與問題。



準備動作:

到 Blogger 後台 → 範本 → 修改 HTML。接著把下面的 Javascript 插入 </head> 的前面,跟上一篇放在 </head> 前的那一行程式碼擺在一起,綠字為原本程式碼,紅字與藍字為新增程式碼:


B:這一行綠字部分為原本的程式碼,請改為自己的大分類設定字串。

D~O:處理標籤全部打開的函數,有兩個地方可以更改──

  F:"-" 可改為自己的標籤分隔符號

  K:"" 請改為自己的標籤收起符號(必須與自己上一篇設定的符號相同)

Q~AB:處理標籤全部收起的函數,有兩個地方可以更改──

  S:"-" 可改為自己的標籤分隔符號

  X:"" 請改為自己的標籤展開符號(必須與自己上一篇設定的符號相同)


放置位置:

接下來必須找到開合開關的放置位置,我選擇放在標籤欄位靠右上的位置,請找到範本中類似以下的程式碼:

<b:widget id='Label1' locked='false' title='分類' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/><span style='float:right'><span onclick='treeLabel_Open()' style='cursor: pointer; color: #3778cd;'></span> 全展開 <span onclick='treeLabel_Close()' style='cursor: pointer; color: #3778cd;'></span> 全收起</span></h2>

要找到側邊欄標籤小工具程式碼的起始位置,從 widget id 判斷是比較快的方法,除非裝了兩個以上的標籤小工具,不然我們要 hack 的應該會是 "label1" 的區域。

找到 <h2> 這一行後,在 <data:title/> 與 </h2> 之間插入紅字部分,這裡設了兩個開關,分別會呼叫 treeLabel_Open 與 treeLabel_Close 函數來進行全部開合的動作。

如果開關想設在別的位置可自行判斷是否刪掉 float:right 這個 span 標籤的頭尾;想要顯示別的開合文字、圖案、顏色,可在此行進行修改。


調整原程式碼:

上一篇」原程式碼中有兩個地方要修改:

1. C 行:刪除 tLabel_Data 這個變數,請將以下程式碼覆蓋原本的 C 行,需要修改的參數、圖案請自行更改(請注意每個變數之間是用逗號隔開,此行最後用分號結尾)

var showLevel = 2, showTitleCount = "Y", openLogo = "▼", closeLogo = "►", listLogo = "⇢", sp="-";

2. AH 行:新增以下紅字部分

var html = "<div><span id='"+ id +"_swap' onclick='this.innerHTML = (this.innerHTML == \""+ openLogo +"\") ? \""+ closeLogo +"\" : \""+ openLogo +"\"; document.getElementById(\""+ id +"\").style.display = (document.getElementById(\""+ id +"\").style.display == \"block\") ? \"none\" : \"block\";' style = 'margin-left:"+ k * 10 +"px; cursor: pointer; color: #3778cd;'>"+ sLogo +"</span>";
把開合圖案的那個 span 標籤新設一個 ID ,好讓 treeLabel_Open 與 treeLabel_Close 函數可以隨時呼叫,進行更改圖案。

存檔後即大功告成。而一些安裝樹狀標籤可能會遇到的疑難雜症,將作個統整、集中放在下一篇說明。


讓Blogger的標籤能多層樹狀分類」系列標題:
一、基本安裝
二、全部開合
三、各種疑難雜症
四、更新版本

➢➢ 快速選單:

16 則留言:

  1. 大大你好,這兩天才開始接触blogspot的。

    首先謝謝「讓Blogger的標籤能「多層」樹狀分類」這篇分享文,
    我個人是覺得寫得很清楚,
    在實踐時跟著(一)的步驟做一次就成功了。

    在多次嘗試添加(二)中所提及的 「全展開/全收起」功能卻一直失敗。
    添加完畢後的確是有好好顯示「全展開/全收起」的字眼,像:
    「分類 + 全展開 - 全收起」

    但不管按符號還是文字也完全沒反應QQ
    大大能幫忙找找解決方法嗎?

    回覆刪除
  2. <1474771718370229964>(以上內容請勿刪除,從括號之後開始留言)
    我看到你使用 "»" 的分隔符號,所以我也用 "»" 來測試,果然出問題,但用 "-" 就ok,目前還沒找出原因,想不出為何符號不同會出錯,請等我測試成功再正式回覆。

    回覆刪除
  3. <1474771718370229964>(以上內容請勿刪除,從括號之後開始留言)
    測試的結果發現,特殊字元會被 Blogger 編碼,而我設定的 ID 名稱裡面有分隔符號,當分隔符號設定為特殊字元時(例如"»"),會導致本文全開合的 ID 抓不到。

    我修正了部分程式碼,ID 名稱已經去除分隔符號,目前自己測試是正常的,應可放心使用特殊字元當分隔符號。

    不過要請你重新安裝一次程式碼了,從第一篇開始重裝,可按照每篇文章開頭的公告來執行,如果還不行請再告知狀況了。

    回覆刪除
  4. 我想請問一下有沒有辦法讓我的標籤排序正常
    http://zettoman.blogspot.tw/
    我有的分類『業於軍人』裡面是從1跳到10.11才回到2,有辦法讓他是從9在接10嗎?

    回覆刪除
  5. <4279717337089887131>(以上內容請勿刪除,從括號之後開始留言)
    我發現你的樹狀標籤並不是裝我的版本喔~~

    回覆刪除
  6. 那改用你的可以解決這個問題嗎?

    回覆刪除
  7. <7021612499771154905>(以上內容請勿刪除,從括號之後開始留言)
    用我的 ok 啊,你把 vol.1~9 的數字前面空一格就好了。

    也許你的樹狀標籤版本這樣改也行,不勉強一定要用我的版本,只不過我的樹狀標籤功能比較多、擴充性比較強、可以自訂配置的地方很多,而且如果使用你的樹狀標籤版本,以後想裝「最新文章」功能可能會失效。

    回覆刪除
  8. 我先試試看治標的辦法行不行

    我的野是網路上找到的...我對程式碼不太行

    回覆刪除
  9. WFU大大

    好不容易比第一篇都設定好了,現在只差無法順利展開和合上
    不知甚麼原因??

    http://allan-claire.blogspot.tw/

    回覆刪除
  10. <7412851405570513320>(以上內容請勿刪除,從括號之後開始留言)
    原因回覆在第一篇了。

    回覆刪除
  11. 你好,第一次玩blogger,
    引用你的分享之後,目前遇到兩個問題>"<

    1)分類標籤以下的側欄欄位通通跑掉了
    2)將showlevel設為1,也是遇到不管點文字或圖示都無效的狀態,我的標籤分類是"AAA-BBB",並沒有用其他特殊符號
    能否請你幫我看我哪裡設錯,謝謝。

    回覆刪除
  12. <2063063253982152836>(以上內容請勿刪除,從括號之後開始留言)咦~你留言在這一篇啊,看了你的網站,問題出在「第一篇」-->「四、注意事項」-->「第 1 點」,把還沒用到的大分類去除就行了。

    回覆刪除
  13. 請問,我裝了基本安裝,但其中如果想要放在第一層的大分類沒有子類別,似乎就不會出現,該如何修改呢?謝謝~(看了其他兩篇好像沒提到這問題,如果漏看請見諒~)

    回覆刪除
  14. <877349392108147761>(以上內容請勿刪除,從括號之後開始留言)
    根據你的描述,好像有很多種可能性,如果提供你的網址,比較能確定你的意思、或是你的狀況。

    回覆刪除
  15. <2284845306890592768>(以上內容請勿刪除,從括號之後開始留言)


    我舉個例子好了,例如我想要的分層結構是:
    》美食
     .中式
     .西式
     .日式
    》旅遊
     .亞洲
     .歐洲
     .美洲
    》心情


    前面兩個類別都是依照「美食-中式」、「旅遊-亞洲」這樣的模式下標籤,呈現出來也都沒問題,但假設我在「心情」這一類別裡的文章都不想分類,也就是底下沒有其他層級,那麼是標籤該怎麼下?或是語法該怎麼修改呢?

    希望這樣有說得清楚我的問題,謝謝!

    回覆刪除
  16. <3243278782740792652>(以上內容請勿刪除,從括號之後開始留言)
    我猜你的意思是「心情」是標籤名稱,而不是大分類名稱。
    如果是標籤名稱,這個工具只能顯示多層次的標籤,無法顯示一層的標籤(因為當初沒打算這麼寫);所以還是請你把這個標籤名稱前面加個大分類才能顯示出來,例如「生活-心情」或「其他-心情」之類的。

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。