2013年1月1日 星期二

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

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

Wayne Fu 0 A+

(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-tree-label-simplify-1


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

blogger-tree-label-simplify-2



三、安裝程式碼

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

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="http://2.bp.blogspot.com/-nn8uU4LhVtM/T8cdzYQnUZI/AAAAAAAACos/JcGy8V05y84/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,下個版本應該會開放出來更改。目前的替代方案,可以改用圖片來取代圖示字元,請參考註釋的說明,那就可放自訂顏色的圖片了。


更多實用工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章
TOP