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

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

➢➢ 快速選單： １ ２ ３ ４