(Pic from: I Loathe Multi Level Marketing)如果網站的多層樹狀標籤想要有全部開合的功能,那麼按照「上一篇」 完成基本安裝後,可以接續本篇的操作。
樹狀標籤更新版本已經發佈,請「按此跳至新版頁面」,安裝新版本可避免舊版本會發生的狀況與問題。
準備動作:
到 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 函數可以隨時呼叫,進行更改圖案。
存檔後即大功告成。而一些安裝樹狀標籤可能會遇到的疑難雜症,將作個統整、集中放在下一篇說明。
一、基本安裝
二、全部開合
三、各種疑難雜症
四、更新版本
➢➢ 快速選單:1 2 3 4
大大你好,這兩天才開始接触blogspot的。
回覆刪除首先謝謝「讓Blogger的標籤能「多層」樹狀分類」這篇分享文,
我個人是覺得寫得很清楚,
在實踐時跟著(一)的步驟做一次就成功了。
在多次嘗試添加(二)中所提及的 「全展開/全收起」功能卻一直失敗。
添加完畢後的確是有好好顯示「全展開/全收起」的字眼,像:
「分類 + 全展開 - 全收起」
但不管按符號還是文字也完全沒反應QQ
大大能幫忙找找解決方法嗎?
<1474771718370229964>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除我看到你使用 "»" 的分隔符號,所以我也用 "»" 來測試,果然出問題,但用 "-" 就ok,目前還沒找出原因,想不出為何符號不同會出錯,請等我測試成功再正式回覆。
<1474771718370229964>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除測試的結果發現,特殊字元會被 Blogger 編碼,而我設定的 ID 名稱裡面有分隔符號,當分隔符號設定為特殊字元時(例如"»"),會導致本文全開合的 ID 抓不到。
我修正了部分程式碼,ID 名稱已經去除分隔符號,目前自己測試是正常的,應可放心使用特殊字元當分隔符號。
不過要請你重新安裝一次程式碼了,從第一篇開始重裝,可按照每篇文章開頭的公告來執行,如果還不行請再告知狀況了。
我想請問一下有沒有辦法讓我的標籤排序正常
回覆刪除http://zettoman.blogspot.tw/
我有的分類『業於軍人』裡面是從1跳到10.11才回到2,有辦法讓他是從9在接10嗎?
<4279717337089887131>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除我發現你的樹狀標籤並不是裝我的版本喔~~
那改用你的可以解決這個問題嗎?
回覆刪除<7021612499771154905>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除用我的 ok 啊,你把 vol.1~9 的數字前面空一格就好了。
也許你的樹狀標籤版本這樣改也行,不勉強一定要用我的版本,只不過我的樹狀標籤功能比較多、擴充性比較強、可以自訂配置的地方很多,而且如果使用你的樹狀標籤版本,以後想裝「最新文章」功能可能會失效。
我先試試看治標的辦法行不行
回覆刪除我的野是網路上找到的...我對程式碼不太行
WFU大大
回覆刪除好不容易比第一篇都設定好了,現在只差無法順利展開和合上
不知甚麼原因??
http://allan-claire.blogspot.tw/
<7412851405570513320>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除原因回覆在第一篇了。
你好,第一次玩blogger,
回覆刪除引用你的分享之後,目前遇到兩個問題>"<
1)分類標籤以下的側欄欄位通通跑掉了
2)將showlevel設為1,也是遇到不管點文字或圖示都無效的狀態,我的標籤分類是"AAA-BBB",並沒有用其他特殊符號
能否請你幫我看我哪裡設錯,謝謝。
<2063063253982152836>(以上內容請勿刪除,從括號之後開始留言)咦~你留言在這一篇啊,看了你的網站,問題出在「第一篇」-->「四、注意事項」-->「第 1 點」,把還沒用到的大分類去除就行了。
回覆刪除請問,我裝了基本安裝,但其中如果想要放在第一層的大分類沒有子類別,似乎就不會出現,該如何修改呢?謝謝~(看了其他兩篇好像沒提到這問題,如果漏看請見諒~)
回覆刪除<877349392108147761>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除根據你的描述,好像有很多種可能性,如果提供你的網址,比較能確定你的意思、或是你的狀況。
<2284845306890592768>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除我舉個例子好了,例如我想要的分層結構是:
》美食
.中式
.西式
.日式
》旅遊
.亞洲
.歐洲
.美洲
》心情
前面兩個類別都是依照「美食-中式」、「旅遊-亞洲」這樣的模式下標籤,呈現出來也都沒問題,但假設我在「心情」這一類別裡的文章都不想分類,也就是底下沒有其他層級,那麼是標籤該怎麼下?或是語法該怎麼修改呢?
希望這樣有說得清楚我的問題,謝謝!
<3243278782740792652>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除我猜你的意思是「心情」是標籤名稱,而不是大分類名稱。
如果是標籤名稱,這個工具只能顯示多層次的標籤,無法顯示一層的標籤(因為當初沒打算這麼寫);所以還是請你把這個標籤名稱前面加個大分類才能顯示出來,例如「生活-心情」或「其他-心情」之類的。