2012年8月1日 星期三

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

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

Wayne Fu 0 A+

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

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 &lt; showLevel - 1) ? closeLogo : openLogo, sDisplay = (k &lt; 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的標籤能多層樹狀分類」系列標題:
一、基本安裝
二、全部開合
三、各種疑難雜症
四、更新版本

➢➢ 快速選單:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP