2011年8月1日 星期一

[教學]將 Blogger「標籤」小工具放在導覽列實作

[教學]將 Blogger「標籤」小工具放在導覽列實作

Wayne Fu 0 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的標籤能樹狀分類」系列標題:
一、原理篇
二、安裝篇
三、全部開合
四、記憶開合狀態

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

沒有留言:

張貼留言注意事項:

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

TOP