2011年8月9日

讓Blogger的標籤能樹狀分類__(一)原理篇

A+

(Pic from: 123rf.com)
一、前言

Blogger 的文章一多後,側邊欄的標籤就會像堆滿雜物的儲藏室,不分類一下的話看起來十分凌亂,尤其是看到一團密密麻麻的標籤雲時。

在網路上搜尋了各種將標籤樹狀分類的方法,找到「愣阿批居:Blogger 支援樹狀結構多層次標籤」這個方案最佳,優點為:「1. 可分類標籤」、「2. 大分類可收合(節省空間)」、「3. 不必手動擴充標籤」、「4. 統計各標籤文章數」。

2012.6.8 公告

本文為 "兩層式" 樹狀標籤,現在已經有新版 "多層式" 樹狀標籤,如果有兩層以上的分類需求,請參考「讓Blogger的標籤能"多層"樹狀分類__(一)基本安裝


「不必手動擴充標籤」是一項很方便又重要的突破,因為許多樹狀分類的方案,若想在大分類之下新增小分類,必須重新打開程式碼來手動新增,這是很麻煩的事。可惜此方案在 IE 下執行會出錯,而偏偏 IE 是最多使用者的瀏覽器。愣大 的這個方案是改寫自有名的樹狀程式「dtree」,對於原始程式由於實力不足無法全看懂,且 愣大 尚無暇修正 IE 下的 bug,只好自行土法煉鋼研究 javascript 語法,直接 hack Blogger 的原始碼來達到上面所提的四大需求,以下是自行求解過程的筆記。


二、Blogger 標籤功能原始碼

在側邊欄有新增「標籤」這個小工具的話,相信在範本內可找到類似以下的原始碼:

    <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>

這一整段就是要 hack 的地方,裡面的意思 愣大 在 該篇文章 有大略解釋過,也有提到「官方文件」對於一些參數的說明。而以上一大段的程式碼對於 hack 有需要的地方只有四行:

  1. <b:loop values='data:labels' var='label'>
  2. <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
  3. <span dir='ltr'>(<data:label.count/>)</span>
  4. </b:loop>

A. 將所有標籤丟進迴圈
B. 顯示標籤名(包含列出該標籤文章的超連結)
C. 顯示標籤文章數
D. 結束迴圈

這四行是要 hack 的主幹,以下是針對這四行進行修改擴充、達到三大需求的概念流程,若想跳過流程直接套用程式碼的話可直接看「讓Blogger的標籤能樹狀分類(二)」。


三、概念流程

1. 設定大分類:

愣大 設定標籤的方式 " [AAA][BBB]C ":AAA代表第一層大分類,BBB是第二層,C才是真正標籤。不過 WFU 的版本只有使用兩層而已,因為認為兩層就足夠保持版面的美觀了,所以目前還沒有三層以上的需求。有需要用到三層以上標籤的朋友,可參考此篇的概念自行擴充程式碼。

另外使用此版本的標籤,建議使用 "AAA-BBB" 的形式,因為如果有使用 Abin大 的「相關文章 (Related Post)」hack,那麼標籤 AAA 用刮號 "[]" 框起來會造成標籤判讀錯誤的問題,在該篇文章下面的留言有人提到此事,且有些符號會造成標籤的判讀錯誤,為了保險起見,"AAA-BBB" 是 WFU 測試過的安全格式,但若分隔符號不想用 "-" 的話就得請自行測試是否 OK 了。

接下來,將大分類 "AAA" 的變數取名為 "Category_Name",設為字串陣列:

var Category_Name=new Array("休閒","理財","電腦")
想要幾個分類名稱都可自行置換


2. 處理大分類

