Blogger 文章分類﹍樹狀標籤 V2.0 -- 安裝懶人包

A+
blogger-tree-label-v2-Blogger 文章分類﹍樹狀標籤 V2.0 -- 安裝懶人包多層樹狀標籤」是本站最熱門的 Blogger 工具,不過安裝、使用有問題而留言提問的數量,也是最多的。原因可能是安裝方式比較複雜,沒那麼容易一次成功。

這次 V2 改版使用了懶人包的安裝方式,相信可以大幅減少出錯的機率。同時改版最大的不同是加入「切換摘要及標題模式」,這個許多站長想要的功能。

不過也許多數站長只需要單純的樹狀標籤功能,因此決定將「切換摘要及標題模式」功能以另外的版本號發佈,區別如下:


以下先介紹改版的特點、修正的部分,想要直接安裝懶人包請直接跳到「二、準備動作」。

(圖片出處: pixabay.com)


一、特點


V2.0 版的效果大致如下:

tree-label-v2-demo-Blogger 文章分類﹍樹狀標籤 V2.0 -- 安裝懶人包


1. 修正功能

舊版留言提出了不少狀況,以下是新版改善的部分:

  • 舊版的標籤名稱若使用 "全形符號" 或 "特殊字元",有可能讓程式執行錯誤;新版修正了這個現象。
  • 舊版只能顯示樹狀標籤,也就是 "AAA-BBB" 這樣的階層格式;新版也能顯示一般非樹狀的標籤名稱。
  • 舊版需要在範本中修改原始碼,有可能找不到位置或改錯地方;新版只要直接新增程式碼就好,比較簡單。


2. 新增功能

  • 如果熟悉 CSS,新版可以自訂所有的版面樣式。
  • 最上方新增「導航欄位」
  • 導航欄位可選擇加入「切換摘要及標題模式」的功能


二、準備動作


若曾安裝舊版的話,請先刪除舊版程式碼。請務必做完以下三個動作,再開始安裝程式碼:

1. 設定標籤小工具

若沒安裝過「標籤」小工具的話,可到後台 → 版面配置 → 新增一個「標籤」小工具 → 填入標題後,如下圖:

tree-label-v2-setting-Blogger 文章分類﹍樹狀標籤 V2.0 -- 安裝懶人包

將紅框處分別勾選 "按字母排序"、"清單"、"顯示每個標籤的文章數"。

如果有某些標籤不想顯示出來,第一個選項可改為「選取的標籤」


2. 找出標籤小工具的 ID

到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋「標籤」小工具的標題名稱,例如我設定為 "分類":

tree-label-v2-widget-id-Blogger 文章分類﹍樹狀標籤 V2.0 -- 安裝懶人包

如上圖,我的標題名稱 "分類" ,同一行紅框處的 ID 字串為 "Label1",請記下你的 ID 字串。


3. 設定文章標籤

請先將部落格所有文章的標籤,改為樹狀標籤的格式。例如原本的標籤名稱為 "CCC",請改成 "AAA-BBB-CCC" 這樣的形式。

tree-label-Blogger 文章分類﹍樹狀標籤 V2.0 -- 安裝懶人包

上圖這篇文章原本的標籤名稱為 "多層樹狀標籤",現在改為四層標籤,大分類名稱為 "電腦",其餘請見圖中說明。

若沒事先為文章設定樹狀標籤的話,那麼這個工具將無法顯示階層分類的效果。



三、安裝程式碼


在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

1. JQUERY + CSS

請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/*樹狀標籤 V2*/
#Label1 {
display: none;
overflow: auto;
}

#tl2_main,
#tl2_nav {
font-size: 13px;
font-weight: bold;
}

#tl2_nav {
background-color: #eee;
margin-bottom: 10px;
padding: 3px;
}

#tl2_nav a {
display: inline-block;
box-sizing: border-box;
width: 50%;
text-align: center;
border-left: 1px dashed #aaa;
}

#tl2_nav a:first-child {
border-left: 0;
}

#tl2_nav a,
#tl2_main a {
text-decoration: none;
}

#tl2_main img {
vertical-align: middle;
}

.tl2_category {
margin-top: 2px;
}

a.tl2_catText {
}

.tl2_subArea {
margin: 0 0 5px 10px;
}

.tl2_label {
margin-left: 5px;
}
</style>

第一行綠色字串可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。

紅色字串 "Label1" 請改為「二、準備動作」→「2. 找出標籤小工具的 ID」→ 自己的 ID 字串

如果熟悉 CSS,可自行修改其餘 CSS 參數。


2. 安裝主程式

接著請搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:


以下參數修改請參照以上程式碼行號:

E:紅色字串請改為自己的標籤小工具 ID,也就是前面「二、準備動作」→「2. 找出標籤小工具的 ID」→ 自己的 ID 字串

