通过主题模板修改实现分页显示Zblog评论

由 willer 发布

有时候针对我们的某些热门Zblog文章的评论能达到几十甚至几百条的数量,而Zblog的系统对于评论是默认的不分页一股脑显示出来的,从美观度上来说,是非常难看的。如果能像其他博客一样实现自定义的分页显示效果就会好很多。所以,博主想办法找到了一个解决办法,可以轻松实现评论的分页显示,这里跟大家分享下。


实现分页显示的方法和步骤如下:


首先找到主题模板文件single.html


第二步将以下代码插入文件尾部


<script language="javascript" type="text/javascript">

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>


第三步:插入分页代码

<div id=showpage></div>

以上代码复制后在b_article-single.html中想显示评论分页的位置插入


最后保存文件,在后台重建文件。

代码解析:“eachCounts”配置每页显示的评论数量,“.CommentPageDiv”来控制评论分页条的样式,“.this-page”来控制分页的样式,“.now-page”来控制当前页的样式,执行相应代码修改后,就可以实现个人特色的分页显示效果了。