最初是在 Roga 的 WordPress 的網誌中注意到這個新工具,
第一眼看到的感覺就是一整個驚豔!!
馬上就想要一個放在我的網誌上.
Google 搜尋後發現是只能用於 WordPress 的 Plugin,
不過 Internet 上人才濟濟, 應該會有各種版本才是.
順著找到原作者 RoyTanck 的網站, 果然已經有一堆相關的詢問,
在這篇文章中提到 Amanda 已經成功將 Cumulus 移植到 Blogger 上,
而且步驟也不難, 還取了名字叫 Blogumus...^^
(有興趣的人可直接到下文中的 Fafner 大的發文去看,有他細心整理的實作說明)
不過再進一步尋找中文化的部份,結果就很令人失望了,
最主要的問題在於中文的字型檔太過於龐大,動輒數十MB,
無法在網路上便利使用.
最接近成功的案例是 Fafner 在 滾動吧!標籤雲 I, II 一文中的嘗試.
他直接修改Flash的原始碼,將想要顯示的中文字加進去,
不過加入的中文雖可顯示,但在對應回原本的超連結時卻會變成亂碼,
使連結失效.
於是需再於外部建立對應的超連結 xml 檔案,
才終於使中文化的標籤雲成功在他的網誌上滾動..
但這樣程度的修改已超出一般人的能力範圍,
而且後續標籤若有調整也不能自動對應.
所以雖然 Fafner 大的方法很厲害,
不過已經變成一個獨立的作品,
脫離 Plug-in 與網站主體互動互補的範圍了.
另外在爬文的過程中,
也漸漸體認到很多人批評的 [不實用] 的問題,
確實...
我看了那麼多實作標籤雲的相關網站,
大部份都只是去玩玩滾動的效果,
卻沒有實際點擊進去的慾望..哈,
大部份放了標籤雲的網站也都會再另外放一個傳統的組織型標籤..
冷靜想想..標籤雲有大半的標籤都是縮小在後方的,
確實無法讓人一眼看到可能會感興趣的標籤.
而且如果我真的對站主的標籤文章有興趣,
傳統標籤列表也是較方便快速的選擇,
標籤雲滾來滾去,不大好找.
所以雖然滾動的標籤雲很炫,我也還是很想放一個在我的blog上,
但我仍會保留原本的標籤列表.
OK..雖然上述中文化及實用性的缺點仍存在,
但不可否認標籤雲的直覺效果是強烈而有效的,
大不了不做Blog標籤使用也就是了,
對於開發網站上還是很有用的吧.
所以接下來就來看看 WP-Cumulus 是如何讀取外部參數的...
目前已知有二種方式可以呼叫 WP-Cumulus 功能:
一是使用 embed 標籤來直接使用;
另一個則是如文中所貼的使用 javascript 來轉出;
而設定想要顯示的標籤方式也有二種, 一是在叫用時才指定,
另一是預先寫入 XML 檔案,並放入 swf 同路徑下.
先來看 javascript 的方式,
首先要先指定擺放的位置,
使用 DIV 標籤即可, 在標籤中加入一個 id 以便後面叫用,
<div id='flashcontent'></div>
接著引用 swfobject.js 這個檔案,
目前這個 js 已到2.x版了,但似乎和標籤雲用的有很大落差.
所以不要想太多,直接用與 swf 檔案同一來源的即可,
<script type='text/javascript' src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' ></script>
最後則是呼叫 swfobject, 並傳入參數, 轉出 swf 至我們先前指定的 ID 位置.
<script type='text/javascript'>
var so = new SWFObject('http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf', 'tagcloud', '240', '300', '7', '#ffffff');
so.addParam('wmode', 'transparent');
so.addVariable('tcolor', '0x333333');
so.addVariable('mode', 'tags');
so.addVariable('distr', 'true');
so.addVariable('tspeed', '100');
so.addVariable('tagcloud', '<tags><a href='#' style='12'>Site_1</a><a href='#' style='12'>Site_2</a><a href='#' style='12'>Site_3</a><a href='#' style='12'>Site_4</a></tags>');
so.addParam('allowScriptAccess', 'always');
so.write('flashcontent');
</script>
這樣就完成了
唯一要注意的是在設定 tagcloud 這個參數時,所傳入的格式為:
<tags><a href='http://site1.com'>Site 1</a><a href='http://site2.com'>Site 2</a></tags>
但在傳遞參數時要使用跳脫字元,就變成了:
<tags><a href='http://site1.com'>Site 1</a><a href='http://site2.com'>Site 2</a></tags>
變得較難以辨認.
OK, 再回頭看 embed 的方式其實是大同小異:
<embed type='application/x-shockwave-flash' src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf' id='tagcloud' name='tagcloud' bgcolor='#333333' quality='high' flashvars='tcolor=0xffffff&mode=tags&distr=true&tspeed=100&tagcloud=<tags><a href='#' style='12'>Site_1</a><a href='#' style='12'>Site_2</a><a href='#' style='12'>Site_3</a><a href='#' style='12'>Site_4</a></tags>' width='360' height='200' allowScriptAccess='always'></embed>
拆解其參數即可注意到主要是使用 flashvars 這個參數來傳遞標籤及其超連結,
也就是把 javascript 中使用 SWFObject 來傳遞的參數全部放入 flashvars 這個參數裡,
所以只要直接置換就可以客製一個自己的標籤雲囉!
只是 flahsvars 中需大量使用跳脫字元...
看到眼都花了~
還是寫個程式來轉出較快,可參考以下作法:
<script type='text/javascript' src='http://darven.googlepages.com/genWP_Cumulus.js' ></script>
<script type='text/javascript'>
cloudEmbed_id='tagcloud';
cloudEmbed_name='tagcloud';
cloudEmbed_bgcolor='#333333'; //背景顏色
cloudEmbed_quality='high';
cloudEmbed_width='360';
cloudEmbed_height='200';
//cloudEmbed_wmode='transparent'; //背景設為透明
cloudEmbed_tcolor="ffffff"; //Tag 的顏色
cloudEmbed_tspeed="100";
addCloudTagsURL('http://www.google.com/', 'GOOGLE');
addCloudTagsURL('http://www.yahoo.com/', 'YAHOO');
addCloudTagsURL('http://www.pchome.com.tw/', 'PCHOME');
addCloudTagsURL('http://darven.blogspot.com/', 'Darven');
genEmbedCloudTag();
</script>
最後,若是自己擁有一個網頁空間就不用這麼麻煩了.
直接取得原始檔,自行修改tagcloud.xml 這個檔案就好了.
但要注意改完須放到與 swf 同一路徑下!
請先下載Development Version
這個版本裡面才有 flash source 及 xml 檔可供修改.
另外...很奇怪的是,
我修改 embed , 加入自訂的標題後,
顯示時總是會少一個,還不知道原因...
發表文章
沒有留言:
張貼留言