滾動吧！標籤雲！ --Label Cloud Part 2

Posted by Fafner

「標籤雲」或者分類標籤的功用，是要讓閱讀者方便找出類似主題的文章來閱讀，因此，它提供的是一組分類連結。

剛弄好這個Blogumus的滾動式「標籤雲」時，只顧欣賞並調整其外觀，直到放了一天之後，這才第一次點選其中的連結測試──我的媽呀！這個新完成的「標籤雲」，真的只有裝飾的功能，因為它並不能正確地搜尋出該標籤的文章，主要的原因在於，其連結的中文字，已經被轉換成了瀏覽器無法辨識的「亂碼」。

我試著用Internet Explorer 7測試，發現IE可以順利讀出連結的「怪碼」，而讓「標籤雲」正常運作，但若用我慣用的Firefox，則點選後，網址列標籤部分的中文字會變成亂碼，當然就搜尋不到任何文章。如我的分類標籤「書籍」，點選之後，網址列顯示的是：「http://fafner-hideaway.blogspot.com/search/label/%AE%D1%C4y」，這個「%AE%D1%C4y」應該是ASCII，因若是UTF-8的話，Firefox 可以辨識，也就不會有編碼上的問題。

我試了不少方式，包括從Template上自行輸入標籤網址，但只要一變成swf檔，其連結內的中文字就一定無法被讀出。我只能猜測，或許是哪個環節的JavaScript沒有用正確的編碼方式處理中文字，才導致這樣的結果。我不懂JavaScript，因此這個問題，我是無解的。

正途不行，只有改走旁門左道。這個WP-Cumulus目前釋出的版本，已經到了1.17，大約是在1.15版時，就已加入了多重顏色的功能，也是說，標籤雲裡的各個標籤，可以設定成不同大小或顏色。我所使用的www.bloggerbuster.com所發佈的Blogger版裡，是用迴路的方式自動生成標籤和連結，故無法為個別標籤加入不同的設定。要在Blogger中達成這個效果，恐怕只有用外掛xml檔的方式，而這個方式，也正好可以幫我解決中文連結的問題。

我的做法是，以\wp-cumulus\flash sources\tagcloud.xml檔為藍本（其設定的標籤，顏色和大小都不一樣），手動將其內容改成我所要的連結，再將這個修改過的tagcloud.xml檔上傳到和之前tagcloud.swf相同路徑的網路空間上，再把上篇所貼的程式碼中，關於生成標籤和標籤連結、參數的程式碼拿掉，讓tagcloud.swf去讀取同一路徑下的xml檔，這樣就可以了。

例如，我改過的tagcloud.xml，變成這樣：

<tags>
<a href="http://fafner-hideaway.blogspot.com/search/label/%E6%9B%B8%E7%B1%8D" class="tag-link-66" title="2 topics" rel="tag" style="font-size: 22pt;">書籍</a>
<a href="http://fafner-hideaway.blogspot.com/search/label/%E6%94%9D%E5%BD%B1" class="tag-link-39" title="1 topics" rel="tag" style="font-size: 18pt;">攝影</a>
.....（中省略）....
</tags>

上面的程式碼的各項參數，我只知道font-size應該是字級大小，其餘的還沒空去研究，所以就完全照抄。連結部分，因為tagcloud.xml是存成UTF-8格式，用記事本開啟時，只要從網址列複製網址，貼過來時就自動轉成 E6%9B%B8%E7%B1%8D的UTF-8碼。最後，我覺得我的標籤數目太少，而且多是中文，顯得頗為單調，所以又手動加入了一些翻成英文名的標籤連結。

而下一步，要修改貼上Template的程式碼：

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("你上傳的網路空間/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tspeed", "100");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

欄位大小（240，300）、背景顏色（ffffff）和背景是否要透明，這和之前的修改方式一樣；至於標籤字的顏色和級數，以及獲取標籤連結的程式碼，因已在xml檔內設定，在此我就將之刪掉，以免xml的設定發生不了作用。修改後的顯示效果，會類似我現在側邊欄Label Cloud上的一樣（我的欄寬欄高，都設成150，背景設為透明）。

這個中文化的動態「標籤雲」，絕大部分是用手動的方式硬修出來的，我用Internet Explorer和Firefox測試，都能正確連上該分類標籤的文章，使用上大致沒有問題。缺點是，若日後新增分類標籤時，那就得把之前手動修改的部分全部重做：重新在Flash 9裡embed新的字元、輸出新的tagcloud.swf、在tagcloud.xml中新增新的標籤連結、將這兩個檔上傳取代舊檔。可說是牽一髮而動全身。唉，早知道中文化這麼麻煩，我當初就不會一頭栽進來！