2007年1月14日星期日

blogger 3.0:超酷的ajax标签显示(已修正在IE下支持中文标签名)

已经修正在IE下支持中文,感谢中国平江非官方门户站点的作者进行的修正。如果你非常喜欢这种形式的标签,现在终于可以正式使用了。

上次跟原作者Deepak讨论,目前Deepak正在做更好的ajax标签功能,估计还要一个星期。
这个标签的脚本太大有50K,个人不推荐。目前还有同样位印度人的Aditya制作的无需prototype.js脚本的ajax标签,速度更快,没有bug,欢迎使用。


首先感谢作者Deepak
这个hack /扩展 的作用就是当你点击一个标签,就会显示这个标签下的你自己设定文章数的标题和摘要。
原理就是你点击标签以后,通过js脚本读取了你的标签rss摘要,然后显示在你的博客上。
要看例子请看我的测试博客,点击这里

安装方法:

1。在你的xml模板里的</head>上方,]]<>/b:skin>下边,放上以下脚本程序:

<script src='http://www.sxuzone.com/gg/prototype.js' type='text/javascript'/>

2。紧接着刚才的脚本程序,放上以下代码:

<!-- Begin AJAX Categories -->
<style type='text/css'>
/* SEARCH/CATEGORY STYLES
----------------------------------------------- */
#indicator {
position: absolute;
z-index: 10000;
padding: 15px 0;
top: 22em;
background-color: #FFFFFF;
border: 1px solid #AAAAAA;
width: 176px;
left: 50%;
margin-left: -88px;
text-align: center;
}

