2016年5月23日

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;
}

#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 行的註解


更多實用工具:

30 則留言:

  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 的色碼

      刪除

張貼留言注意事項:

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