是的，PR成0了 »

« 仿腾讯微博主题上线

    我想各位经常上微博客或者各类视频站的朋友们都会留意到一个细节，在它们的评论列表中的发布时间中一般都是显示的“37分钟以前”“3天以前”而不是死板的发布时间，我觉得这种效果非常的友好，非常适合网友或博主查看和Follow。

    最近我也对其简单的研究了一下，发现其实要实现这种效果并不是什么难事，只需要简单的改动几个地方，整个站的时间都可以显示为“xx分钟以前”“xx天以前”，到底该怎么实现呢？首先我要介绍一下一款jQuery插件：timeago。timeago是一款在jQuery基础上开发的相当优秀且体积精小的插件，利用它可以帮助你把网页中的任意时间转换为多久以前并自带自动刷新功能，看图：

    从上图可以看到各位网友给石头的评论都很自然的显示为了多久以前，非常酷吧！该怎么实现呢？

    首先你需要在你的网页中加载jQuery Timeago插件，在任意可以加载JS的插入以下代码即可在页面中挂载上这个插件：

eval(function(p,a,c,k,e,r){e=function(c){return(c<62?'':e(parseInt(c/62)))+((c=c%62)>35?String.fromCharCode(c+29):c.toString(36))};if('0'.replace(0,e)==0){while(c--)r[e(c)]=k[c];k=[function(e){return r[e]||e}];e=function(){return'([3-9a-ce-hjkm-ru-zA-SU-Y]|1\\w)'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(4($){$.7=4(j){a(j instanceof z)5 b(j);M a(typeof j=="A")5 b($.7.B(j));M 5 b($.7.c(j))};3 $t=$.7;$.extend($.7,{q:{C:60000,N:true,O:{P:r,Q:r,R:"前",S:"距离现在",U:r,V:r,e:"小于1分钟",W:"大约1分钟",f:"%d分钟",X:"大约1小时",g:"大约%d小时",Y:"1天",8:"%d天",10:"大约1个月",11:"%d月",12:"大约1年",o:"%d年"}},b:4(p){3 $l=k.q.O;3 D=$l.P;3 E=$l.R||$l.U;a(k.q.N){a(p<0){D=$l.Q;E=$l.S||$l.V}p=h.abs(p)}3 e=p/1000;3 f=e/F;3 g=f/F;3 8=g/24;3 o=8/14;3 15=e<45&&6($l.e,h.G(e))||e<90&&6($l.W,1)||f<45&&6($l.f,h.G(f))||f<90&&6($l.X,1)||g<24&&6($l.g,h.G(g))||g<48&&6($l.Y,1)||8<30&&6($l.8,h.H(8))||8<F&&6($l.10,1)||8<14&&6($l.11,h.H(8/30))||o<2&&6($l.12,1)||6($l.o,h.H(o));5 $.I([D,15,E].join(""))},B:4(u){3 s=$.I(u);s=s.m(/-/,"/").m(/-/,"/");s=s.m(/T/," ").m(/Z/," UTC");s=s.m(/([\\+-]\\d\\d)\\:?(\\d\\d)/," $1$2");5 19 z(s)},c:4(v){3 1a=$(v).get(0).tagName.toLowerCase()=="1b";3 u=1a?$(v).attr("c"):$(v).html();5 $t.B(u)}});$.fn.7=4(){3 w=k;w.1c(J);3 $s=$t.q;a($s.C>0){setInterval(4(){w.1c(J)},$s.C)}5 w};4 J(){3 n=1d(k);a(!isNaN(n.c)){$(k).K(b(n.c))}5 k}4 1d(9){9=$(9);a(!9.n("7")){9.n("7",{c:$t.c(9)});3 K=$.I(9.K())}5 9.n("7")}4 b(x){5 $t.b(1e(x))}4 1e(x){5(19 z().1f()-x.1f())}4 6(y,L){3 A=$.isFunction(y)?y(L):y;5 A.m(/%d/i,L)}1g.1h("abbr");1g.1h("1b")})(jQuery);',[],80,'|||var|function|return|substitute|timeago|days|element|if|inWords|datetime||seconds|minutes|hours|Math||timestamp|this||replace|data|years|distanceMillis|settings|null|||iso8601|elem|self|date|stringOrFunction|Date|string|parse|refreshMillis|prefix|suffix|60|round|floor|trim|refresh|text|value|else|allowFuture|strings|prefixAgo|prefixFromNow|suffixAgo|suffixFromNow||ago|fromNow|minute|hour|day||month|months|year||365|words||||new|isTime|time|each|prepareData|distance|getTime|document|createElement'.split('|'),0,{}))
$(document).ready(function() {
    $(".thisTime").timeago();
});

    当然，这个JS是经过石头改为更加符合博客习惯并压缩加密了的(你也可以点此下载它的原版)，非常的小巧吧！但注意：插入这个代码以前请确保你的网页中也已经插入了jQuery！ZBLOG是默认已经加载了jQuery，所以并不需要你再加入jQuery。

    接下来就是最重要的一步了：请在显示时间的地方给时间标签外加上“<span class=thisTime></span>”，因为插件是根据class=thisTime来替换时间的。比如评论列表中，可以把b_article_comment.html中的<#article/comment/posttime#>替换为<span class=thisTime><#article/comment/posttime#></span>再保存，后台重建一下，就可以实现啦。

提示：可能在最后大家依然无法看到想象中的效果，那是因为Zblog官方默认加载的jQuery好像有点问题，解决办法可以把根目录中的/SCRIPT/common.js中嵌入jQuery的部分替换为最新的jQuery代码即可解决。点此下载最新版的jQuery