@Someone评论预览

@评论预览

昨天在折腾时曾经说过这个帅气的功能,不过当时没有说清楚,估计大家看了也不知道怎么实现。好吧,这里就已官方的Denim模板为例,讲解如何实现这功能,有兴趣的同学也可以参考这个在自己的模板上试试。

1.备份模板


不要嫌我罗嗦,事实证明无数悲剧就是这么产生的。

2.HTML部分


搜索<b:loop values='data:post.comments' var='comment'>,可以找到类似下面的代码:

<b:loop values='data:post.comments' var='comment'>
<div expr:id='data:comment.anchorName' class='thecomment' >
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

…………
此处代码省略
…………

</dd>
</div>
</b:loop>


注意上面红色的部分,原模板是没有这一部分的,一定要加上才可以实现评论预览。同时,如果你的模板中有与上面绿色的部分相同的代码,把它删去,以免出现问题。

3.JavaScript部分


</body>前添加以下代码:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'> </script>

<script type='text/javascript'>
$(document).ready(function(){
$('.comment-body a[href*=#c]').hover(function(){
$($(this).attr("href")).clone().hide().insertAfter( $(this).parents(".thecomment") ).addClass('tip').fadeIn('fast');
},function(){
$(".tip").fadeOut("normal",function(){$(this).remove()})}).mousemove(function(e)
{$(".tip").css({left:(e.clientX+5),top:(e.pageY+8)});
});
});
</script>


首先注意红色的部分,如果你的模板中已经引入了jQuery,这部分可以去掉。

然后是绿色部分,它决定评论预览的位置,其中X是横向偏移,正值是向右偏移,负值则会向左;而Y自然就是纵向的了,正值表示向下偏移,负值则相反。

最后是橙色部分,前后两个分别代表出现预览时和消失时的特效,你可以参考官方的资料进行修改。

4.CSS部分


终于来到最后了,其实前面那几个用大多数模板应该都没什么区别,但这里不一样了。以下代码仅针对官方的Denim模板,直接使用以下代码可能会使你的评论的样式变得很混乱,你必须根据你的模板进行纠正。

]]></b:skin>前加入以下代码:

.tip {
position:absolute;
z-index:999;

border:1px solid #DCDBD7;
background-color:#ffffff;
padding:5px;
width:443px;}


#comments-block.avatar-comment-indent {
margin-left:0;
position:static;
}


#comments-block .avatar-image-container {
height:37px;
position:static;
width:37px;
left:0;
float:left;
margin-right:5px;
}

.comment-footer,.comment-body p {
padding-left:40px;
}


注意红色部分,这里也是重点,不要修改它,否则多半会出问题。昨天我说的页面下方出现一大片空白就是因为这导致的。

绿色部分则决定悬浮的预览的外观,其中粗体部分是实现悬浮效果的关键,其余的就看你喜好了。

剩下的部分都是为了把评论的外观纠正回原来的样子而存在,使用Denim模板的话就是这样子,至于你的模板就得看你自己了。

不出意外的话,应该就可以实现这一功能了,我是指在Denim模板上。但是在你的模板上也许会出现各种麻烦,因此还是建议大家去看Yinheli鼠标悬浮实现显示留言内容(上)(下),尤其是上篇,理解了其原理应该比较有利于修改

最后,祝大家中秋快乐

2 comments now

  1. 唉~要以前还想折腾一下,现在就不图这些东西了...能访问就好

    回复删除
  2. @Marqui:曾经我也是这么觉得的,不过后来觉得无所谓了
    反正我是改变不了被墙的事实的,干脆继续玩自己的喜欢的吧,不然也不好玩,墙什么的管他去死的

    回复删除