2007年2月5日 星期一

DIY 利用 blogger_ext 擴充 Blogger 功能!

利用 blogger_ext2.js 0.5b 來撰寫 Blogger 的擴充元件。

不免俗的,來寫一個 Hello World!! 元件吧:

##CONTINUE##

首先,先寫您的 hello world 功能,程式碼如下:

BloggerExt.helloworld = function() {
alert(BloggerExtOptions.helloworld_string);
}


接下來,把它註冊進 Blogger 網頁載入後,自動執行,以及接受的設定:

BloggerExt.register('helloworld' , {helloworld: true, helloworld_string: 'Hello World'});


OK!! 現在,只要網誌載入完成後,便會自動執行您的 helloworld 程式。



而使用者則可在自已的設定中,利用 BloggerExtOptions.helloworld = false; 來決定關閉功能與否。

BloggerExtOptions.helloworld_string = 'Hello World'; 來設定字串。

程式您可以存成 helloworld.js 並加入 Template 或 Page Element 引用即可(要加入在 blogger_ext2.js 後面)。
完整程式如下:

BloggerExt.helloworld = function() {
alert(BloggerExtOptions.helloworld_string);
}
BloggerExt.register('helloworld' , {helloworld: true, helloworld_string: 'Hello World'});


0.5b 中的標籤雲 plugin 實作程式碼:
最後,您可以將您的 Script 壓縮,以得到更快的載入速度。
javascript 壓縮程式,請參考 http://dean.edwards.name/packer/

0.5b 中的標籤雲 plugin 實作程式碼:

BloggerExt.labelcloud = function() {

var arLabels = new Array();
var arLabelCounts = new Array();
var labelMaxCount = 0;

// by delicious
function s(a,b,i,x){
if(a>b){ var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m); }
else{ var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a); }
return v;
}

jQuery('#'+BloggerExtOptions.labelcloud_widget_id+' div li').each(function(idx){
var txt = jQuery(this).text();
var i = txt.indexOf('(');
var j = txt.indexOf(')');
var labelCount = txt.substr(i+1, (j-i-1));
arLabels[idx] = this;
arLabelCounts[idx] = labelCount;
if(parseInt(labelCount) > labelMaxCount) labelMaxCount = parseInt(labelCount);
});
for (var i=0; i<arLabels.length; i++) {
var liObj = jQuery(arLabels[i]);
var aObj = liObj.find('a');
var v = s(BloggerExtOptions.labelcloud_minFontSize, BloggerExtOptions.labelcloud_maxFontSize, arLabelCounts[i], labelMaxCount);
var r = s(BloggerExtOptions.labecloud_minColor[0], BloggerExtOptions.labelcloud_maxColor[0], arLabelCounts[i], labelMaxCount);
var g = s(BloggerExtOptions.labecloud_minColor[1], BloggerExtOptions.labelcloud_maxColor[1], arLabelCounts[i], labelMaxCount);
var b = s(BloggerExtOptions.labecloud_minColor[2], BloggerExtOptions.labelcloud_maxColor[2], arLabelCounts[i], labelMaxCount);
if(aObj.length == 1) {
aObj.css({'font-size': v, 'color': 'RGB('+r+','+g+','+b+')'});
liObj.html(aObj);
}else {
liObj.css({'font-size': v, 'color': 'RGB('+r+','+g+','+b+')'});
}
liObj.css({'display': 'inline'});
}
};

BloggerExt.register('labelcloud' , {
labelcloud: true,
labelcloud_widget_id: 'Label1',
labelcloud_maxFontSize: 24,
labelcloud_minFontSize: 10,
labelcloud_maxColor: [168,181,248],
labecloud_minColor: [0,0,0]
});
張貼留言