精彩模版小高招第五弹—个性化评论区

In: 网功.NET | Tags: 博客, js, 设计 | Views: 12,376

尽管过去了一年多，这个系列还是可以继续的。因为乱梦使然我离开这里，离开技术很久。有时候想，我是不是太高估自己了，很多做不到的事情我想做好，做不好的事情我想做到。就像这博客的评论区……也就止于此吧。在别人评论自己的地方，我想怎样不重要。

把目前用到的东西整理出来，希望能给博友们启发，仅供参考：

效果是借鉴mg12的动态加载文章内容，但是没搞懂ajax，所以就成了现在这个样子……还是会加载评论区内容，所以会卡。~~坚持这个风格~~的原因很简单，就是我讨厌评论把页面拖得很长，又怕分页影响SEO。

js部分(需要jquery支持)：

//下拉式评论区
$(".comment-list").css('display','none');
var expand='<a href="javascript:void(0);" title="隐藏评论" class="expand"></a>';
var collapse='<a href="javascript:void(0);" title="展开评论" class="collapse"></a>';
$('div#comments h4').append(expand);
$('div#comments h4').append(collapse);
$('a.expand').css('display','none');
$('a.collapse').click(function() {
$('.comment-list').slideDown('slow');
$('a.collapse').css('display','none');
$('a.expand').css('display','inline');
$('a.expand').click(function() {
$('.comment-list').slideUp('slow');
$('a.expand').css('display','none');
$('a.collapse').css('display','inline'); })})
});

css部分：

好玩的是，很多人看不到会以为没评论。手动广告党们悻悻而去，沙发党却常兴高采烈的坐个屁股墩儿……如果有高手喜欢，希望能研究出ajax加载的效果，默认不显示或只显示前几条评论。这样想看评论的人可以去点开浏览全部，不想看的能享受更快速和简短的页面，岂不两全其美？

写完了？——不少博友觉得我这个“防垃圾评论”功能很酷，打个勾确认下才能发表。其实这是从typecho坛友那找来的防君子不防小人之招……仅做js表现没有和程序功能挂钩，意味着spam机器人可以完全无视此框框。所以咳，趣味性的意义更大。至少说明手动广告党们也是很憨的~

修改模板文件comments.php，将评论按钮那句改为：

<div style="clear:both"><input type="checkbox" onclick="agreesubmit(this)" name="agreecheck"/>
<label>Done? </label>
</div>
<div class="post-button"><input class="submit" name="submit" type="submit" value="<?php _e( 'Submit Comment') ?>" tabindex="7" disabled="disabled" /></div>
<script type="text/javascript">//<![CDATA[
var checkobj;
function agreesubmit(el){
checkobj=el;
if (document.all||document.getElementById){
for (i=0;i<checkobj.form.length;i++){
var tempobj=checkobj.form.elements[i];
if(tempobj.type.toLowerCase()=="submit")
tempobj.disabled=!checkobj.checked;
}
}
}
function defaultagree(el){
if (!document.all && !document.getElementById){
if (window.checkobj && checkobj.checked)
return true;
else{
alert("Say something to continue plz");
return false;
}
}
}
</script>
<script type="text/javascript">
document.forms.comment_form.agreecheck.checked=false;
//]]>
</script>