2012年6月7日

讓Blogger的標籤能「多層」樹狀分類__(一)基本安裝

A+

(Pic from: I Loathe Multi Level Marketing)
過去雖然使用了「兩層式樹狀標籤」來管理,使側邊欄標籤不至於凌亂,不過伴隨著文章數逐漸增多後,當一個標籤下有了三、四十篇文章,不但訪客爬文花時間,自己找舊資料也麻煩,就算部落格裝了文章分頁的功能,也是要跳好幾頁才能爬完一個標籤的文章。

因此為了訪客的方便,其實也是給自己回頭找資料方便,例如 "Blogger Hack" 這標籤原本有將近三十篇,個人習慣把文章分類細分到一個標籤下最多十幾篇,一個頁面就能顯示該標籤所有文章的狀態,如此完全不需要跳頁就能一覽該標籤的文章;以上就是著手構思多層次樹狀標籤的源起。

2013.1.4 公告

樹狀標籤更新版本已經發佈,請「按此跳至新版頁面」,安裝新版本可避免舊版本會發生的狀況與問題。



一、基本功能

基本安裝的版本包含了以下基本功能:

1. 自訂要展開的層數

2. 每個大分類、次分類都有開合開關

3. 每個大分類、次分類標籤都能統計文章數

4. 可選擇是否顯示大分類、次分類的統計文章數


二、準備動作

1. 跟「兩層式樹狀標籤」一樣,先將 Blogger 所有文章的標籤改為 "AAA-BBB" 這樣的階層標籤格式,請參考下圖──



以本文的標籤為例,原本正常的標籤名稱是「多層樹狀分類」,但要使用這個樹狀標籤系統的話,必須將標籤名稱改為階層式,彼此之間用 "-" 分隔開,就像上圖一樣,將標籤改為「電腦-Blogger Hack-樹狀標籤-多層樹狀標籤」,這樣系統才能辨別。由於本版本支援多層次標籤,想分幾層就能分幾層,例如 "AAA-BBB-CCC-DDD-EEE" 就能分成五層囉!而文章數不多的情況下,一開始只要兩層就夠用了;隨著文章數增多再來增加層級進行管理。

2012.12.15 增補

【留言 #22】發生了標籤名稱使用單引號「'」讓程式當掉的結果,由於單、雙引號「'」「"」這兩個符號在 js 裡面當成字串的話會讓程式當掉,請避免用這兩個符號當標籤名稱。

另外,標籤名稱也請避免使用全形符號,因為常會造成 Blogger 的編碼錯誤而讓程式當掉。


2. 到 Blogger 後台 → 範本 → 修改 HTML

3. 接著把下面的 Javascript 插入 </head> 的前面:

<script type="text/javascript">
var Category_Name = ["電腦","休閒","理財"];
</script>

  (1) 如果安裝過兩層式樹狀標籤,這個動作是重複的,就不必再做了。
  (2) 以上紅色的字串請改為想要的大分類名稱(就是標籤格式 "AAA-BBB" 中的 AAA)。

  (3) 要填入幾個大分類都可以,填入的順序就是在側邊欄由上到下顯示出來的順序

  (4) 字串必須放在雙引號內,每個字串用逗號隔開;最後一個字串的雙引號後面不能有逗號



三、安裝主程式碼

如果在側邊欄有新增「標籤」這個小工具的話,相信在範本內可找到類似以下的原始碼:(沒有的話請先安裝「標籤」小工具)

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

接著將以上全部的幾十行程式碼,全部置換為以下內容(如果安裝過「兩層式樹狀標籤」,就沒有以上內容,請將舊的兩層式樹狀標籤程式碼置換為以下內容,小心!請先備份範本):


存檔後重新檢視網頁就可以看到效果,請參考本站右邊的側邊欄;不過會發現不完全一樣對不對?除了圖示、間隔有調整過,因為本篇只是基本安裝,而標籤「全展開」、「全收起」的功能,為了不讓本文版面太凌亂,會另開一篇說明;且某些開合的圖案經過 Blogger 處理後會變形,這也需要另外一篇完整的文章來說明。

2012.8.25 補充

留言 #16 Marst Lee 遇到特殊的狀況,複製程式碼時,會連程式碼的編號 A. B. C. 都一起複製,但是若使用市佔率較普遍的瀏覽器,不太會發生把編號也一起複製的情形;Marst Lee 使用的瀏覽器名稱為「360極速瀏覽器」,也請複製時注意一下若發生連編號也複製的情形時,建議改用 Chrome、Fire、IE 等本部落格測試正常的瀏覽器複製。


四、注意事項

目前測試的結果發現有兩點需要注意:

1. 如果設定了不存在的大分類名稱,會造成版面亂掉:例如 Category_Name 裡面設定了 "AAA","BBB" 兩個大分類,實際上部落格若是沒有一篇文章是用到 "BBB" 這個大分類的話,那麼當程式碼讀不到 "BBB" 這個分類時,就會有版面的問題。也許某些站長會有習慣把大分類設好,再來慢慢寫文章,省得常常新增大分類,這是可以理解的;如果有這方面的需求請另外告知,再來想想怎麼改程式碼。

