2011年10月20日

讓Blogger的標籤能樹狀分類__(四)記憶開合狀態

A+

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

上一篇」讓樹狀分類有全部開合的功能後,本篇要探討的是能否做到像「dtree」樹狀分類能夠記憶標籤開合的狀態。這個功能經測試後,乍看之下很神奇,可惜的是在不同的頁面多按幾次就會亂了調。

2012.6.8 公告

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


為了找出在不同頁面下錯亂的規則,經過不斷地交叉測試後終於發現,dtree 是利用 cookie 來記憶開合狀態,但是 Blogger 會在首頁存一個 cookie、搜尋頁也存一個 cookie、不同年份的文章也會有不同的 cookie。因此一開始在首頁點擊標籤的狀態,由於其他頁面尚未儲存 cookie,首頁的狀態會帶到其他頁面去,但是等其他頁面儲存了各自的 cookie 後,首頁會有首頁的標籤開合狀態,其他頁面會各自記憶自己的標籤開合狀態,並非保持最後一次的開合狀態。而關閉瀏覽器後,cookie 壽命終了,等到重新開啟瀏覽器後,首頁會再回到預設狀態,然後開始新的循環。

感覺上這個功能有這麼一點用處(對於首次拜訪的使用者而言),但又不是十分地實用(對於多次拜訪的使用者而言),會拿這主題來研究一下主要是因為沒有寫過 cookie 的語法,就當成一個作業熟悉一下 cookie 對以後也是有幫助,另外再將 dtree 的這個功能改進一下,讓其更實用一點。

2011.10.29 修訂 cookie 效用頁面的內容

原內容對 cookie 的特性認識不夠,最近研究 Blogger 私密留言的功能時才發現 cookie 的正確寫入語法,因此將本文程式碼做小部分修訂,修訂之後本篇的內容可將所有「開合動作」改變的狀態寫入 cookie,並且讓 cookie 的時效延長,以及 cookie 效用可延伸到各個頁面。dtree 版本的 cookie 壽命等到關閉瀏覽器便結束,WFU 版本的 cookie 壽命延長,且標籤會記住最後一次的的開合狀態,省去使用者重新按開關的次數。


準備動作:

請先對照「讓Blogger的標籤能樹狀分類__(三)全部開合」→「準備動作」的內容,到 Blogger 後台 → 範本 → 編輯 HTML。接著把下面的 Javascript 插入 </head> 的前面:


黑色部分是「上一篇」的程式碼,因此要增加的為紅字部分。

Label_Open 函數:

J:在函數中,加入寫入 cookie 的動作,寫入 "大分類 = 1"。

K~M:直接照抄書本範例,意思為設定 cookie 的壽命,並將 cookie 效用延伸到 Blogger 的各個頁面;如果沒有這三行,cookie 的壽命到關閉瀏覽器為止,各個頁面 的 cookie 有各自的效用。

L:此行的 1440 * 60 代表 1 天的分鐘數;7 * 1440 * 60 代表 cookie 壽命為 7 天;想要更長的 cookie 壽命可更改此行,請自行判斷 blog 的讀者平均上站間隔。


Label_Close 函數:

Y:在函數中,加入寫入 cookie 的動作,寫入 "大分類 = 0"。

Z~AB:同 K~M 行。


設定 Remember_LabelStatus 函數:

AG:此函數用來記住標籤開合狀態。

AJ:將所有 cookie 讀入 "AllCookies" 變數。

AL:進行大分類的迴圈,準備尋找大分類的 cookie 值。

AN~AO:假如大分類的 cookie 曾經寫入過的話──

AQ~AR:找出大分類的 cookie 值在所有 cookie 中的位置。

AV:假如大分類的 cookie 值為 1 的話──

AS、AX:將該大分類的標籤打開。

AT、AY:將圖案印為 ➷。

BA:假如大分類的 cookie 值為 0 的話──

BC:將該大分類的標籤收合。

BD:將圖案印為 ➥。


設定 WriteCookie 函數:

BJ:除了全展開、全收合的動作要寫入 cookie 外,個別標籤按下開合動作時,也要寫入 cookie。

BP~BQ:同前,設定 cookie 壽命,可自行更改壽命值。

BL、BM、BS:如果偵測到目前大分類的標籤是展開的狀態,寫入大分類的 cookie 值為 1、寫入 cookie 壽命值,並將 cookie 效用延伸到 Blogger 的各個頁面。

BT:不然的話,寫入大分類的 cookie 值為 0、寫入 cookie 壽命值,並將 cookie 效用延伸到 Blogger 的各個頁面。


記憶狀態函數放置位置:

請找到「讓Blogger的標籤能樹狀分類(二)」→「二、主程式碼」,在程式碼結束前加入以下這一行:

Remember_LabelStatus()
明確的說,上面這一行請放在 AB 行 與 AC 行之間,在 "}" 之下、</script>之上的位置。


調整原程式碼:

一樣,請先對照「讓Blogger的標籤能樹狀分類__(三)全部開合」→「調整原程式碼」的內容,塞入以下紅字的部分:

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

以上紅字即為將 WriteCookie 函數,塞入點擊開合圖案的動作之中,在做開合的動作同時便寫入 cookie。


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

➢➢ 快速選單:

3 則留言:

  1. 感謝分享。

    照著步驟安裝上了,卻出現錯誤訊息:

    XML error message: Element type "Category_Name.length" must be followed by either attribute specifications, ">" or "/>".

    請指教。

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

    謝謝提醒,檢查了一下,AL 行的 "&lt;" 被轉換成 "<" 沒有注意到,把這一行更正一下就行了(內文程式碼已更正)。

    回覆刪除
  3. 回覆 J.C.【留言#01】的意見

    J.C., 我發現讓 cookie 能夠記憶最後一次開合狀態的方法了,在任何頁面都有效,已經修正了本文的程式碼,重新安裝看看吧!

    回覆刪除

張貼留言注意事項:

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