F:最重要的設定,這裡設定了所有要顯示出來的樹狀標籤 "大分類" 字串,請參考綠色字串的說明

G:預設會打開的標籤層數,填入 1 為全部收起的狀態

H:預設大分類、次分類會顯示文章數

I~K:預設使用的開合圖示、標籤圖示,也可使用圖檔

L~M:導航欄使用的 "展開"、"收合" 提示圖示及文字,也可使用圖檔


存檔後即可看到效果,也可參考本站側邊欄最上方的效果。



四、相關工具


使用這個樹狀標籤後,也建議順便參考以下相關的使用技巧或工具:

1. 批次修改標籤

如果網站有大量文章需要批次修改標籤,建議參考這篇文章,以避免 Blogger 操作上的一個大 Bug:



2. 簡化樹狀標籤

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


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

blogger-tree-label-simplify-1


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

blogger-tree-label-simplify-2



五、常見 FAQ


發問前建議先檢視以下常見 FAQ,若不在下列事項,留言請附上網址方便檢視異常狀況。

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

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

  1. 文章的標籤是否已經設定為樹狀標籤的格式 →「二、準備動作」→「3. 設定文章標籤」
  2. 標籤小工具是否正確設定 →「二、準備動作」→「1. 設定標籤小工具」
  3. 程式碼 F 行是否設定了正確的大分類名稱
  4. 請參考「官方文件」,標籤名稱不要使用這些符號:「&<>@!+,#」,也不要使用雙引號「"」、單引號「'」,都會讓程式當掉。
  5. 請檢查是否使用了非主流的瀏覽器,複製的的程式碼包含了行號 A、B、C...,這樣程式是無法執行的。請使用本站建議的瀏覽器 Chrome、Firefox、Opera 等複製程式碼,就沒問題了。


Q2: 標籤顯示可以排序嗎?

Ans: 英數可以排序,但中文用 js 是無法排序的。可在次分類自行加上英數符號來達到排序效果,例如 "1.本家"、"2.分家",或 "A.本家"、"B.分家" 類似這樣。


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

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

另外若是瀏覽器裝了其他外掛、網站裝了其他外掛、或是非官方範本,都有可能跟這個工具相衝突,建議自行一一移除外掛,來找出可能導致衝突的外掛程式。


Q4: 要怎麼讓樹狀標籤在一開始的時候就保持收合的狀態?

Ans: 請看程式碼 G 行的註解


Q5: 留言 #19 討論串詢問,官方新版 RWD 範本的標籤工具,預設會將內容收合,有沒有什麼方法能預設一開始就顯示呢?

Ans: 請在程式碼 P、Q 這兩行之間插入以下這行程式碼──

$(function () {$("#Label1 .collapsible-title").click()});
字串 Label1 請改為你的小工具 ID。


更多實用工具:

