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

(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的標籤能多層樹狀分類」系列標題：
一、基本安裝
二、全部開合
三、各種疑難雜症
四、更新版本

➢➢ 快速選單：１ ２ ３ ４