#search-result {
  border: 1px solid #AAAAAA;
  padding: 10px;
  padding-bottom:30px;
  font-size:85%;
}
.search-result-meta {
  background: #EFEFEF;
  padding: 2px;
}
.search-result-meta img {
  border-width:0;
  vertical-align:text-bottom;
}
.search-title {
  font-size:1em;
  padding-bottom:3px;
  font-weight:bold;
  text-align:left;
  text-decoration:underline;
}
.search-cat {
  display:block;
  padding:3px;
  font-size:1em;
  margin-top:5px;
  margin-bottom:5px;
  border-bottom:1px solid #C0C0C0;
  font-weight:bold;
}
.search-close {
  color:silver;
  float:right;
  border:1px solid #F5F5F5;
  margin-top:10px;
  cursor:pointer;

</style>
<script type='text/javascript'>
//<![CDATA[
var gCat;
function getCat(cat) {
   var url= '/feeds/posts/summary/-/' + cat + '?max-results=10&alt=json';
   var pars = '';
   gCat = cat;
   
   new Ajax.Request(
       url,
       {
          method: 'get',
          parameters: pars,
          onLoading: function(){Element.show('indicator')},
          onSuccess: showCat,
          onFailure: showFail
       });
}

function showCat(output){
   Element.hide('indicator');
   Element.show('search-result');
   $('search-result').innerHTML="";
   var main = string2JSON(output.responseText);
   var xtitle, xcat, xcontent;
   
   var meta = document.createElement('div');
   meta.className="search-result-meta";
   
   var link = document.createElement('a');
   link.href="/feeds/posts/summary/-/"+gCat;
   link.innerHTML = "<img src=\"http://i15.photobucket.com/albums/a355/deepakr/feed-icon.gif\" title=\"Subscribe to this category\" /> 订阅此标签RSS " + gCat;
   meta.appendChild(link);
   
   $('search-result').appendChild(meta);
   
   for (i=0; main.feed.entry[i]; i++) {
      xentry = main.feed.entry[i];
      catdisplay = "<div class=\"search-cat\"><span style=\"color:silver;\"> 标签:<\/span> ";
      for (var j=0;xentry.category[j];j++) {
      catdisplay = catdisplay + xentry.category[j].term;
         if(j<xentry.category.length-1)
            catdisplay = catdisplay + " , ";
      }
      xtitle=xentry.title.$t;
      xcontent=xentry.summary.$t;
      xlink=xentry.link[0].href;
      $('search-result').innerHTML = $('search-result').innerHTML + "<h3 class=\"search-title\"><a href=" + xlink + ">" + xtitle + "<\/a><\/h3>";
      $('search-result').innerHTML = $('search-result').innerHTML +  xcontent + "...";
      $('search-result').innerHTML = $('search-result').innerHTML + catdisplay + "<\/div>";
   }
   $('search-result').innerHTML = $('search-result').innerHTML + "<div class=\"search-close\" onclick=\"javascript:Element.hide('search-result')\">关闭<\/div>";
   $('search-result').style.display="block";
}

function string2JSON(str){
   var n;
   //We have to do exception handling here because eval might not work in all cases
   try {
      eval("n="+str);
   }
   catch (e) {
      n= null;
   }
   return n;
}

function showFail(){
   Element.hide('indicator');
   $('search-result').innerHTML="Sorry! The page cannot be loaded.";
   $('search-result').style.display="block"
}

//--------把中文字符转换成Utf8编码------------------------//
function EncodeUtf8(xstr){
var retS = "";
var s = xstr;
var slist=s.split("");
for(var i = 0; i < slist.length; i ++)
{
ustr=escape(slist[i]);
if(ustr.substring(0,2) == "%u"){
retS+=Hex2Utf8(Str2Hex(ustr.substring(2,6)));

}
else retS+=slist[i];
}
return retS;

}
function EncodeUtf(s1)
{
var s = escape(s1);
var sa = s.split("%");
var retV ="";
if(sa[0] != "")
{
retV = sa[0];
}
for(var i = 1; i < sa.length; i ++)
{
if(sa[i].substring(0,1) == "u")
{
retV += Hex2Utf8(Str2Hex(sa[i].substring(1,5)));

}
else retV += "%" + sa[i];
}

return retV;
}
function Str2Hex(s)
{
var c = "";
var n;
var ss = "0123456789ABCDEF";
var digS = "";
for(var i = 0; i < s.length; i ++)
{
c = s.charAt(i);
n = ss.indexOf(c);
digS += Dec2Dig(eval(n));

}
//return value;
return digS;
}
function Dec2Dig(n1)
{
var s = "";
var n2 = 0;
for(var i = 0; i < 4; i++)
{
n2 = Math.pow(2,3 - i);
if(n1 >= n2)
{
s += '1';
n1 = n1 - n2;
}
else
s += '0';

}
return s;

}
function Dig2Dec(s)
{
var retV = 0;
if(s.length == 4)
{
for(var i = 0; i < 4; i ++)
{
retV += eval(s.charAt(i)) * Math.pow(2, 3 - i);
}
return retV;
}
return -1;
}
function Hex2Utf8(s)
{
var retS = "";
var tempS = "";
var ss = "";
if(s.length == 16)
{
tempS = "1110" + s.substring(0, 4);
tempS += "10" + s.substring(4, 10);
tempS += "10" + s.substring(10,16);
var sss = "0123456789ABCDEF";
for(var i = 0; i < 3; i ++)
{
retS += "%";
ss = tempS.substring(i * 8, (eval(i)+1)*8);



retS += sss.charAt(Dig2Dec(ss.substring(0,4)));
retS += sss.charAt(Dig2Dec(ss.substring(4,8)));
}
return retS;
}
return "";
}
//]]>
</script>
<!-- End AJAX Categories -->


注意上面代码很多地方可以自定义,如:
max-results=5 这里的5是定义显示5条标签文章,你可以改成任何数字,只不过太大一不美观,二会增加读取时间。

CSS部分的几个自定义要点:
#indicator 是定义读取条的样式.

#search-result 是定义出现结果的方框样式.

.search-result-meta 是最上方的rss订阅的长条样式.

.search-title 标题样式.

.search-cat 是其他部分的种类样式.

.search-close 是最低下的关闭按钮的样式.

3。切换到模板页面元素项目,添加一个标签页面元素和一个html/js 页面元素,并且在html/js的页面元素内添加如下代码:

<div id="indicator" style="display: none;">
<img alt="Indicator" src="http://ggpi.008.net/indicator.gif"/> 读取中/Loading...
</div>
<div id="search-result" style="display:none"></div>

4。切换回模板,修改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>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

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


把上面的红色部分替换成下面这段代码:

<a expr:href='"javascript:getCat(\"" + data:label.name + "\")"' rel='tag'>

保存,完工了~~~很简单吧~~~

最后感谢一下一笑已经风云过为大家提供脚本存放空间,感谢大家长期以来的支持。

更新:Shalafi Vos 给出了显示标签文章的同时隐藏原来的文章,关闭后又会恢复的方法


23 评论:

Ryan Hooper 说...

啊,我今天也看到这个hack,刚弄好后,就看到你也翻译了

不知道为什么普通的标签可以起效果,但放到我的标签云上却没有效果,明明都是修改同一条代码。。

PS:http://www.underproxy.com/cgiproxy/nph-proxy.pl/000000A/http/phydeaux3.blogspot.com/index.html 这个blog的ajax标签更BT,但我找不到他的制作方法

GG 说...

其实这篇文章看到很久了,因为没有地方存js文件,64k阿,全部放到博客上搞死了……
所以一直没有翻译,至于你说地那个博客的标签,很明显也是这个hack的变种,他大概修改了整个css的样式,把rss条数修改成了100条?其他的基本跟我文章介绍的都是一样。主要就是改css比较麻烦。我再看看他的源代码,要是很简单就再跟你说说。

不过标签云这一块我没有用过,所以不是很了解,主要就是确保那个js代码替换掉原来的标签探出代码,应该很简单的,万变不离其中。

我翻得这篇文章的原作者凭这篇文章上了google博客api的推荐应用乜~~

GG 说...

果然不出所料,你说的那个博客就是用得我这篇文章的方法,源代码的这个文件里有他的脚本,跟我上面给出的代码几乎一模一样,建议还是直接用上面我给出的代码。

至于css,好像他设计的跟博客是一体的,没有单独拿出来……有耐心你自己把上面的css改一下,也会很漂亮了……

Ryan Hooper 说...

我觉得修改CSS倒不是太麻烦,尤其是自己亲手改过模版的,会对自己的页面配色会有感觉

他的博客用ajax显示文章的同时,原来页面上的文章还会自动消失,我觉得效果很好

不过无论是哪一种,缺点都是不能翻页,除非把条数改大,但同时又会存在载入速度的问题,所以这方法还是没法代替原来标签的功能。

关于JS存放,其实国内很多免费空间都支持,我现在用的就是在google上随便找倒的,只要能外部引用JS和CSS就行了,图片我都放到googlecode上了 :-)

