讓Blogger的標籤能「多層」樹狀分類__（三）各種疑難雜症

(Pic from: I Loathe Multi Level Marketing)系列文「第一篇」提供了基本安裝的程式碼，如果有客製的需求時日後容易擴充。本篇的主題為解決多層樹狀分類標籤的一些疑難雜症，而如果有提出客製的相關問題，之後一併集中更新到此篇。

2013.1.4 公告

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


一、解決排序問題

如果使用到第三層以上的分類時，那麼在第二層就有可能出現「大分類」與「標籤」交錯排列的情形，如下圖──



且上圖的前三個大分類「Blogger Hack」、「Blogger 工具」、「部落格相關」已經是動過手腳後的排序方式，否則分類會跟標籤交錯的更難看。那麼有辦法改進排序方式嗎？

其實原始程式碼已經有做過排序的動作，但實際上 javascript 只能針對英數字串做排序，而中文字串目前單靠 javascript 要做排序，是不可能的任務，因為中文在 javascript 裡是用 unicode 做處理，而非依照正體字習慣的 big5 碼順序；如果看過中文正體字的 unicode 編碼，就會發現文字排列順序跟我們想像的不太一樣。

雖然中文無法排序，不過退而求其次，讓第二層的所有「大分類」能集中在一起，倒是有密技可用──解決方法為「在第二層的大分類名稱之前加入"空格"」，例如原本的標籤分類為「電腦-Google 相關」，現在改成「電腦- Google 相關」，在 Google 前面空一格。

相關文章都套用標籤完畢後，請參考右邊側邊欄的「文章分類」，有沒有發現「電腦- Google 相關」已經跑到「電腦- 部落格相關」的上面了？不會像上圖般跟第二層的標籤「電腦-Blogger 相關」、「電腦-Blogger 筆記」等等排列在一起。

而且更令人高興的是，由於我的程式碼在"開合圖案"後面已經先空一格，雖然我們在分類名稱之前空一格，但在 HTML 環境下不會列印連續兩個空格，再多的連續空格也只會印出一個空格，所以版面不會變得難看。因此在「電腦」大分類之下的所有小分類「Blogger Hack」、「Blogger 工具」等等，我都是小分類名稱前空一格。如此一來在排序時，空格開頭的次分類字串全部會排序在前，而沒有空格的那些標籤名稱，全部會排序在後，這就解決了版面排序美觀的問題。以此類推，第三層以後的所有次分類，都是依此要領"空一格"來命名即可。



二、開合圖案字元錯亂的問題

很奇怪，Blogger 在處理某些字元是總是會切換錯誤，例如使用 "▼"、"►" 這樣的字元當作開合圖案，切換後總是會變形，這個問題在當初兩層樹狀標籤時就已經存在。

為了遷就 Blogger，只能另外找別的字元使用；而我的解決方法是使用最小的箭頭字元 "▾"、"▸" 就不會被 Blogger 切換，但如此一來跟文字的大小不搭配，只好手動調整該區塊的 span 標籤的 style 細項，把 "▾"、"▸" 尺寸加大，但加大後整行的上下高度又會亂掉，得另外調整上下的 margin 參數。

如果對語法不熟的話，並不建議採用我的解決方法，可能會把版面搞的大亂。因此，真的找不到理想的開合圖案字元，那麼可以參考下一節──使用圖檔取代開合字元。

2012.10.27 更新

今天忽然發現，在第一篇的部分 Blogger 似乎把字元切換錯誤的 bug 修正過來了，因此第一篇可使用 "▼"、"►" 當開合圖案；但第二篇全開合若使用 "▼"、"►" 的話，在標題位置的圖案似乎還是會有問題，因此標題位置的圖案可使用第三點圖檔的方式。

三、使用圖檔取代開合字元

1. 準備動作：準備兩個開合圖檔， 長寬建議為 1:1，像素建議至少 30px 以上。

2. 接著修改原來的程式碼，以下的行號請參照「第一篇」的程式碼：

C：以下藍字、綠字為修改的部分──

藍字部分請改為自訂的展開圖案網址；綠字部分請改為自訂的收合圖案網址。

AH：這一行變動的比較大，請全部置換為以下程式碼──

以上兩個紅色數字 15 為預設尺寸，可改為自訂的圖片長、寬像素，但要避免太大以免影響行距；儲存後即可看到效果。


四、調整次分類、標籤的間距

第一篇的「留言 #11」朴米唯 詢問「如何改大分類與次分類之間的距離？」如果是大分類之間的距離，在原始碼 BL 行利用了一個 <p/> 讓大分類之間的間距有一行，其他項目的間距可藉由調整 style 的 margin 值來修改，以下整理了分類之間與標籤之間的距離如何修改。

1. 次分類的間距：

借用「A Casual Place」的效果，以下左圖為未調整前的標籤欄位圖片、右圖為調整後的標籤欄位圖片：



若要讓「仁顯王后的男人」、「屋塔房王世子」等次分類的上方都能留一點點空間，請找到「第一篇」原程式碼，按以下步驟修改：

A. X 行新增以下藍字、紅字部分：

var m_top = (k != 0) ? "5" : "0", count = 0, showcount = "", id = x.join("") + k, sLogo = (k < showLevel - 1) ? closeLogo : openLogo, sDisplay = (k < showLevel - 1) ? "block" : "none";
B. AH 行的開頭請找到 <div> 字串，新增以下藍字部分：

<div style='margin-top:"+ m_top +"px;'>
以上的意思為，大分類的 margin-top 不變動，次分類的 margin-top(距離上方)設定為紅字的 5px，5 這個數字可自行增減。改完大致就是上面右圖的效果(用 photoImpact 調整的效果圖)


2. 真實標籤的間距：

改完次分類的間距，若也想要調整真實標籤之間的距離，請找到第一篇原始碼的 AO 行，新增以下藍字、紅字部分：

document.write("<div style='margin-left:"+ k * 10 +"px; margin-top: 3px;'>"+ listLogo +" <a dir='"+ tLabel_Data[j][1] +"' href='"+ tLabel_Data[j][2] +"'><span dir='ltr'>"+ x[k] +"</span></a> ("+ tLabel_Data[j][3] +")</div>");
這一行的程式碼是真實標籤區塊的內容，margin-top 是設定與上方區塊的距離，想要再增減距離，請調整紅字 3 這個參數即可。


備註：之後如有新的自訂配置問題會持續在本篇更新。


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

➢➢ 快速選單：１ ２ ３ ４