2007年2月21日星期三

blogger:把杀手级应用 ajax标签栏和普通标签栏合并

上次的杀手级应用 AJAX标签全面改进版(再次升级)有所有读取RSS供稿的工具的问题,就是RSS供稿一次读取的过多过长就要消耗更多的时间,而且作者肯定是不打算给这个hack加上一个翻页功能了,而实际上即使加了翻页功能也没有几个读者会使用。一般来说读者只会查找自己记得住的东西,就是最近25篇左右的文章。
所以个人经过很多次实验,发现设置出现最近100篇文章和25篇文章消耗时间差不多,干脆统一设置出现最近100篇文章。(还参考了那个卖10美元模板的软件工程师的设置)

但是问题接着出现,如果大家真的要查询一个标签下的所有文章怎么办呢?难道新加一个标签栏作为普通标签栏供大家使用?当然大可不必。完全可以把标签后面的统计数字,把以前没有用到的这个单纯看的数字变成普通标签的链接选项,这样点击标签名称就是ajax标签,点击后面的统计数字就是普通标签的功能,简单的合二为一了:)

下面是我的修改方法:

首先我把原作者的杀手级应用 AJAX标签全面改进版(再次升级)的脚本代码进行了简化,另外提醒所有可能的抄袭者,无论我第一次放出的代码还是现在的修改代码,在原作者的博客上都是找不到的,我链接的原作者的代码是仅能在火狐下使用的代码,而我放出的是在火狐和IE下都能使用的代码,虽然都是原作者出品,但是只有我的博客刊登了火狐和IE下都能使用的代码。你如果神奇的“翻译”出了只在我的博客上出现的代码,我就要找你麻烦了!你要转载唯一的要求是文章里链接我和原作者。
好的,下面是我的简化:具体怎么使用,包括替换指示图片请参考我的原文。这一步是替换原文第一步的脚本代码,很小的改动,原文的注意内容依然有效:

<script>
//<![CDATA[
function $(){
for( var i = 0, node; i < arguments.length; i++ )
if( node = document.getElementById( arguments[i] ) )
return node;
}

var _id = '';
function showLabel(name){
_id = name;
if($(name+'-expanded')) {
$(name+'-expanded').parentNode.removeChild($(name+'-expanded'));
$(name).style.textDecoration = 'none';
$(name+'-tog').innerHTML = '<img src="http://3.bp.blogspot.com/_3nBl_-O34Uk/RcyFBugiBPI/AAAAAAAAFs4/efnvCuxNJMo/s200/tag_green.png"/>';//the expanding image
}
else {
$(name).style.textDecoration = 'blink';
$(name+'-tog').innerHTML = '<img src="http://2.bp.blogspot.com/_3nBl_-O34Uk/RcyALegiBOI/AAAAAAAAFso/N8XTzgb9OQM/s200/ajax-loader.gif"/>';//the contracting image
var script = document.createElement('script');
script.src = 'http://www2.blogger.com/feeds/50625843787416438/posts/summary/-/'+name+'?max-results=100&alt=json-in-script&callback=makeList';
script.type = 'text/javascript';

document.getElementsByTagName('head')[0].appendChild(script);
}
}

function makeList(json){
var d = document.getElementById('Label1');
var i=0, j=json.feed.entry[i];
var list = document.createElement('ul');
list.id = _id+'-expanded';
list.setAttribute('class','postList');
$(_id).parentNode.insertBefore(list, $(_id).nextSibling);

var frag = document.createDocumentFragment();

while(i<json.feed.entry.length){
j=json.feed.entry[i];
var t_link = document.createElement('a');
t_link.href = j.link[0].href;
t_link.title = j.summary.$t;
if(j.title.$t.length>57)
t_link.appendChild(document.createTextNode((j.title.$t).slice(0,57)+'...'));
else
t_link.appendChild(document.createTextNode(j.title.$t));

var title = document.createElement('span');
title.setAttribute('class','postTitle');
title.appendChild(t_link);

var li = document.createElement('li');
li.appendChild(document.createTextNode('- '));
li.appendChild(title);
frag.appendChild(li);
i++;
}
$(_id+'-expanded').innerHTML = '';
$(_id+'-expanded').appendChild(frag);
}

//]]>
</script>


注意上面代码的深色部分http://www2.blogger.com/feeds/50625843787416438/,你要把数字50625843787416438改成你自己的博客ID,这个数字就是你任意创建一篇新文章的浏览器里的链接地址:“http://www2.blogger.com/post-create.g?blogID=50625843787416438”的“blogID=”后面的那一串数字,这样改的好处就是读取RSS的时候直接使用最原始的RSS地址而无需经过blogspot的转换。速度应该会更快些,特别是中国有GFW监控blogspot的情况下……

第二步,修改原文的第三步的页面元素代码:
找到代码:

<data:label.count/>


替换为:
<a expr:href='data:label.url'>共<data:label.count/>篇</a>

即可。

完工,这样你的ajax标签就集成了两种标签功能。

最后别忘了我还制作了一套供这个ajax标签使用的指示图标供您使用,点击这里查看

2 评论:

发表评论: ☆欢迎灌水☆言论自由☆交流快乐☆