GG 说...

的确就是这个问题,就连那个卖10美元的博客模板也是内容太多就载入特慢……

基本上除了等互联网提速之外,没有别的办法:-(

一直没有翻这篇文章也是想搞清楚那个10美元的模板是怎么做的,可惜到现在也没有人发原理。

但是就连那个顶级的运用到那种内容很多的博客也是垃圾……唉,我们还是首先安心搞好博客内容建设吧~~:-P

GG 说...

晕死了,我把代码搞错了一点,不是你的标签云问题……我用火狐浏览器,硬是没有看出来……

今天的测试博客代码用的前几天在我另外一个博客上修改过的代码,稍稍改过的,在ie里不能显示,汗死了……写文章途方便,没有用代理上原作者的googlepages复制代码……

太太太抱歉了……马上修改~~

Ryan Hooper 说...

我修改了一下,现在可以显示标签文章的同时隐藏原来的文章,关闭后又会恢复
地址在这里

GG 说...

晕,在IE下不支持中文标签,目前这个hack算费了……:-(

GG 说...

是说你的博客在哪里嘛~~

GG 说...

上面这个人写的文章即不提原作者,又不提我的翻译,实在太过分了!

不保留的他的博客链接!

匿名 说...

gg,请你说话语气好点!
我并没有说这个我的原创,更何况我这里还刚刚开始建立.很多工作没有做.我之所以在你那里去留言,是因为我确实已经将ajax label的中文问题解决了.如果有冒犯之处请说明白点,不要这么张狂!
另外,我为什么要著名是你的翻译?
我抄袭了你的文章吗?
天下人都得说理字。有写文章我确实有借鉴别人之处,但都做过修改。为什么一定要写一个原处了。
另外,我没有抄袭你的任何东西,如果你认为有,请指出来,让大家评论评论,说实在话,在刚才留言之前,我还真不知道有ggpi这么一个地方。
如果我留言有冒犯之处,那对不起,我只是说出我心里所想!

GG 说...

你文章已经很明显是从别人那里一丝不挂的抄走的。

即便不著名翻译,你也必须著名原作者!
你不著名就是侵犯版权,如果我跟作者联系投诉到blogger,证明是你抄袭并侵犯了作者版权会立刻删除你的博客。

这种删除跟我抗议的那种是两回事,你要想以身试法就试试!

GG 说...

而且你博客还挂了adsense,投诉结果是封杀帐号,这个损失更大~~你也可试试

匿名 说...

首先,我请你不要这么张狂。
我的blogger还刚开始建,至于注明原出处这我已经正在改进中,但最起码不是从你这里抄袭的。
我觉得很奇怪,中国人难道就这样吗?我刚才发帖子只是想说明对于ajax label的中文问题我已经解决而已。这应该是好事情。没有想到作者居然马上就来劲了。
大家可以到我的blog去看看作者的留言,简直就是威胁加恐吓。还说保留blogger和adsense的投诉。你这样的语气还态度也未免张狂了点。本以为找到一个好的站点,没想到居然是这样一个人!

GG 说...

要我态度好你就立刻修正你的博客,我和原作者都会链接你,非常简单的道理。你尊重别人,别人尊重你!

匿名 说...

我并不是不认同你的想法,可是在刚开始如果你的态度好点,就根本不会有这样的事情发生。更何况我们都是同一个目的,就是希望把blogger的技巧通过自己的blogger发表出来,不管它来自于哪里,出自谁的手法。我想国外的那些blogger先辈们也会是这样!
我也正在我的“关于blogger指南与技巧”文章中注明了最初手笔的作者和他们的链接地址。
不过感谢你的提醒!

GG 说...

不好意思,我对我不爽的事情都是坏脾气。不过你改了我就立刻变成好脾气。
而且不计前嫌,对事不对人。

GG 说...

所以你可以看到我的声明都是暂时不链接,你一改我马上链接你的博客,感谢你的劳动。

匿名 说...

我只对事不对人!人与人之间缺乏了解是最可怕的。
当然,我会在blogger把你加入链接。我不排除任何好的事物。
好女不跟男斗。嘿嘿!

GG 说...

汗,不是链接我的博客,主要是在相应帖子里著名原作者是谁,给出链接。
然后你再说你修正了什么。

我的博客其实链不链接都无所谓,你要链接就是跟我交换友情链接了。

虽然我也希望你也能在原作者后面说明我率先翻译的,当然还可以把夏菲拉的修正也说明进去。这样大家才是共存共荣。

GG 说...

你加了我的友情链接,我也相应友链你了。

不过还是请尽快把原作者的链接加上去。

GG 说...

作者要求我交出你的链接,我只有照办了。跟作者说了你已经承诺声明并链接原作者。

请你尽快加上吧……不然作者也要发彪了。

匿名 说...

我已经在文章中加入了原文作者的连接

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