2007年2月7日星期三

blogger 3.0:杀手级应用 AJAX标签全面改进版(再次升级)

首先感谢原作者Aditya给我们带来这么好的方法。昨天跟作者沟通了一下,提了点建议,作者今天就又更新了,完全可以替换博客原有的标签功能,完全的WEB2.0样式!实在太爽了!

这个hack的作用就是让大家点击标签以后,不再是把整个页面读取一遍去获取标签文章,而是直接在博客页面的该标签题目下读取全部的标签文章,并以标题形式显示该标签下的文章。
具体样式请参考我的博客右边“全部文章列表:”下的“标签文章列表:”,试着点击一个标签题目看看:)

今天更新了两个地方:A.可以自己设定标签点击前和点击后的前方图片。
B为标签下超多题目载入速度减慢的情况增加了读取中的提示图片。

安装方法:第一步
,首先把下面的代码加入你的xml模板里的</head>上边,]]<>/b:skin>下边:


<script>
//<![CDATA[

/* Belongs to Aditya Mukherjee (www.aditya-mukherjee.com)
It is licensed under a Attribution/Non-commercial/No derivative CC 2.5 license
http://creativecommons.org/licenses/by-nc-nd/2.5/
*/

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

var _id = '';
pic1= new Image(); //preload image
pic1.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZnCpqNtRnaNYxg_yVIzYtSx0Ny4YfyiRnjZOOpf0BfoTNXrC3nFU9ry3et03_E_IvgZucsy8xAZ_jf7GO_P3zJauiSMUZLtDEdHByneKQhUQY23MMabSOsQ-Fm5A09j5qXQp62eZXbgI/s320/loading_ani2.gif";
function showLabel(name){
_id = name;
if($(name+'-expanded')) {
$(name+'-expanded').parentNode.removeChild($(name+'-expanded'));
$(name).style.textDecoration = 'none';//removes underline from closed label
$(name+'-tog').innerHTML = '+ ';//the expanding image
}
else {
$(name).style.textDecoration = 'underline';//adds underline to opened label
$(name+'-tog').innerHTML = '- ';//the contracting image
var script = document.createElement('script');
script.src = 'http://<blogname>.blogspot.com/feeds/posts/summary/-/'+name+'?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 imag = document.createElement('img');
imag.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZnCpqNtRnaNYxg_yVIzYtSx0Ny4YfyiRnjZOOpf0BfoTNXrC3nFU9ry3et03_E_IvgZucsy8xAZ_jf7GO_P3zJauiSMUZLtDEdHByneKQhUQY23MMabSOsQ-Fm5A09j5qXQp62eZXbgI/s320/loading_ani2.gif';
$(_id+'-expanded').appendChild(imag);

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>37)
t_link.appendChild(document.createTextNode((j.title.$t).slice(0,37)+'...'));
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://<blogname>.blogspot.com/feeds/posts/summary/-/"这一行的<blogname>改成你的博客名称。

其他几点注意事项:
1. 如果你的单一标签的文章数超过25个,而且你又希望把标题都显示出来,那么你需要像我一样在上面的代码里修改以下定义代码:
还是修改这一行:

'http://ggpi.blogspot.com/feeds/posts/summary/-/'+name+'?max-results=999&alt=json-in-script&callback=makeList';

代码“?max-results=999&”的数字999就是定义最多能显示的文章标题是999篇,你也改成你自己想显示的数字。

2.默认设置显示的标题文字数超过37个字就会以"..."代替后面的字数,如果你要显示更长的标题名称,就要修改上面代码的这个位置:

if(j.title.$t.length>37)
t_link.appendChild(document.createTextNode((j.title.$t).slice(0,37)+'...'));

把两个“37”都改成你要显示的字数即可。

3.你也可以改成图片的样式,例如上面代码$(name+'-tog').innerHTML = '+ ';//the expanding image的“+ ”号,整体替换为<img src="http://gggpie.googlepages.com/arrow_066.gif"/>就可以变成跟我一样的图片了。
同理,$(name+'-tog').innerHTML = '- ';//the contracting image的“- ”号也能改成<img src="http://gggpie.googlepages.com/arrow_279.gif"/>
代码里的图片http://gggpie.googlepages.com/arrow_279.gif 你可以随意替换~

第二步,切换到模版,页面元素的选项,添加一个标签页面元素,放到你觉得好看的位置。

第三步:再次切换到你的模版,修改 HTML项目,然后勾选扩展窗口小部件模板,找到你刚刚添加的标签页面元素项目。
用下面的代码完整替换之:

<b:widget id='Label1' locked='false' title='标签文章列表:' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul class='elegantList'>
<b:loop values='data:labels' var='label'>
<li expr:id='data:label.name'>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<span expr:id='data:label.name + "-tog"'><img src='http://gggpie.googlepages.com/arrow_066.gif'/></span><a href='#category' onclick='javascript:showLabel(this.innerHTML)'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


完工了~~~注意上面的代码这一行<span expr:id='data:label.name + "-tog"'><img src='http://gggpie.googlepages.com/arrow_066.gif'/></span>
里的http://gggpie.googlepages.com/arrow_066.gif是我定义的图片,这里是控制默认刚刚打开博客时候你每个标签题目前方显示的图片,最后改成和上面代码的“收缩标签以后显示的图片”是一个图片为最好。这样比较统一。

15 评论:

sz-iris 说...

好东西啊!很实用!

sz-iris 说...

请教下哦!鼠标放在文章上显示的文章字数可以设置吗?

GG 说...

不能设置~~~直接用的是简短版的RSS~~

IE下显示的多,火狐下少~~

GG 说...

作者又更新了一个只能在火狐下运用的,有读取图标的代码。明确让IE读者死开的达人可以到作者主页取经~~

Aditya 说...

我很抱歉,我不会说中文,所以我用这个翻译后谷歌这里! 感谢惊人补习. 你们的工作做得更为彻底,这比我原本:)好! 我很高兴你喜欢它. 干杯!