2. 任何大分類、次分類名稱請不要當作真實的標籤名稱:例如設定了 "健康-飲食-早餐" 這個標籤後,大分類是 "健康"、次分類是 "健康-飲食",真實標籤名稱是 "早餐",那麼之後請不要把其他文章的標籤設成 "健康" 或是 "健康-飲食",因為原本這兩個分類名稱都會各自統計子標籤的文章數目;如果再把標籤設成 "健康" 或是 "健康-飲食",每個標籤也都會有自己的文章數目,那麼系統就分不出 "健康" 到底是分類還是標籤,也就不知道要怎麼統計文章數目了,希望這樣的說明能夠理解。


五、自訂參數、版面配置

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

C:所有紅字的部分都是可以改的參數──

  showLevel:預設顯示兩層的樹狀標籤,如果想顯示三層就填入 3,以此類推。
2012.7.27 增補

把 showlevel 的參數改為 1,則預設只會顯示一層標籤,就成了預設全部收起的效果。

  showTitleCount:預設會顯示每個大分類、次分類的文章總數;如果不想顯示大分類、次分類的文章總數,請填入 "N"。
  openLogo:展開樹狀標籤的圖案,可改為自己想要的圖示。
  closeLogo:收起樹狀標籤的圖案,可改為自己想要的圖示。
  listLogo:條列標籤的圖案,可改為自己想要的圖示。
  sp:標籤的分隔符號,可自行定義為別的符號,那麼文章的標籤也要改為自定義的分隔符號。例如:改成 "»" 符號的話,標籤就要改成 "AAA»BBB»CCC" 的格式。

E~H:Loop 所有標籤,將標籤名稱、超連結、文章數等資料存在 tLabel_Data 這個陣列,並且排序。

J~T:一言難盡,總之是判斷哪些標籤的大分類、次分類名稱不需要印出。

V~AG:很難解釋,總之是算出每個大分類、次分類的文章總數。

AH:終於有可以修改的地方了──

  k * 10:這是大分類、次分類縮排的 px 值,10 這個數字可根據自己想要縮排的程度而調整。
  color:這裡的顏色數值決定 "開合圖案" 的顏色。

AJ:style='color: #073763; font-family: \"標楷體\"; font-weight: bold;' 這裡的內容決定大分類、次分類的顏色、字型、字體粗細。

AO:k * 10 的改法跟 AH 行一樣,這裡是設定真實標籤名的縮排程度。

AQ~BF:呃...嗯...總歸就是找出開合區域的終點,印出 </div>。

BL:如果每個大分類之間不想要空一行,可以把 <p/> 刪掉。

以上便是大致可修改的地方,每個人喜歡的顏色、圖示、配置、長寬都不一樣,如果改哪裡還有問題請再個別提出了,下一篇的內容為樹狀標籤全部開合的修改方法;如果有排序的問題、開合圖案字元想使用圖檔,請看第三篇。


讓Blogger的標籤能多層樹狀分類」系列標題:
一、基本安裝
二、全部開合
三、各種疑難雜症
四、更新版本

➢➢ 快速選單:

