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]
});

7 則留言:

GG 提到...

密切关注你的伟大工作~~~把blogspot变得更加吸引人吧~~~:-D

希望能友情链接 :

链接名称:GG派
链接地址:http://ggpi.blogspot.com

已经链接贵博客~~

另外提点意见,建议加新的功能以博客基本的实用功能为主~~

例如我刚刚翻译的这篇文章介绍的HACK/扩展,如果你能重新写一个解决以下2个问题的就太棒了!

1.能够自定义展开收缩的样式,例如像本身按月存档博客更新的三角形能够一开一折。

2.能够把点击标签显示的文章标题结果设置显示在其他位置。从而完全取代博客本身的点击标签以后20篇文章全部打开的垃圾功能……

当然能够再提高读取速度就更棒了:-)

华人世界就可能因为你的超爽工作而出现大量blogspot 博客了~~~

再次感谢~~

GG 提到...

还提个建议,把js脚本分开,把博客最基本的实用功能,如折叠全文,折叠侧边栏,我上面说的标签功能等放一个JS。

然后像什么附加功能如笑脸图标,標籤雲(Label Cloud)之类只是提高用户视觉效果的东西放在另外一个JS脚本里。

这样以后很多人开发这个东西了,你就可以专心开发核心功能的JS:-)

Unknown 提到...

Dear GG:

謝謝您的建議,整個 0.5b 已大幅改寫過,本身就是 PLUGIN 架構,只是一直沒有時間把說明文件寫完整。
現在把文件補齊了,請再讀一次

http://racklin.blogspot.com/2007/01/blogger-jquery-way.html

CJH 提到...
作者已經移除這則留言。
CJH 提到...

Rack Lin你好:
我寫了一個plugin,也是繼續閱讀功能,但我的是依照行數(br)去自動判斷,網址:http://cjhtech.blogspot.com/2007/02/blogger-3-htmlfor-blogger.html,請參考,也許可以整在你的安裝包中。

Unknown 提到...

Dear cjh:
您的回應埋在我的回應串中,昨天才發現,到今天才回應給您,Sorry.
看了您的擴充,小弟有幾點小小的建議:
1. 使用 fullName,也就是 jQuery 取代 $ ,這樣可確保您的 plugin 能在有使用 prototype,dwr,moo.fx 的環境下相容,且不會出錯。
2. 只有需要被執行的 function 需要 BloggerExt.register,像 utilities 的 static function 只要宣告即可,不用 register , 不然在 document.ready 時,blogger_ext2 都會跑它們一次。(如您的 IsIndexPage, IsTagPage)
3. 使用自己的 namespace(js用package可能比較接近), 也就是所有 method 是加在 BloggerExt.Easy_Read_More.IsIndexPage
這樣可確保您的 function 不會和別人衝突。
我會加進我的說明中,Good job. Tks.

CJH 提到...

Rack Lin你好:

我按照你的建議修改了新的版本
http://cjh829-easy-read-more.googlecode.com/svn/trunk/
若您有空的話,請再幫我看看有沒有什麼地方需要改進的,謝謝

另外想請教一下
我參考您標籤雲的程式寫法
用"abc = function() { def: function() {} }"
這樣的語法把函式def包在函式abc裡面
abc之內都可以任意呼叫def(),沒有問題
但是我想要在abc之外呼叫def()時,就完全抓不到,不管是直接用def(),或用abc.def()都無法使用
這樣看起來,好像是def變成abc的private function
目前我是先另外用一個物件xyz把def包起來
xyz = {def: function() {}}
然後再用xyz.def()去呼叫
請問,除了這樣子的方式之外,還有更好的解決法嗎?