教你如何给Zblog评论分页
石头 发布于2010-6-17 11:40:52 分类: 小技巧 已浏览705次 网友评论48条 我要评论
Z-Blog上的评论分页我一直没有看到比较好的解决方案。社区里有一套Z-Blog评论分页插件可惜在1.8上基本没用，所以一直以来Z-Bloger们的评论都是一长条的向下列，几十条倒是没有什么关系，不过如果你的评论上了百，上了千，还没有分页的话那可真得累死想给你评论的人了。这几天一直忙着公司加班所以也一直没有更新日志，昨晚突然来了灵感，做出了一个Z-Blog上的评论分页功能。
其实实现的思路比较简单：使用JS根据定义的每页显示数量和当前的页数，从评论列表中计算出应该显示的评论，其它的一律隐藏。可能你不懂得我在说什么，算了，先看图吧。
从上图可以看到分页的效果。你也可以点击查看详细演示效果。
如何实现？
第一步：你只需要在模板文件b_article-single.html中想显示评论分页的地方插入“<div id=showpage></div>”来显示分页；
第二步：在模板文件single.html的尾部插入如下Javascript代码以实现分页：
<script language="javascript" type="text/javascript">
/*
Z-Blog 1.8 评论分页js By 石头
作者博客 http://www.stou.info
最后更新时间 2010.6.17
*/
var eachCounts = 5; //每页显示多少条评论
var domSelector = 'li[id]'; //评论jQ选择器表达式 不同的模板可能表达式不一样，如果你使用这个表达式不正常，请联系我帮你写这个表达式
var totleCounts = $(domSelector).size(); //获取评论总数
var pageCounts;
if(totleCounts <= eachCounts){pageCounts = 1}else{totleCounts % eachCounts==0 ? pageCounts = (totleCounts/eachCounts) : pageCounts = Math.floor(totleCounts/eachCounts)+1}
function LoadComment(p){$(domSelector).each(function(index,domEle){if( index >= (p-1)*eachCounts && index <= (p*eachCounts)-1){$(domEle).css("display","block")}else{$(domEle).css("display","none")}});
for(i=1;i<=pageCounts;i++){if(p==i){$("#CommentPageBar"+p).removeAttr("href");$("#CommentPageBar"+p).attr("class","now-page");$("#CommentPageBar"+p).attr("title","")}else{$("#CommentPageBar"+i).attr("href","javascript:;");$("#CommentPageBar"+i).attr("title","第"+i+"页评论");$("#CommentPageBar"+i).attr("class","this-page")}}}
var s; s="";
for(i=1;i<=pageCounts;i++){s+="<span style='height:auto;width:20px;margin-right:6px'><a href='javascript:;' style='padding:6px;' onclick=LoadComment('"+i+"') title='第"+i+"页评论' id=CommentPageBar"+i+" class=this-page>"+i+"</a></span>";}
$('#showpage').html("<div style='text-align:right; height:30px;width:100%;margin-top:10px;' class=CommentPageDiv>评论分页："+s+"</div>");
LoadComment(1); //加载第一页评论
</script>
保存好上面两个模板的代码，再在后台文件重建一下，Z-Blog的评论分页就解决啦。你可以通过代码中的“eachCounts”配置每页你想显示的评论数量，你也可以在CSS中定义“.CommentPageDiv”来控制评论分页条的样式，定义“.this-page”来控制分页的样式，定义“.now-page”来控制当前页的样式。因为大家的评论列表模板不一致，所以代码中的评论选择器的表达式并不适用于所有模板，如果你不熟悉jQuery，你可以联系我帮你写这个表达式。
如果你比较熟悉Css和Javascript，你也可以通过更改代码来实现更加丰富的功能。欢迎大家多多提意见多多评论
原创文章转载请注明引自石头博客 http://www.stou.info/ 欢迎订阅石头博客。
猜你也喜欢
最新评论及回复
文章归档
- 2012 January (1)
- 2011 December (1)
- 2011 November (1)
- 2011 October (2)
- 2011 September (1)
- 2011 August (1)
- 2011 July (3)
- 2011 June (2)
- 2011 May (4)
- 2011 April (4)
- 2011 March (3)
- 2011 February (2)
- 2011 January (1)
- 2010 December (4)
- 2010 November (6)
- 2010 October (6)
- 2010 September (7)
- 2010 August (8)
- 2010 July (7)
- 2010 June (7)
- 2010 May (9)
- 2010 April (19)
- 2010 March (15)
- 2010 February (16)
- 2010 January (24)
- 2009 December (26)
看到这么多zblog精彩，有点心动也想装个来玩玩了。
石头兄~~我用你的wopus模板 用这个js 显示评论 页面1 但是点击无效 应该怎样修改js呢 谢谢了
仔细读了博主的文章觉得非常不错，支持一下！
仔细读了博主文章，觉得写的非常好，顶了！
看了博主的文章觉得非常值得学习，支持一下！
谢博主分享，支持一下！
能分页挺好的，不让太长了上下拉不方便
我用的是贵站的仿异次元模板，加了之后没有反映啊，不知道怎么处理，求解。谢谢啊
整个网站被搞残了啊！！！！！！
你的验证码可不可以改成个位加减啊= = 我的好像失败了！！
起名网http://qimingzj.com/
我的博客添加了你说的代码，可是还是没有分页？请帮忙解决下，我Q75660072
呵呵，一起加油哈
博客模板很漂亮，不知道在哪可以获得
我数学以前得过142分
这些评论似乎都很有特色，我感觉你的回复也很好
学习了,谢谢石头的分享1
我的网站也不能实现，能帮我看一下吗？我用的是心诺的Sean_Red红色系主题。谢谢！
dfgdfgerytreery
万夫不当之勇
我也去试下
我的网站无法实现评论分页效果，麻烦您帮忙看一下，我的邮箱boao1755@163.com
这个可以有，先收藏起来先··有了多评论在装上·
谢谢分享·
我的网站无法实现评论分页效果，麻烦您帮忙看一下，我的邮箱admin@dayunet.com
我的网站无法实现行业效果，麻烦您帮忙看一下，我的邮箱admin@dayunet.com
学习了，谢谢分享
分页的效果还是不错的
好文章，居然出现了我的名字，
哈哈，
我暂时还不用分页，
评论不是很多。
先留着。
恩，，不错，，手下了，，基本的代码改改还是会的
回来测试了下。。不错。。翻页很快。。
现在连老万都从分页加入到我们不分页一族了。。不分页有不分页的好处。。
不知为何我只显示一页？
不分页感觉人气旺！！呵呵
哈，以后不愁评论那么长了
不错的分享。用wp 的路过...
很不错的一个功能，可惜我不是用Zblog
没多少评论的博客建议不要用这个哦。呵呵。石头加油。
虽然暂时还用不到，还是帮老大顶一下。
刚好在用。
石头兄，现在第一页是2条评论，第二页5条？
谢谢，转走了（我会注明出处）。
不错，谢谢石头兄
前排灌水支持~~
不错，这对大博客有用，小博客嘛，几条评论就别分了，影响人气。
不知道这样会不会该搜索引擎干扰了，不能给评论者的外链添加！
暂时还用不到。。辛苦了。。
呵呵，学习了，支持石头兄！