for (var i=0;i<=Category_Name.length;i++)
{
document.write("<b:loop values='data:labels' var='label'>")

var OldLabel = "<data:label.name/>"
var LabelPosition = OldLabel.search("-")
var Category = OldLabel.substr(0,LabelPosition)
var NewLabel = OldLabel.substring(LabelPosition+1)

利用 for 迴圈,一個個處理 "Category_Name" 裡面所有的大分類字串。

參照本文第二節的原始碼,"<data:label.name/>" 存放原始的 "AAA-BBB" 標籤名稱,現在要將它分解:"AAA" 分解為 "Category" 變數;"BBB" 分解為 "NewLabel" 變數。

如果標籤不是用 "-" 來分隔的話,「OldLabel.search("-")」這裡雙引號內記得換成自選的分隔符號。


3. 收合大分類

A. 這個網頁是網路上搜尋到將某區塊 "隱藏、顯示" 的切換語法:

Toggle Visibility - Show/Hide Anything

B. 這個網頁是網路上搜尋到的 "文字、符號" 切換語法:

Swapping Content


為了有以上兩個效果,先將以下語法丟到 </head> 之前:

<script type='text/javascript'>
function hide(sec)
{
var e = document.getElementById(sec);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}

function swap(me,main,alt)
{
me.innerHTML = (me.innerHTML == main) ? alt : main;
}
</script>

接著以下的語法就能實現大分類的收合效果,效果可直接在本 Blog 右邊側邊欄,對所有分類進行收合測試。

if (Category == Category_Name[i])
{
document.write("<div style='color: #073763; font-family: \"標楷體\"; font-weight: bold;'><span onclick='hide(\""+Category_Name[i]+"\");swap(this,\"➥\",\"➷\")' style='cursor: pointer; color: #3778cd;'>➷</span>《"+Category_Name[i]+"》</div>")

以上的格式、顏色、字形、符號,可自行置換成自己喜歡的樣式。另外,document.write 的括弧裡面把程式碼當字串塞進去時,有雙引號「"」的地方都要改成「\"」


4. 顯示真正標籤

document.write(" ➨ <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><span dir='ltr'>"+NewLabel+"</span></a>(<data:label.count/>)<br/>")
這一段就是修改第二節的那四行原始碼中的 B、C 行,為了美觀增加一些空格、符號,然後將原本的標籤名稱置換成我們的真正標籤 "BBB":"NewLabel" 變數。


好了,以上 1~4 點的流程為了方便,採獨立說明的方式,要整合這 4 點起來需要增加一些連接的程式碼,且還會遇上一些困難,下一篇將這 4 點的程式碼全部串起來一併說明。


1. Blogger 支援樹狀結構多層次標籤」
2. 加入相關文章功能 (Related Post)
3. Toggle Visibility - Show/Hide Anything
4. Swapping Content

讓Blogger的標籤能樹狀分類」系列標題:
一、原理篇
二、安裝篇
三、全部開合
四、記憶開合狀態

➢➢ 快速選單:

8 則留言:

  1. 已安裝WFU版樹狀標籤,請問2層和3層或多層標籤分類可以同時存在嗎?謝謝。

    回覆刪除
  2. Re: J.C. <346884923168337098>

    不好意思,本文中已提及此事

    "目前還沒有三層以上的需求。有需要用到三層以上標籤的朋友,可參考此篇的概念自行擴充程式碼"

    要請自己研究了~~

    回覆刪除
  3. 不知新版本何時會有教授分類編碼呢?^_^

    回覆刪除
  4. <2473533454613739083>(以上內容請勿刪除)
    教授不敢,分享而以~~這陣子因為 blogger 轉址的事件忙得暈頭轉向,還沒時間整理新版的程式碼。不過既然有需求的話,我盡快在這禮拜內弄出來了~~請稍待兩三天。

    回覆刪除
  5. 謝謝你!!!
    另外,我想問…blogger是否不能設定每篇的觀賞權限?
    有沒有一些編碼我設定呢??
    感激!^^
    <515717698279648766>(以上內容請勿刪除)

    回覆刪除
  6. <2081375524967915409>(以上內容請勿刪除)
    1. 呵呵,我有到你家留言喔,不曉得你有沒有設定留言 email 通知?單篇文章不能設權限,但可以加密,請參考:「Blogger 文章相關工具及技巧 (筆記)」→ 特殊需求 → 加密文章 或 懶人無障礙加密網頁

    2. 使用「回覆」功能時,留言內容請接在 " <515717698279648766>(以上內容請勿刪除)" 這樣的字串後面寫,回覆功能才能生效。我也要再修改一下程式,避免留言方式被誤解 ^ ^

    回覆刪除
  7. <3687696970013691389>(以上內容請勿刪除)

    設定留言 email 通知???
    是在設定---文章和留言那裡設定?
    但我找不到呢..T.T~~~

    回覆刪除
  8. <2762785815989866709>(以上內容請勿刪除)
    後台 → 設定 → 行動裝置及電子郵件 → 留言通知電子郵件 → 填進你的 email → 儲存設定

    以後你家有留言就會通知你啦~~而這邊的留言按下留言框下方的「以電子郵件訂閱」,有回覆也會通知你的。

    回覆刪除

張貼留言注意事項:

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