虚飞 说...

如果之让标签横向排列,该如何解决?

GG 说...

目前还没有解决,我昨天一直尝试改成标签云试的,没有成功~~:-(

匿名 说...

好东西,就是没用起来。你提供的blog模板不包括这个hack吧?

GG 说...

没有用哦~~~

匿名 说...

郁闷啊
试了2次,最喜欢这个功能了,就是不行。。
你能帮看下吗?cheshi.blogspot.com
还有你弄的怎么可以不规则排列,我的必须死板地排列。。。而且点击后没任何反应!

不过那个友情链接后弄了 ^_^但是右上角那留言和订阅展开还是无法实现。而且也不会如何向你那样很好的排版,把右上角的5个元素很好地排版起来。透露点啦!告诉我代码。。。嘿嘿
期待你的回答。

GG 说...

我现在用的是超酷的ajax标签和标签云。

你用的这个hack是杀手级应用 ajax标签。

去看了你的博客,只能用一片混乱来说……建议你还没有学会走路就不要慌着跳高……

就这个hack没什么好说明的,因为你完全把所有的东西都搞得乱七八糟自然加不好了……

建议你耐心的一个hack,一个hack的加。先再搞个测试博客,在没有hack的空白的模板里的尝试加这个hack,成功以后再移植到你的博客模板里。

Unknown 说...

你帮哥们看看!我按你的方法去做了,为什么有了标签却点不开!

GG 说...

代码没有复制对……

Kitty 说...

非常感谢,干净利落的解决了我头疼已久的问题.但我有小小疑问如下: 我的标签展开后,鼠标滑过每个post的title的时候就会出现一行黄色注释,引用的该post的前几十个字...我猜是这个hack的效用啦,虽然大人的说明里没有提...我的问题是, 我希望这个注释引用的字数再多一点, 最好200个字符左右,就像一个内容预览一样,应该怎么做才能增加字数呢?

再次感谢!

GG 说...

这个是不能设置的哦~

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