86 則留言:

  1. 你好, 我做完之後發覺下面其他的標籤欄比上面的闊了很多.
    是什麼原因?

    回覆刪除
  2. <8650321958864490223>(以上內容請勿刪除,從括號之後開始留言)
    給我你的網址好嗎?我才能看效果。

    回覆刪除
  3. http://worldtravellersblog.blogspot.hk/
    Thanks a lot!!!!

    回覆刪除
  4. <6645992633482797479>(以上內容請勿刪除,從括號之後開始留言)
    你旅遊的地方滿多的,真令人羨慕,圖片大一點的話就看得更過癮了~~

    我檢查了一下程式碼,發現 BL 行漏了一個判斷式,原本的 document.write("<p/>&lt;/div&gt;"); 應該改成 if(Category_Name[i])document.write("<p/>&lt;/div&gt;"); 這樣就沒問題了,請試試看。我本文的程式碼也把這個判斷式加進去了。

    回覆刪除
  5. <2641541601702951889>(以上內容請勿刪除,從括號之後開始留言)

    o .. 成功了!!! 很開心!! 感謝你啊!!

    另外, 謝謝你的意見啊!!! 我地會慢慢改善的!! 我們還在剛剛開始寫 blog 啊!! ^^

    回覆刪除
  6. <1962027174840378437>(以上內容請勿刪除,從括號之後開始留言)
    我也要謝謝你幫我找出 bug 啊,自己真的沒發現~

    我也滿喜歡看旅遊的 blog,只是我自己沒有寫這方面的主題,其實你的方式也滿特別的啊,資料整理得很仔細,類似導覽的風格;而我側邊欄的友格動態有兩個旅遊為主的 blog,比較接近介紹風光、抒發心情、感想的風格~~

    回覆刪除
  7. 版大你好,照著這篇文章的指示,安裝得非常成功,感謝這個部落格提供了這麼多詳盡的資訊!

    但我有個問題,如果想讓標籤們預設為收起,該如何修改呢?有點不太確定『全部開合』這篇文章的意思,想請教一下 =)

    回覆刪除
  8. <4654073051050364791>(以上內容請勿刪除,從括號之後開始留言)
    不客氣,這些都是自己安裝過程的紀錄,也很高興其他人用得上。

    1. 想要預設收起,請參考本文「五、自訂參數、版面配置」→ C:→ showLevel,把這個參數改為 1,則每次重新載入頁面時,樹狀標籤預設只會顯示一層,就是你要的預設收起的效果了。C 行還有很多其他的參數可以玩喔~~

    2. 第二篇的「全部開合」不瞭解意思嗎?我想只要玩一下我側邊欄的「文章分類」右邊的「全展開」、「全收起」那兩個按鈕就可以看到效果了~~可以省下許多單獨按每個大分類按鈕的時間。

    回覆刪除
  9. 非常感謝!用了幾分鐘就成功完成設定。改天再來拜讀進階設定調整.

    回覆刪除
  10. <1202425209075826330>(以上內容請勿刪除,從括號之後開始留言)
    你分享的單字記憶方式滿不錯的,而且使用 jQuery 與 Tab 的效果很棒,加分不少~~期待更多的分享。

    另外我看到你的安裝效果了,不過我自己不是很滿意這樣的效果,因為小分類與標籤交錯擠在一起,並不美觀,應該要小分類一起先顯示,最後再一起顯示標籤。

    不過這需要小小的技巧,也是「多層樹狀分類」第三篇要寫的內容,我過陣子趕快把第三篇生出來~~

    回覆刪除
  11. 謝謝你的美言。網頁設計我是外行,只是希望幫助學習英文之用。
    期待你的新文章,共沾雨露。

    回覆刪除
  12. <640227714780127744>(以上內容請勿刪除,從括號之後開始留言)
    第三篇」發表了,應該可以解決大部分的問題,請參考。

    回覆刪除
  13. 你好我有個奇怪的問題想請教,
    我照您的方法設定樹狀標籤成功了

    不過我修改範本裡面原本打的 " 符號
    在我儲存範本 再點進去看 都會變成 "
    雖然網頁顯示上是沒問題
    可是我想要修改的時候就變得很眼花...

    不知道您是否知道是哪裡的問題呢?
    感謝!

    回覆刪除
  14. 對了,有套用您語法的測試blog如下
    http://cheertest.blogspot.tw/

    感謝!

    回覆刪除
  15. <1042931696178488651>(以上內容請勿刪除,以下引言請自行刪減) [quote]我修改範本裡面原本打的"符號在我儲存範本再點進去看都會變成"[/quote]
    某些符號無法在留言裡顯示,所以我看不到你留言的符號,請把你的留言用 mail 發給我好嗎? waynefu.g@gmail.com

    回覆刪除
  16. <288812242301643263>(以上內容請勿刪除,從括號之後開始留言)
    1.你改得滿不錯的,字體顏色都有變更,沒想到「使用圖檔取代開合字元」才發文沒多久,你已經套用了,而且 listLogo 我並沒有提及怎麼使用圖檔,你已經換成圖檔了。我注意到你加入 Blogger 的時間沒有很久,但是似乎對 hack 也很有經驗啊~

    2.我觀察到可能是你的字體設定得比較小的緣故,箭頭圖案與大分類雖然已經空一格,或許距離還是太近(跟下面那個網誌封存小工具的箭頭與年份的距離相比);另外就是箭頭圖案或許可以調高 2~3px,不過我相信以你的功力可以解決這些距離的問題。

    3.最後,我發現你的網址為 .tw,這會造成你安裝的 Blogger 官方小工具「Recent posts」、「Recent comments」失效,最好參考一下我另一篇文章「Blogger 自動轉換區域網址的影響及因應之道

    回覆刪除
  17. <1042931696178488651>(以上內容請勿刪除,從括號之後開始留言)
    收到你的mail了,原來你的原文是這樣──[quote]我修改範本裡面原本打的 " 符號在我儲存範本 再點進去看 都會變成 &quot;...[/quote]
    這個問題回答起來可以很簡單,也可以很複雜...不過基於「資訊提供」性質的部落格,還是回答仔細一點比較好。

    若要簡單回答的話,會是「沒錯,這是正常現象,在 Blogger 的範本理,javascript 的區塊很多符號都會被重新編碼,例如 "<" → "&lt;"」

    而要真正解決這個現象,讓程式碼易讀、日後便於維護,有兩種方法:

    1.把javascript程式碼打包成 js 檔外連.(非高手的話不這麼建議,會影響網頁讀取速度)

    2.不想被 Blogger 把符號重新編碼的區段,用以下方式放程式碼:

    //<![CDATA[
    此區段的 javascript 程式碼不會被重新編碼
    //]]>

    但非高手同樣不建議如此做,某些符號就是要被 Blogger 編碼才能執行,沒被編碼的話整段 javascript 可能都失效。

    如果要舉例的話,可能都是 case by case,本文程式碼要放到 //<![CDATA[ 與 //]]> 區段的話,要改的地方太多了,不適合舉例,如果你有其他例子再提出好了,說明這種例子也是很好的「資訊提供」。

    回覆刪除
  18. 感謝你的認真回覆!!:D
    關於& quot;這件事,我想就先算了哈哈哈!
    畢竟我非高手!

    使用圖檔那篇文章太棒了,我設定完看到那篇馬上連過去改了XD
    其實我listlogo沒有使用圖檔,而是投機的換個小符號。

    我對hack的經驗完全是片段的啊!
    對html只有非常非常粗淺的認識(大概就會改改顏色行距這樣而已XD)
    開始用blogger後,想要什麼效果,就拼命的google
    自己吸收一下,土法煉鋼,數據改改、預覽看看XDD 這樣而已。

    只能說非常感謝網路上有你們這些高手啊!

    openlogo跟closelogo的距離問題我有稍微改過了
    感謝你幫我發現 讓畫面更好看的小細節。

    我的主要網址cheermeee@blogspot.tw中的recent posts跟recent comments
    沒有被影響耶,還抓的到資料,
    感謝你推薦的文章,我把他記入我的evernote筆記本了。

    另外感謝你lazyload的最佳安裝法
    成功的解決我討厭的 過一下畫面會跳回最上面的問題。

    大感謝:DDD (不知不覺打超多佔你版面了:P)

    回覆刪除
  19. <6684508777960303320>(以上內容請勿刪除,以下引言請自行刪減)
    [quote]其實我listlogo沒有使用圖檔,而是投機的換個小符號[/quote]
    原來如此,昨晚看過你的測試blog的listlogo是圓形,我還以為是圖案...
    [quote]開始用blogger後,想要什麼效果,就拼命的google
    自己吸收一下,土法煉鋼...[/quote]
    welcome to Blogger, 想當初我進入 Blogger 的世界時也是這樣走過來的,連 HTML 都不懂喔~~真要"感謝" Blogger 把我訓練到今日的地步
    [quote]openlogo跟closelogo的距離問題我有稍微改過了...[/quote]
    改得不錯,我看到了 ^ ^
    [quote]我的主要網址...中的recent posts跟recent comments
    沒有被影響耶[/quote]
    我看了一下原始碼,你主要網址裝的這兩個小工具都是 Abin 版的啊(他的程式碼我太熟了,一眼就看出來了)~~難怪沒問題;而你測試網址的這兩個小工具的程式碼我不熟,所以我猜是官方版的,就失效了。
    [quote]感謝你lazyload的最佳安裝法
    成功的解決我討厭的 過一下畫面會跳回最上面的問題。[/quote]
    真的呀,昨天看你網頁的圖片載入效果就有一種感覺,他不會是有看過我的lazy load文章吧?呵呵,沒想到是真的。以後覺得有幫助的文章,如果沒留言的話可以幫我打個分嗎,看到 lazy load 那篇文章的紀錄,一直以為只有一個人覺得是有用的文章說 XD~~不過現在知道了還是很高興啊!
    [quote]大感謝:DDD (不知不覺打超多佔你版面了)[/quote]
    不客氣 & don't worry, 留言多多益善 ^ ^

    回覆刪除
  20. 請問我要怎麼加大段落行距阿?
    就是每行分類名稱中間
    謝謝

    回覆刪除
  21. <3035460160256836118>(以上內容請勿刪除,從括號之後開始留言)
    我看過你的效果了,這的確是個小問題,版面有點不是那麼美觀。為了讓其他有安裝的人參考效果,我把回答放到「第三篇」的「四、調整次分類的間距」,比較容易理解。

    借用你家的畫面來說明,應該ok吧? ^ ^ 我自己測試了一下效果應該可以,也請測試一下,如果不行我趕快改內容;如果沒問題我就保持這樣的內容了。

    回覆刪除
  22. <6527926250119954460>(以上內容請勿刪除,從括號之後開始留言)
    Sure!!

    這個改變是改變每個標籤的段落行距
    那如果我想改第一層分類和第二層分類的距離
    要如何更改程式碼呢?

    一直麻煩你!
    謝謝WFU大!!!!!!!!!!

    回覆刪除
  23. <5702612991876693442>(以上內容請勿刪除,從括號之後開始留言)
    其實是我感到汗顏,看到你的效果我就知道我改錯了,雖然標籤與次分類的距離拉開了,但每個標籤的距離也都被拉大 5px 了。CSS 真的是我的弱項啊...

    我重弄了一個,如果這次的效果 ok 了,我再來重新編輯最終版的程式碼。

    回覆刪除
  24. <2922503945061460278>(以上內容請勿刪除,從括號之後開始留言)um...我用預覽看...他一整個都不見了欸=D

    回覆刪除
  25. <5459266261227260859>(以上內容請勿刪除,從括號之後開始留言)
    你在線上的話,先按我修正的步驟進行,儲存範本後,保留不正常的狀態,再留言通知我,我去看你的原始碼哪裡有問題。

    回覆刪除
  26. <5459266261227260859>(以上內容請勿刪除,以下引言請自行刪減) [quote]um...我用預覽看...他一整個都不見了欸=D[/quote] 我發現因為我已經將AH行的程式碼都換掉for圖案開合,如此我仍可用這方法嗎?

    回覆刪除
  27. <4757160737953829488>(以上內容請勿刪除,從括號之後開始留言)
    我忘了你有改成圖案,所有我放的仍是非圖案的原始碼, 其實沒影響,你只要把原來的 <div> 新增藍字的部分即可。

    等這個case結案後,我會修改全部的敘述內容。

    回覆刪除
  28. (不好意思~~~@@)
    謝謝WFU大大的留言,我接觸模二已經很多年了,本來和網友都在xuite寫故事,後來大家才陸陸續續搬到blogger,xuite的語法都很簡單,blogger用什麼語法就挫折什麼,不過用出來真的很有成就感。

    不好意思,現在還有新的問題,我從「二層樹狀」要改成「多層樹狀」,功能是有用出來了,但我的出現的問題是:
    1.右邊的功能表除了「標籤」一欄,其他的功能全部都跑到底下去了??
    2.我用APPLE的Safari,無法點進去文章裡面(也就是滑鼠點到「閱讀更多」不會出現一隻手 ),但用IE瀏灠器卻可以點文章進去?
    3.如果我的文章只有一個大分類沒有小分類(也就是AAA-BBB-CCC,這篇文章就是AAA),這樣文章要怎麼改?我曾經把文章改為AAA-AAA-AAA,這篇文章在「標籤」會變成BBB的等級。

    謝謝WFU大大的解決Q_Q

    http://leoyomi.blogspot.tw/

    回覆刪除
  29. <3961189553554460909>(以上內容請勿刪除,從括號之後開始留言)
    [quote]xuite的語法都很簡單,blogger用什麼語法就挫折什麼,不過用出來真的很有成就感。[/quote]
    走上 Blogger 的路不輕鬆啊~~不過喜歡創造自己世界的同好都會喜歡上 Blogger 的,而模擬市民也是創造另一個世界啊~(說實話創造模擬市民的世界對我而言難多了...)
    [quote]右邊的功能表除了「標籤」一欄,其他的功能全部都跑到底下去了[/quote]
    請見本文「四、注意事項」→「第 1 點」,因為你創造了許多目前還沒有任何標籤的大分類。
    [quote]用APPLE的Safari,無法點進去文章裡面...[/quote]
    不好意思我沒有 Apple 可以測試,Safari 的問題可能要請妳有使用Safari的朋友幫忙回答了...不過建議你使用 Chrome、FireFox,無論是效能或顯示效果都比 IE 好百倍!
    [quote]如果我的文章只有一個大分類沒有小分類...[/quote]
    AAA-AAA-AAA 或 AAA-AAA 都是 ok 的,我猜你目前的異常現象也許是第 1 點的問題所引起,請先去除還沒用到的大分類,若還有異狀我再看看。

    回覆刪除
  30. 你好,不好意思。來打擾WFU大了,不知道為什麼我安裝了標籤小工具都找不到那段程式碼,是因為我用的範本是Blogger官方的嗎?如期說是找不到,倒不如說是很小段。會不會是因為我在版型上改變成三欄的關係呢?

    以下為本網誌
    http://hmmichihm.blogspot.hk/

    回覆刪除
  31. <3149257530811810136>(以上內容請勿刪除,從括號之後開始留言)
    我想應該只是你沒有勾選「展開小裝置範本」而已,所以程式碼才會只有一小段,有勾選的話就會看到了。

    因為我再「二、準備動作」→ 第 2 點已經提過這個動作,所以「三、安裝主程式碼」沒有再重複這件事。不過為了避免操作上的誤解,我決定再補充上去。

    回覆刪除
  32. <3149257530811810136>(以上內容請勿刪除,從括號之後開始留言)
    另外我看了你的網頁原始碼,發現你設定了三個大分類["同人","原創","雜談"],由於你目前的文章標籤只有一個:"美戰-遙滿-關鍵字系列"──

    1.請注意本文「四、注意事項」,設定了不存在的大分類會讓版面亂掉。

    2.大分類至少要有 "美戰",樹狀標籤才能顯示出來喔!

    回覆刪除
  33. TAT...已經按照您的方法進行操作,最後出現一個"A"的東西..是不是有什麼錯誤操作了TAT,能幫我看看嗎
    http://findmyapps.blogspot.hk/

    回覆刪除
  34. <2929873134906465934>(以上內容請勿刪除,從括號之後開始留言)
    看了你的原始碼,問題有點多喔:
    1.告訴我你的 OS 系統版本、以及瀏覽器版本好嗎?因為你複製的程式碼竟然包含了編號 A. B. C. 等等,系統當然看不懂這些編號,因為這不是程式碼。我想瞭解是什麼樣的系統版本、瀏覽器版本會導致複製錯誤,公告一下讓其他人知道。另外建議你使用別的瀏覽器,例如 Chrome 或 FireFox 來複製程式碼,正常情況下複製是不會出現 A. B. C. 這些編號的。

    2.你文章的標籤還沒改成 AAA-BBB 的格式。

    本文的說明有點長,所以請耐心按著步驟看完喔~

    回覆刪除
  35. <8310297350476534705>(以上內容請勿刪除,從括號之後開始留言)
    我用的瀏覽器是一個基於chrome的變種瀏覽器,360極速瀏覽器(因為集成了比較多的功能所以比較方便XD)
    感謝你的指導哦,我再試試

    回覆刪除
  36. <843644330129109679>(以上內容請勿刪除,從括號之後開始留言)
    360極速瀏覽器, 好的,我公告一下,有問題請再提出了~

    回覆刪除
  37. <8764973250543541532>(以上內容請勿刪除,以下引言請自行刪減) [quote]已經成功了,謝謝WFU大!原來是我放錯位置XDDD![/quote]
    不知道WFU大會不會研究一下繼續閱讀這個功能?希望它可以在同一頁面展開收合,不用轉換的說。網路上有無腦安裝包,但應該和新版的Blogger無緣了。

    回覆刪除
  38. <3161202659595309136>(以上內容請勿刪除,從括號之後開始留言)
    我想等你的文章比較多時,你會感謝 Blogger "繼續閱讀" 這個功能的。

    你想要的 "同頁面" 展開收合功能,這代表所有的文章內容必須同時讀進記憶體,才有辦法立即展開給訪客看;文章少的時候不會感覺到讀取速度慢,但文章多的時候,訪客有沒有這個耐心就不得而知了。

    因此以我而言,會選擇使用 Blogger 的官方"繼續閱讀"功能。

    回覆刪除
  39. 最近這幾天詳細的看了版大的各篇文章及留言,沒想到您當初連HTML都不懂啊!!但是看到您的部落格還以為是專業人士呢!
    另外,請問一下:在教學裡面有看到可以改文字的顏色及字體,但是沒看到字的大小,因此我自行在AJ這行增加了『font-size: 14px;』這幾個字(亂改的),但是卻沒有效果。請問如果要變更整體樹狀標籤的字體大小,該如何更改呢?
    感謝!

    回覆刪除
  40. <3219200755856583086>(以上內容請勿刪除,以下引言請自行刪減) [quote]沒想到您當初連HTML都不懂啊!![/quote]
    這是真的,當初要在BBS放圖文不方便,所以弄了個部落格;但我又選了難度算是頂級的 Blogger,逼得自己什麼都要懂才行,那段日子真的很痛苦...要非常感謝所有 Blogger 的前輩,留下很好的文章讓我學習,例如 Abin 等等,所以,現在是我回饋的時候了,我每篇文章都盡可能的詳細說明 ^^
    [quote]自行在AJ這行增加了『font-size: 14px;』[/quote]
    已經很接近了,把 "px" 改成 "pt" 就 ok 了!

    回覆刪除
  41. 我有套用你這篇的介紹真的是太好用了 ,

    因為我才剛用網誌不久 , 想請問一下我右邊欄的框框有辦法可以弄

    成一樣的大小嗎 >??

    http://gesanglaba.blogspot.tw/

    回覆刪除
  42. <2943672240871239195>(以上內容請勿刪除,從括號之後開始留言)
    請參考「四、注意事項」第 1 點,你應該是多填了幾個還沒使用的大分類的緣故。如果目前只使用"旅行"、"生活"的話,就先刪了其他的吧。

    回覆刪除
  43. <1127837550525127938>(以上內容請勿刪除,從括號之後開始留言)

    真是太感謝你了 , 沒想到差一點點結果確是大大的不同 , ^^ 看你的BLOG 真的讓我受益很多呢

    回覆刪除
  44. <428989930746659976>(以上內容請勿刪除,從括號之後開始留言)
    不客氣 請隨意逛~ ^^

    回覆刪除
  45. 可以麻煩幫我看看嗎 http://allan-claire.blogspot.tw/

    分享的部分,為何標籤會出現兩次??
    謝謝

    回覆刪除
  46. <3295980579635400448>(以上內容請勿刪除,從括號之後開始留言)
    我看並沒有出現兩次啊,看起來正常。還是你截個圖告訴我是如何不正常。

    不過我看你的程式當掉了,無法收合,我猜是因為你的標籤名稱用了 ' 這個引號,你試著去掉 ' 引號,也不要使用雙引號,這兩個符號在 js 裡面當成字串的話會讓程式當掉。關於這件事我也要另外再補個公告。

    回覆刪除
  47. <5612592928528882997>(以上內容請勿刪除,從括號之後開始留言)謝謝 刪除引號 就OK了

    回覆刪除
  48. 不好意思,又來請教您問題了。
    1)想要讓大分類也能做link,出現點選"▼"的效果,不論點"▼"或按大分類名都可以展開,要怎麼修改?
    2)我的"文章分類"到第一個大分類之間,空格很大,爬了您寫的hack幾篇文章,我好像只看到修改k值(可能是我漏看了…@@),請問這部分能怎麼修改?
    謝謝

    回覆刪除
  49. <8683411825569726801>(以上內容請勿刪除,從括號之後開始留言)
    1. 說到第一點就慚愧了,回頭看當初寫的程式碼真是亂的可以,要改成按大分類名稱可展開的話,會動到的地方很多。請先忍耐一下好了,過陣子我來重寫程式碼,以利於各種需求的修改。

    2. 我用開發人員工具看,不知為何你多了兩行空行,所以請你將 <div class='widget-content list-label-widget-content'> 到 <script type='text/javascript'> 之間的內容全部移除試試看。

    看了您標籤的文章數量,著實嚇了一跳,對我而言真的是海量啊~應該跟您討教一下如何成為快速的寫手!

    回覆刪除
  50. <2902844957147017307>(以上內容請勿刪除,從括號之後開始留言)謝謝您的回覆。我把那行奇怪的玩意弄掉了,不知打哪來的^^"
    敬待您的新版本. 先說謝謝唷~
    ps.因為寫了很多年的blog,廢話難免多了些,文章數就不小心爆成這樣子了^^"

    回覆刪除
  51. 不好意思想問一下, 為什麼我照上面的做 標籤上的東西全都消失了呢?

    回覆刪除
  52. 我試了好久還是不行~~請救命啊

    回覆刪除
  53. <8450515031316209017>(以上內容請勿刪除,從括號之後開始留言)請給網址才能知道是什麼狀況

    回覆刪除
  54. http://hkgold123.blogspot.hk/
    這是我用來做測試的

    真正的在
    http://diablohkgold.blogspot.hk/

    我試過都還不行 所以才想說會不會我把CODE弄亂了
    就開一個新的測試網頁

    回覆刪除
  55. <4786753563468261356>(以上內容請勿刪除,從括號之後開始留言)我看了你的測試網頁:

    1. 「二、準備動作」--> 第3點的程式碼你還沒安裝

    2. 你的標籤並沒設定成 AAA-BBB 的格式

    請先完成以上兩個動作.

    回覆刪除
  56. <2422821399083897141>(以上內容請勿刪除,從括號之後開始留言)

    是不是跟我的文章有關? 所以才不顯示呢@@

    回覆刪除
  57. <1554182924676864349>(以上內容請勿刪除,從括號之後開始留言)

    感謝 馬上改!

    回覆刪除
  58. <1554182924676864349>(以上內容請勿刪除,從括號之後開始留言)

    超級無敵大成功!!!感謝大大

    原來是標籤出了問題, 還有我有時候忘了按"展開小裝置導至有錯亂,

    無限感激!

    回覆刪除
  59. 不好意思, 不知道為什麼跟著你的步驟去改
    最後標籤欄全都不見了><

    http://kazeal138.blogspot.hk/

    謝謝

    回覆刪除
  60. 抱歉, 我解決了
    原來之前在後台版面配置裡有改過TAGS的設置
    現在改做所有標籤就沒事了

    回覆刪除
  61. 大大抱歉還是我, 請問標籤內的排列是怎樣排好??
    例如您的BLOG為例, 如果第2層內還有第3層的TAG的話, 就會放在最上, 如此類推
    但是在我的BLOG裡, 是真實標籤裡混著第2層TAGS
    感覺有點亂
    請問如何排好??

    最後找到這篇文章真的很好, 一直很郁悶為什麼blogger的標籤不像其他blog一樣, 沒想到可以自己做xd

    回覆刪除
  62. <7025640562414978057>(以上內容請勿刪除,從括號之後開始留言)
    你的標籤排序問題在系列文第三篇「三、各種疑難雜症」-->「一、解決排序問題」可以找到答案。
    不過,大約一個星期之內我會出更新版的「樹狀標籤」,裝新版的程式碼也能解決這個問題,看要不要到時再裝新版的囉!

    回覆刪除
  63. 原來是自己沒看到-3-"" 待會弄弄看
    如果還是弄不到就等大大的新版了
    謝謝解答><

    回覆刪除
  64. 怎樣才能標簽跟著我想要的排序呢??

    回覆刪除
  65. <7834807015464848251>(以上內容請勿刪除,從括號之後開始留言)
    Blogger文章分類__「多層樹狀標籤」更新版」→【留言 #01】的回答

    回覆刪除
  66. 好實用❤ 順利把樹狀圖建好~ 非常謝謝你的分享!!!:D

    回覆刪除
  67. <5639422279074401637>(以上內容請勿刪除,從括號之後開始留言)不客氣,有新版本了喔,建議裝新版比較好用。

    回覆刪除
  68. 謝謝您的分享,我也成功改好了,這樣以後文章量大就沒什麼問題啦,真的很感謝您喔!
    也請兄至敝blog參觀指教,謝謝!
    http://celadon-dt.blogspot.tw/

    回覆刪除
  69. <4975679729108902394>(以上內容請勿刪除,從括號之後開始留言)不客氣 ^^
    工藝類的網站不多呢~

    回覆刪除
  70. 請問: 您文中的步驟二. 3中提到: 把下面的 Javascript 插入 /head 的前面
    我在小工具中找不到head, 只看到 Header1 請問是這個嗎? (我想可能是Blogger版本的差異所致吧)

    回覆刪除
  71. <4065817638626320280>(以上內容請勿刪除,從括號之後開始留言)你留言到這篇舊版的文章了,請按照更新版的安裝步驟吧!

    回覆刪除
  72. <1317694302325448066>(以上內容請勿刪除,從括號之後開始留言)謝謝。

    回覆刪除
  73. 我正在設法將原有標籤改成 I. A - D, II. E - H, III. I - L的大分類,可是還試不出階層的效果。
    可否請您幫忙看一下我的網頁右邊標籤中間在 I 的部分 (I. A - D-Adele, I. A - D-Agnès Amann, I. A - D-Aleksey Arkhipovskiy, I. A - D-Amer-Inkas, I. A - D-becixmat 應該是要隸屬於 I. A - D 這個大分類之下的)
    我不太清楚我是在哪裡出了問題,可否可以麻煩您幫忙指正?
    網址: http://www.05.phf-site.com/

    回覆刪除
  74. <7097946365266131441>(以上內容請勿刪除,從括號之後開始留言)我看不出你的網頁有安裝我樹狀標籤的程式碼,也看不出你有把標籤改成樹狀標籤的格式,請先按相關文章的說明操作吧。

    另外,樹狀標籤的問題,麻煩留言在樹狀標籤的文章囉~

    回覆刪除
  75. <6172269060072671276>(以上內容請勿刪除,從括號之後開始留言)
    1. 抱歉--這裡不就是關於樹狀標籤的文章留言區嗎??
    2. 我有在後台處理過 所以標籤的地方才會出現三角型的東西啊(我再去檢查看看好了 謝謝)

    回覆刪除
  76. <2735554054328037701>(以上內容請勿刪除,從括號之後開始留言)真是不好意思,我從email看你的留言,由於連續有你的兩個留言,我以為都在「留言板」,是我的錯~

    另外,如我前面所提,這篇是舊版的樹狀標籤,請按照更新版的樹狀標籤說明「安裝程式碼」以及「修改文章的標籤」吧!

    回覆刪除
  77. <627164623123947345>(以上內容請勿刪除,從括號之後開始留言)
    謝謝您。
    我今天下午用同樣的方法處理另一個未公開的部落格是成功的,但我不知道為何在這個部落格會不成功(很可能是在大分類的名稱中不能出現 "-"吧,因為我稍早在另一個部落格中發現那樣命名好像會有問題。)謝謝您的協助,我再試著更改分類名稱試試看。

    回覆刪除
  78. <5806345743650112465>(以上內容請勿刪除,從括號之後開始留言)從你的敘述來看,似乎意思是你的大分類名稱有 "-",但是我看你的網站 http://www.05.phf-site.com/,只有兩個標籤 "PHF" 與 "學習策略與資源 (learning strategies and resources)",並非樹狀分類,而且從網頁原始碼也看不出有我的程式碼喔!

    回覆刪除
  79. 作者已經移除這則留言。

    回覆刪除
  80. <2175149311914548917>(以上內容請勿刪除,從括號之後開始留言)http://phf1964-13.blogspot.tw/ 這個部落格沒什麼問題啊

    總之, 如果試不成功時, 把有異狀的情況留給我看, 才能查看原因是什麼. 如果只是敘述而沒有異常狀況的網站可以查看, 就比較難分辨是什麼原因了.

    另外, "-" 是分割大分類、小分類、真實標籤的符號,樹狀標籤的字串裡面有任何的 "-",標籤就會被分割的。

    回覆刪除
  81. <6328658384338608674>(以上內容請勿刪除,從括號之後開始留言)
    先不麻煩您-我自己先試試好了,因為我剛才在"music and images"的部落格把"-"改成"~"也不行。我想應該就是這類的問題導致無法成功顯示階層吧。謝謝,暫時不打擾您了,我自己再試試看。

    回覆刪除
  82. 不好意思 我重複更改 AAA-BBB 文章標籤的地方 但還是出不來耶
    http://tim12332013.blogspot.tw/ 能不能幫我看看 謝謝你@@

    回覆刪除
  83. <5712101693662531876>(以上內容請勿刪除,從括號之後開始留言)建議你留言在更新版那篇,這篇算是舊版~

    請參考更新版的留言 → 第二頁 → 留言#36 → 檢查一下,「標籤」小工具的設定有沒有動到(例如是否設定顯示所有標籤)

    回覆刪除
  84. 從這一步驟就開始沒用了
    因為根本沒有head
    3. 接著把下面的 Javascript 插入 的前面:

    回覆刪除
  85. a0988522319@gmail.com
    請高手解惑
    我想完成標籤的分類

    回覆刪除
  86. <7428693934048876570>(以上內容請勿刪除,從括號之後開始留言)這篇是舊版,請看開頭的公告改安裝新版。

    回覆刪除

張貼留言注意事項:

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