[教學]Blogger文章分類﹍多層樹狀標籤(更新版)

(Pic from: I Loathe Multi Level Marketing)2016.5.23 公告：目前已有新版本，請改用「Blogger 樹狀標籤 V2.0﹍安裝懶人包」、「Blogger 樹狀標籤 V2.1﹍切換標題模式」

時隔半年，閱讀過一些「Javascript 的書」之後，回頭看當初樹狀標籤的程式碼算是很不成熟，加上「舊版本第一篇」留言 #24 iampisece 詢問相關問題，決定來修改「5多層樹狀標籤」的程式碼。沒意外的話這一篇應該是最終版本了，因為所有的功能可整合在一起安裝，過去所有發現的大小問題在這新版本也都能解決。

若是第一次安裝樹狀標籤可直接跳「二、功能介紹、準備動作」；若曾安裝過舊版樹狀標籤，可從「一、更新摘要」看起。

一、更新摘要

1. 舊版本只能按「開合圖案」來收合各分類標籤；新版本按下「分類名稱」也能收合，面積較大操作介面比較友善。

2. 舊版本必須手動將「次分類」名稱前空一格來達成排序的效果；新版本這個動作交給程式代勞，不必再手動更改次分類名稱。

3. 舊版本若是設定了尚未使用的大分類名稱，會造成版面錯亂的問題，這也是詢問率最高的問題；新版本改善了這個問題，預先設定多少大分類名稱都沒關係。

4. 舊版本某些「開合字元」按下後會顯示錯誤的字元；新版本解決了這個問題。

5. 舊版本若要使用「圖片」當作開合字元，必須另外修改程式碼；新版本可直接設定圖片網址。

6. 舊版本「全部開合」功能必須另外改程式碼；新版本此功能已經整合在一起。

7. 舊版本難以設定 CSS；新版本大部分的 CSS 都可自訂。



二、功能介紹、準備動作

若第一次安裝樹狀標籤的話──

1. 請先閱讀舊版本「第一篇」→「一、基本功能」，瞭解這個樹狀標籤能做的事有哪些。

2. 請先閱讀舊版本「第一篇」→「二、準備動作」→ 第 1 點、以及第 1 點最後面「2012.12.15 增補」的部分，必須先將部落格所有文章的標籤改為「AAA-BBB」的標籤格式，就像下圖這篇文章的標籤範例：



上圖使用了四層標籤，算是「AAA-BBB-CCC-DDD」的格式；只要文章標籤沒有改成樹狀標籤的格式，這個小工具是無法顯示任何標籤的。如果網站有大量文章需要批次修改標籤，建議參考這篇文章，以避免 Blogger 操作上的一個大 Bug：

• Blogger 批次修改標籤的方法及注意事項

如果覺得樹狀標籤格式太長，版面不太好看，建議安裝以下這個工具：

• 讓 Blogger 樹狀標籤只顯示真實標籤名稱

使用前的樹狀標籤版面大致是這樣：




使用後的樹狀標籤，改以真實標籤名稱顯示，讓版面精簡：





三、安裝程式碼

如果安裝過舊版本的程式碼，建議將原本的標籤小工具整個移除，再重新安裝一個標籤小工具，然後接續下面的步驟；如果第一次安裝樹狀標籤的話，請按以下步驟：

2013.8.6 補充

由於 Blogger 範本編輯器前陣子改版，以下的文字敘述若操作有問題，可一併參考這篇「blogger標籤多層次樹狀清單設定」的圖文補充

1. 若尚未安裝「標籤」小工具，請先到後台安裝這個小工具。

2. 後台 → 打開範本文件 → 修改 HTML，如果部落格只有安裝一個「標籤」，那麼通常搜尋 "Label1" 這個字串就能找到這個小工具的區塊，開頭通常長得像這樣──

<b:widget id='Label1' locked='false' title='分類' type='Label'>
上面 title 裡面的字串會是每個人自設的「小工具標題」，而不是我的字串('分類')；如果安裝過不止一次這個小工具，可能就要嘗試搜尋 "Label2"、"Label3" 等字串了，並配合「小工具標題」來確認正確的區塊。


3. 安裝「全部開合」功能：接著應該往下三行左右就能找到這個字串──

<h2><data:title/></h2>
新增以下紅字部分的字串即可：

<h2><div id="treeLabel_toggle"><a href="http://wayne-fu.blogspot.com/2013/01/multi-tree-label-update.html" target="_blank"><img class="post-img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWyB1MXzEo95PgGb2vSJUI6v-8YYPYn_OuCJOiutez2Ui1QwyDdyf5qXb5uhuR_EwDRDNULEsYngppEjZeQEgB_ql-sO0YCHzrGOEQFl_SJ6vpREuwbxf2tG4DBDEpVunJOYs7-Ueicw1m/s1600/info.png"/></a></div><data:title/></h2>
如果「全部開合」的按鈕想放別的位置，請將以上紅字部分的程式碼挪到想放的位置。


4. 安裝主程式碼：從第 3 點的程式碼再往下個兩三行，就會看到類似這幾十行的程式碼──

    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>

將以上幾十行程式碼，全部置換為以下內容：


先別存檔，最重要的是 AH 行，請參照綠字備註，將雙引號內的字串改為自訂的大分類名稱，也就是樹狀標籤格式「AAA-BBB」裡面的 "AAA"。

改完就可以存檔，重新檢視網頁就可看到效果，類似本文開頭的圖片。要玩一下效果可參考右邊側邊欄的「文章分類」。

如果滿意系統預設的參數、版面配置，那麼就可以開始使用了；如果想要自訂參數、版面配置，請繼續往下看。



四、修改參數

1. 全部開合功能：如果不需要這個功能，請將 AM 行的參數改為 "N"。


