2012年8月13日

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

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的標籤能多層樹狀分類」系列標題:
一、基本安裝
二、全部開合
三、各種疑難雜症
四、更新版本

➢➢ 快速選單:

24 則留言:

  1. 嗯,真是清楚明白的分析。一定會找機會來改進。謝謝分享!

    回覆刪除
  2. <6429732921696167667>(以上內容請勿刪除,從括號之後開始留言)
    不好意思剛發佈完就發現前一篇有 bug,所以目前這三篇的程式碼都有改了一小部分,如果你要安裝這一篇的話,請記得要從第一篇開頭的公告開始看起,按照說明來修正程式碼。

    回覆刪除
  3. 經過今天一整天的網頁改版,我成功了
    成功安裝多層樹狀和圖片開合!
    謝謝WFU大

    回覆刪除
  4. <7888901163106255317>(以上內容請勿刪除,從括號之後開始留言)
    呵呵~真是感動捏!設計了那麼的多參數與功能,你是目前我看到使用最多、改最多的,真是值得欣慰了 ^^

    不過要從舊版改到新版,我相信一定花了很大的功夫,說不定還有意外,恭喜你成功了!

    另外,我看到你的留言板冒出來了,我猜會不會是 Cbox 的留言機器人太多,所以你才關了。之前就有計畫弄個首頁留言板,過陣子如果弄出來了再給你參考看看~

    回覆刪除
  5. <1228968103601303952>(以上內容請勿刪除,從括號之後開始留言)
    謝謝^^一開始版面都亂了,把全部標籤用好才OK 哈哈

    留言板不忍說有很多怪怪的留言,又忘記怎麼刪掉,想說先關掉找其他留言板,結果找到解決方法啦!!

    期待WFU大的留言板

    回覆刪除
  6. 成功了!!剛剛一定是網路有問題!!!

    回覆刪除
  7. <5648318981946395807>(以上內容請勿刪除,從括號之後開始留言)
    我看到你 AO 行的 margin-bottom: 3px 還留著,這樣第一個標籤跟次分類的距離反而太近。你試試看把 margin-bottom: 3px 改成 margin-top: 3px 如何?

    回覆刪除
  8. <3170150849123570362>(以上內容請勿刪除,從括號之後開始留言)OK!!改成top效果比較好
    感謝WFU大!

    回覆刪除
  9. <4761299844108491332>(以上內容請勿刪除,從括號之後開始留言)
    ok, done, 來修改本文內容了~~

    回覆刪除
  10. <2503086277347646693>(以上內容請勿刪除,從括號之後開始留言)
    不客氣! sam. 拜訪了你的網站, 很佩服喔, 同時經營那麼多網站, 且很多都是 PR4, 你一定是 SEO 專家!我的站不知哪裡出了錯, 雖然外部連結不少, 但永遠都是 PR0 或 N/A...

    BTW, 在「愛樂頌」的歌手列表裡, "卡通歌曲" 這個標籤跟其他次分類夾雜在一起, 想要解決這個排序問題, 可參考本文的「一、解決排序問題」.

    回覆刪除
  11. 我不是專家啦,其實我也不知道那PR4怎麼來的,我只是去Google和Yahoo登錄網址,和一些人交換連結,和大家做的都差不多~

    感謝你來參觀我的網站,謝謝你的建議,晚點就來試試看。

    回覆刪除
  12. 請問blogger的標籤要如何自訂排序呢?謝謝!

    回覆刪除
  13. <1485378648646360168>(以上內容請勿刪除,從括號之後開始留言)
    不太清楚您的意思,可以詳細描述您的問題嗎,是官方小工具的標籤還是我的樹狀標籤?要哪種自訂排序?

    回覆刪除
  14. <7659587767111255174>(以上內容請勿刪除,從括號之後開始留言)抱歉,我問的是官方小工具的標籤,一般只能按照字母排序,有辦法按照自己想要的順序去排嗎?

    回覆刪除
  15. <3434644535719973702>(以上內容請勿刪除,從括號之後開始留言)
    官方小工具的標籤排序有兩個選項,一個是「字母」,另一個是「依頻率」,想按自己的方法排只能寫 javascript 來 hack 了。呵呵,我還是不知道你想用哪種方式排序~~

    回覆刪除
  16. <432667645577837038>(以上內容請勿刪除,從括號之後開始留言)有啊,我有說想要按照自己的方法來排序壓。
    那您的部落格有介紹用javascript 來 hack 標籤排序的文章嗎?還是哪裡有這樣的資訊呢?謝謝!

    回覆刪除
  17. <4259606184615470848>(以上內容請勿刪除,從括號之後開始留言)
    你沒說你的方法是怎麼樣的排序法,我也不知道要怎麼回答你...

    回覆刪除
  18. <6508832841448914298>(以上內容請勿刪除,從括號之後開始留言)就是自己指定哪個標籤為第一、第二、第三的順序,以此類推這樣。

    回覆刪除
  19. <7618797307057260945>(以上內容請勿刪除,從括號之後開始留言)
    原來是這樣子排序,由於這種方式無法邏輯化,就無法寫成程式自動執行,所以也不需用上 javascript 了。

    建議你使用官方小工具"連結清單",手動一個個加入標籤的連結,就能自訂順序了。

    回覆刪除
  20. <3099673706871493914>(以上內容請勿刪除,從括號之後開始留言)嗯,我試過可以用了,謝謝你提供的方法喔!

    回覆刪除
  21. WFU大,我又來求救了~!我有問題是
    1.樹狀標籤的部分會有個驚嘆號出現,如此是正常的嗎?
    2.我終於安裝好單篇瀏覽人數的統計,但我昨天發現有的文章有有的文章沒有,今天起來看發現都消失了@@
    拜託您幫我解惑,周末坐在電腦面前茶不思飯不想的改版,昨天以為成功了,感謝感謝~~

    回覆刪除
  22. 剛剛忘記提供我的Blogger: http://missirenelj.blogspot.tw/
    麻煩WFU大,感恩~~

    回覆刪除
  23. <7635837574143029605>(以上內容請勿刪除,從括號之後開始留言)hi~小茄,
    1. 這個驚嘆號嘛~其實是版權圖示,因為你在這篇留言(這是舊版),不確定你有沒有看過新版,「多層樹狀標籤更新版」的開頭有張樹狀標籤的圖,就會看到這個logo了!

    2. 單篇文章瀏覽數的問題,麻煩在那篇文章留言了,這樣其他讀者可以參照可能發生的問題,tks~(我看你放的位置,可能剛好會被官方的程式碼隱藏起來,建議你先放在其他比較明顯的位置處,先確認程式碼可以正確執行後,再逐步嘗試其他位置,會比較保險)

    回覆刪除

張貼留言注意事項:

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