2012年6月1日 星期五

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

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

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

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

沒有留言:

張貼留言注意事項:

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

TOP