2. 重要修改：這裡先列出重要的修改項目，請對照原程式碼的行號──

AH：如前所述這是最重要的修改，請見綠字備註。

M：如果不喜歡預設的大分類、次分類名稱顏色，請在這一行更改色碼。

Q：這一行可更改「滑鼠移到大分類、次分類名稱時顯示的顏色」，若大分類名稱不需要變色效果，將此行刪除即可。


3. 參數修改：大部分的參數修改在綠字備註都已經說明的很詳細，以下列出需要補充的部分──

AK～AM：如果使用圖檔的話，也許可使用 15 x 15px 的尺寸，但做出來的圖能否跟文字一致對齊，可能還是得用圖片編輯軟體進行細調才能有滿意的效果；不然就是得參考下面第 4 點來調整文字的 CSS，讓文字跟圖片對齊。

AN：這裡的數值設得越高，代表每一層標籤縮排進去的程度越高。

2013.5.28 推薦

AK～AM 的這三個圖檔，推薦參考 +Totoa Hari 的「Sims' Cottage」，以及「Toby's Cooking Lab」，都滿好看的。

4. CSS 修改：

T～W：這裡可設定「大分類、次分類名稱區塊」的文字大小、邊界值等等。

Y～AB：這裡可設定「真實標籤名稱區塊」的文字大小、邊界值等等。

如果改了以上兩個區塊的文字大小，那麼記得連 G行 的文字大小一起改。



五、小結

舊版本的樹狀標籤算是本站留言詢問最多的一個系列文章，可見程式是很有缺陷的，希望這個版本可以解決所有問題。

另外，必須感謝所有這陣子幫我填寫新版樹狀標籤問卷調查的朋友們，讓我想到一些改進的點子、且解決了一個 IE 下的 bug。

當然，本文有說明不清、操作仍有問題的部分還是請留言提出，會持續更新本文內容。

六、重要 FAQ

由於本篇留言太多而許多狀況是重複的，因此發問前建議先檢視以下常見 FAQ，若不在下列事項，留言請附上網址方便檢視異常狀況(網站請不要鎖右鍵, 這樣很難看網頁原始碼)：

Q1: 為何安裝完畢後，無法顯示樹狀標籤？

Ans: 請一一檢視是否完成以下動作：

• 1. 文章的標籤是否已經設定為樹狀標籤的格式 → 「二、功能介紹、準備動作」
• 2. 程式碼 AH 行是否設定了正確的大分類名稱
• 3. 標籤名稱請避免使用「全形符號」，Blogger系統可能會編碼錯誤。(只要不是鍵盤上的符號，就幾乎都是全形符號)
• 4. 請檢查「標籤」小工具，是否設定為 "顯示所有標籤"。
• 5. 請檢查「"大分類"名稱」、「"次分類"名稱」、「"真實標籤"名稱」是否有些設定成一樣；若有的話，可能會讓程式判斷錯誤，無法分辨哪些是分類名稱、哪些是標籤名稱。
• 6. 請檢查是否使用了非主流的瀏覽器，複製的的程式碼包含了行號 A、B、C...，這樣程式是無法執行的。請使用本站建議的瀏覽器 Chrome、Firefox、Opera 等複製程式碼，就沒問題了。

Q2: 教學文章好長，不知道如何下手？

Ans: 建議參考另一位讀者的安裝心得「blogger標籤多層次樹狀清單設定」的圖文補充。


Q3: 標籤顯示可以排序嗎？

Ans: 請參考留言第一頁、留言 #1 的回答。


Q4: 安裝樹狀標籤、要儲存範本時，出現了這些字"剖析 XML 時發生錯誤：Element type "id" must be followed by either attribute specifications, ">" or "/>"." 我不知道我倒底動到什麼? 請問該怎麼處理?

Ans: 你可能誤刪了某處的程式碼，不過也沒關係，你可以將樹狀標籤的程式碼全部移除，或「將迷你組件範本回覆為預設值」-->選擇「Label1」。接著所有步驟再重新來過就行了.


Q5: 小分類如果不要顯示文章數 應該從哪裡修改?

Ans: 在原程式碼裡面搜尋字串 ("+f[O]+") ，然後把這個字串刪除即可。


Q6: 我該使用樹狀標籤、還是使用標籤雲？

Ans: 樹狀標籤是分類的概念(category)，而標籤雲是標籤的概念(tag)。可依照個人的分類習慣，也可以兩者並行。可參考本篇留言 #15～#17 WFU 跟 阿啦 的對話，相信可以更清楚這些概念。


Q7: 外表看起來沒問題，但是要打開收合的分類會一直縮回去，根本來不及點？

Ans: 這是 Jean Hsiung 於留言 #57 的詢問，並在 #59 自行找到問題所在：「我原本使用chrome，後來發現IE很正常，chrome 改用無痕模式試，結果沒問題，一個一個試插件，發現是Adblock Pro這個插件的問題，必須整個關閉才會正常，就算加到例外問題也還是存在，所以我沒問題了」


Q8: 我裝好、設定好之後成功顯示區標籤的分類小工具，但點第二層的時候卻跳出無相關文章的頁面?

Ans: 這是 Wang Henry 於第2頁留言 #80 的詢問，原因為標籤名稱使用了會被轉碼的符號。除了不要使用全形符號之外，請參考「官方文件」，標籤名稱不要使用下面這些符號：

&<>@!+,#


Q9: 請問，在AK、AL、AM，如要更改圖示顏色的話，要如何更改？

Ans: 這個版本沒有設定更改圖示的 CSS class，下個版本應該會開放出來更改。目前的替代方案，可以改用圖片來取代圖示字元，請參考註釋的說明，那就可放自訂顏色的圖片了。


更多實用工具：

• 本站使用的 Blogger hack 及工具整理