57 則留言:

  1. 沒想到有生之年能看到樹狀標籤2.0!安裝方式比本來的版本簡單多了XD

    回覆刪除
  2. 要怎麼讓樹狀標籤在一開始的時候就保持收合的狀態。

    回覆刪除
  3. 請問~
    我要事不改成AAA-BBB的標籤就可以顯示
    改成了AAA-BBB標籤了確無法顯示
    是標籤設的不對嗎?

    回覆刪除
  4. 請問可以不要有上兩欄的開合欄嗎?

    回覆刪除
    回覆
    1. 如果你熟悉 CSS 的話,可以將 #tl2_nav 設定為 display: none;

      刪除
  5. 請問最後實際的文卓後面可以不要出現文章數嗎?因為它就是唯一的文章啊~~
    然後,我在html語法裏面找不到--字串 ("+f[O]+") ,文章裏面有說要刪掉~~
    可以幫我看一下嗎?感恩~~
    http://travelmyapple.blogspot.tw/
    不曉得留在這裏對嗎?
    抱歉~~

    回覆刪除
    回覆
    1. 「我在html語法裏面找不到--字串 ("+f[O]+")」→ 那是舊版的 FAQ 吧,這篇沒提到這件事喔

      不要出現文章數 → 可以直接編輯這個小工具,設定不要顯示試試看。

      刪除
    2. 您好~~~
      如果我把[標籤小工具]裏的[顯示每個標籤的文章數]取消~~
      整個樹狀狀標籤就不見了~~~
      麻煩了~~感恩~~

      刪除
    3. 好的,那麼你試試把字串 "+showCount+" 刪除,包含兩個雙引號都要喔

      刪除
    4. 板大~~~
      太厲害了!
      大分類[2016],中分類[義瑞日],後面的文章數不見了,只剩文章那個最不想要出現的文章數(1)還留著~~~
      還有其他方法嗎?
      感恩~~

      刪除
    5. 不好意思,原來改到大分類去了。那麼要請你將程式碼恢復原狀,因為要改大分類的數量,程式碼 H 行就有參數了。

      再測試了一下,不顯示真實標籤的數量,請將 ("+lcArray[j]+") 這些字串刪除,包含括號及雙引號喔

      刪除
    6. 板大~~真是厲害!
      問題全解決了!
      真是太麻煩你了~~
      感恩!!!

      刪除
  6. 你好 拜讀您的樹狀標籤文
    在自己部落格上試作,照FAQ檢查了幾次仍然無法顯示,
    不知是哪裡出了錯 @@"

    可以拜託您有空幫看看嗎 感謝

    http://chicagoleopardkitty.blogspot.com/

    回覆刪除
    回覆
    1. 你好,看了網站,你的修改方式真的第一次看到,不能顯示的原因是,你的小工具 ID 已經是 Label1 了,所以程式碼所有 Label1 的字串,都不需要更改,不過你都改了。

      如果你知道我在說什麼的話,直接改回來就可以了;不清楚的話,建議你刪除程式碼,重新走一次流程,不要改 Label1,其他的照你目前的設定,應該就行了。

      刪除
  7. 請問,怎麼去除標籤位置旁邊的「展開」與「收合」的圖樣?

    回覆刪除
    回覆
    1. 相關的圖示設定,留下兩個雙引號即可

      刪除
  8. 版大您好,感謝無私提供語法^^

    設定完後不知道為什麼第一個分類沒辦法展開
    可以麻煩版大有空幫忙看一下嗎?
    我的網址是http://landzsworld.blogspot.tw/

    非常感謝!!

    回覆刪除
    回覆
    1. 你好,看了你的網頁狀況,你的標籤名稱,似乎使用了雙引號「"」或單引號「'」,這會讓 JS 程式當掉,請先改用其他的字串,來排除這個問題。

      刪除
    2. 謝謝版大!!總算可以順利展開了
      太感謝^^b

      刪除
  9. 非常感謝您!!!雖然要自己寫程式碼,但是介面清爽多了,我要從痞X邦跳過來了><

    回覆刪除
    回覆
    1. welcome~

      痞客邦搬過來的話,可在本站搜尋 "痞客邦",有一些搬家的相關資訊。

      刪除
  10. 版大您好:
    我照著懶人包2.0做,也檢查了很多次注意事項,但每次都是儲存以後,整個標籤的區塊就消失了!(但 code 還是存在,就顯示不出來),或者只有出現一行「展開/收合」的按鈕,底下的標籤都不見。請問是哪裡出錯了呢?謝謝!! http://neishuangxi.blogspot.tw/

    回覆刪除
    回覆
    1. 你好,應該是 → 標籤小工具是否正確設定 →「二、準備動作」→「1. 設定標籤小工具」 這裡沒有設定正確,請確實按照圖中所有紅框標示設定

      刪除
  11. 請問一下如果要改收合展開標籤的背景色是要改哪一行?因為我的部落格是深色的,淺色背景反而看不到字

    回覆刪除
    回覆
    1. 可以修改 background-color 的色碼

      刪除
  12. 謝謝你的文章, 不過我有2個問題想請教:
    1. 我把這個改成行動版, 剩下全開跟全關無法使用, 請問是哪邊需要調整嗎?
    2. 如果不小心點到空白處, 就會跳到這個網頁, 請問有辦法可以關閉嗎? (如果版大希望這個設計繼續, 直說無仿)

    謝謝

    回覆刪除
    回覆
    1. 1. 請參考「瞭解 Blogger 行動版範本的特質」http://www.wfublog.com/2016/02/blogger-dynamic-views-mobile-template-feature.html →「三、行動版範本不一定能執行網頁版工具」,本站的工具除非註明行動版專用,否則不會特地測試行動版的執行效果。如有需要改成行動版使用,請發案給我。

      2. 你按到版權連結的區塊了,也就是 "ⓦ Tree Label V2" 這一行,請參考本站的版權頁面說明:http://www.wfublog.com/2013/06/wfu-blog-copyright.html

      刪除
  13. 請問如果只有2層分類可以用這款嗎?

    回覆刪除
  14. 您好,請問我是使用Chrome操作,弄完後整個標籤區塊都無法顯示,可是我開IE卻可以正常顯示......不曉得是哪邊出了問題
    感謝

    回覆刪除
  15. 已經發現問題所在,現在可以正常顯示了,抱歉打擾>"<
    非常感謝提供這麼棒的東西!!

    回覆刪除
  16. 您好WFU大,
    我重複試了兩三次,標籤依然不能順利開合,想麻煩你看看是哪裡出了問題呢?
    感謝回覆,我的網址:
    http://blog.mussoap.com/

    回覆刪除
    回覆
    1. 你好,使用有問題請先看「五、常見 FAQ」,同時留言 #9 也有同樣狀況。

      刪除
    2. 謝謝WFU的回覆~
      我有試著照著上面的回答除錯,但我的內容並沒有雙引號或其他(只有中+英文),以下附上我的指令列
      ---------
      category: ["漫畫Comics", "影片Videos"], // 雙引號內填入大分類名稱, 每個大分類用小寫逗號隔開, 最後一個大分類之後不可有逗號; 填入順序就是顯示的順序
      ---------
      還是不能同時中英並存呢?感謝

      刪除
    3. 請詳細閱讀 FAQ,你的標籤名稱使用了單引號 '

      刪除
    4. 哇><我看懂了,一開始以為是大分類不能用,原來小分類也不行。
      謝謝回復!不好意思打擾了!

      刪除
  17. WFU大大~非常感謝您的工具
    我已經成功安裝
    不過右下角ⓦ Tree Label V2連結是無法顯示網頁耶@@
    我是不介意放上這個標籤,但能不能夠修好這個連結呢~
    https://happyot.blogspot.tw/
    感謝你~~

    回覆刪除
    回覆
    1. 謝謝通知,關於版權連結,請參考這個聲明:http://www.wfublog.com/2013/06/wfu-blog-copyright.html

      看了你的網頁,原來啟用了 https,所以版權連結被自動加上 https,導致成為無效的連結。

      解決方法有兩種:

      1. 到後台關閉 https

      2. 我更新了這個小工具的部分程式碼,請重新安裝這個工具

      刪除
  18. WFU大大你好感謝你提供如此多資源,最近在修改BLOG所以來挖寶

    這個懶人包已經反覆檢查+重做了許多次還一樣 煩請大大幫我看看問題在哪理了

    http://newriceolddad.blogspot.tw/

    回覆刪除
    回覆
    1. 你好,看了你的測試網頁,原來裝在 Blogger 新的 RWD 版型。
      我沒測過新的 RWD 範本效果,因為版型不一樣也許無法正常執行,將來有空才可能會測試、出新的版本。
      目前的話,只好先請你裝在非 RWD 範本了。

      刪除
    2. 好唷,我想可能也是新的範本的關係,謝謝大大的回覆了

      刪除
    3. 對了,因為不確定何時會處理新的版本,建議可訂閱本站最新文章~

      刪除
    4. 我跟新米老爹也是一樣的狀況,希望W大能夠協助~~~謝謝您的分享!

      刪除
    5. 已修改程式碼,相容於 RWD 範本。「三、安裝程式碼」→「2. 安裝主程式」這部分的程式碼請重新安裝,應該就可以了。

      刪除
    6. 謝謝版主!可以了!
      但是還是遇到一些小問題,
      那就是文章分類的側欄預設是「收起來的」,
      需要點下拉鍵才能完全顯示,(不是G行的問題)
      有沒有什麼方法能讓預設就能夠一開始就能顯示呢?
      附上我的部落格:https://wordsblock.blogspot.tw/

      刪除
    7. (我是樓上QQ)
      補充:還有最小分類的最後,會多出該分類的文章數
      以至於文章樹出現兩次重複,不知有沒有解決方法?
      謝謝你><

      刪除
    8. 謝謝提醒,原來文章數會重複兩次,已修改程式碼,請再更新一次~~

      另外官方 RWD 範本小工具預設收起來的現象,已補充到「五、常見 FAQ」→ Q5,請按說明進行即可。

      刪除
  19. 您好,想請問一下,
    照著步驟做之後,結果整個標籤都消失在側欄,是為什麼?
    提供一下我的網址:https://yang-su.blogspot.tw/
    (但其實有沒有提供都沒差XD 我有設顯示但整個標籤工具都消失了XD)

    求求WFU大大幫忙 T_____T

    回覆刪除
    回覆
    1. 看了你的網頁,是樓上 #19 的狀況,請參考相關的回覆~

      刪除
  20. 您好,
    不好意思打擾了,已經按照步驟安裝,也依據FAQ檢查過好多次
    但顯示出來的還是標籤雲的樣式(確定標籤小工具是選清單了),能否請板大幫忙看一下嗎? 這是我的網址
    https://wanderingwithyou.blogspot.tw/
    感恩,謝謝您~

    回覆刪除
    回覆
    1. 看了你的網站,裝了 3 個標籤工具,每個都是標籤雲,所以一定是設定的問題,請重新檢查設定,有沒有正確儲存。

      然後請見留言注意事項,由於你的網站不是官方範本,非免費諮詢的範圍,建議你先只留 1 個標籤工具來測試,方便排除錯誤,比較容易成功,等裝好後再安裝其他標籤工具。

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP