跨页悬浮显示 @ 评论 (代码篇)
@ 回复是个好东西, 因为它结构简单, 处理方便; 嵌套回复则有更友好的用户体验, 可以调动访客回复的积极性. 对 @ 回复而言, 悬浮显示 @ 评论 (显示评论提示框) 在一定程度上可以提升 @回复的用户体验. 但是当评论出现分页的时候, 评论提示框就像被阉割一样, 功能不全. 表现为不能获取其他页面的评论信息, 本文将告诉你如何跨页处理.
《跨页悬浮显示 @ 评论 (原理篇)》已经浅谈了跨页获取评论信息的原理, 本文将剖析其处理流程和提供相关代码.
在当前页面如何通过 @{username} 找到对应评论?
1. 每个评论都会有一个 ID, 结构如: comment-{commentId}, 这本是为了方便通过锚点找到评论, 同时也成为完成 @ 评论提示的必要条件.
2. 每个 @{username} 其实就是指向评论的锚点, 自然可以取得评论 ID.
所以其实很简单, 如果评论 ID 是 _commentId, 那么在 JS 可以通过以下代码找到对应的评论.
document.getElementById(_commentId);
如果能够找到目标评论, 则创建一个隐藏的临时评论, 并以目标评论作为其内容, 在 @{username} 附件将它显示出来; 如果没找到目标评论, 则通过 ID 到后台查找对应的评论, 进行跨页处理.
如何跨页加载评论?
跨页的实质是动态加载评论, 将获取的评论追加到评论列表最后, 让评论可以在本页中找到, 不同的只是这些评论通过 CSS 加工并不会显示出来.
可以参考下图. 如果评论不在本页, 会走红色路径, 在评论被加入当前页面之后, 会有一个动作, 将提示框的 Loading 信息替换为评论内容. 当用户在此将鼠标悬停在这个 @{username} 时, 评论已在当前页面, 所以不需再次加载, 而是走绿色路径, 直接将评论提示框调出.
注: 图中蓝色部分是后台处理, 黄色部分是整个加载过程的重点.
在后台中怎样获取评论并对其格式化?
这里可以自己写个方法对评论信息进行格式化, 也可以通过评论的回调方法 (WordPress 2.7 或以上版本可以定义评论的回调方法) 来获取格式化的 HTML.
$comment = get_comment($_GET['id']); custom_comments($comment, null,null);
注: custom_comments 是我的回调函数的方法名.
JavaScript 代码
基于 jQuery 的 JS 代码, 如果不使用或者使用其他 JS frame, 请根据处理思路自行改造. 建议将代码放置于评论列表下方.
var id=/^#comment-/; var at=/^@/; jQuery('#thecomments li p a').each(function() { if(jQuery(this).attr('href').match(id)&& jQuery(this).text().match(at)) { jQuery(this).addClass('atreply'); } }); jQuery('.atreply').hover(function() { var target = this; var _commentId = jQuery(this).attr('href'); if(jQuery(_commentId).is('.comment')) { jQuery('<li class="comment tip"></li>').hide().html(jQuery(_commentId).html()).appendTo(jQuery('#thecomments')); jQuery('#thecomments .tip').css({ left:jQuery().cumulativeOffset(this)[0] + jQuery(this).width() + 10, top:jQuery().cumulativeOffset(this)[1] - 22 }).fadeIn(); } else { var id = _commentId.slice(9); jQuery.ajax({ type: 'GET' ,url: '?action=load_comment&id=' + id ,cache: false ,dataType: 'html' ,contentType: 'application/json; charset=utf-8' ,beforeSend: function(){ jQuery('<li class="comment tip"></li>').hide().html('<p class="ajax-loader msg">Loading...</p>').appendTo(jQuery('#thecomments')); jQuery('#thecomments .tip').css({ left:jQuery().cumulativeOffset(target)[0] + jQuery(target).width() + 10, top:jQuery().cumulativeOffset(target)[1] - 22 }).fadeIn(); } ,success: function(data){ var addedComment = jQuery(data + '</li>'); addedComment.hide().appendTo(jQuery('#thecomments')); jQuery('#thecomments .tip').html(addedComment.html()); } ,error: function(){ jQuery('#thecomments .tip').html('<p class="msg">Oops, failed to load data.</p>'); } }); } }, function() { jQuery('#thecomments .tip').fadeOut(400, function(){ jQuery(this).remove(); }); });
PHP 代码
这段代码来自 yinheli 的 PhilNa2 主题, 建议将代码追加到 function.php.
function load_comment(){ if($_GET['action'] =='load_comment' && $_GET['id'] != ''){ $comment = get_comment($_GET['id']); if(!$comment) { fail(printf('Whoops! Can\'t find the comment with id %1$s', $_GET['id'])); } custom_comments($comment, null,null); die(); } } add_action('init', 'load_comment');
如果您使用以上代码进行了二次开发, 请不要转码和加密, 以保持代码开放可用.
@xOases
我的也死活不行，在footer页面调用了js。
@回复的效果没有任何变化啊。
已经尝试将插件全部禁用，也不行。
能不能讲清楚一点？
“评论列表”具体指什么啊？
如何确认jq已经加载？
页面代码里面有上面这一句是不是就可以了？
是不是还需要修改css文件？
折腾好几天了，哪位指点一二？
博主的主题交互效果不错。
已经解决了，谢谢
博主啊，cumulativeOffset这个在我的页面运行后，浏览器提示cumulativeOffset is not a function，我怎么把它引入进来呢？
我是个JS白痴。。。。。
已经弄好了 哈
@Leo.N
我也想加进去，晚上弄弄
折腾了下，发现用之前那个不能跨页显示的能成功，用这个就不能。。。折腾的主题不是inove。。不过对于我这种评论常年小于20的博客来说用第一种方法还是能胜任了，呵呵。
@仔仔 我来帮mg12大大回答下，这个随意，以js文件存在的话你就必须用《script type="text/javascript" 链接 》《/script》加载到含评论的页面中，也就是page或single页面中，放在footer里也行，还有，必须加载jq框架。
看了下，呵呵。
MG12 大人
我很喜欢这个效果，所以想放在我新开的博客里。
但我在xampp本地测试了一下，这个方法不成功，但《在 iNove 主题中悬浮显示 @ 评论》的能成功。
“...建议将代码放置于评论列表下方."这句话该怎么理解？我放到comments.php 里没法用。参照《在 iNove 主题中悬浮显示 @ 评论》用js调用也不成功。自认我是菜菜鸟，太菜了，望给予多些指点，好让我继续快乐的折腾！
注：我的Theme是授用大人您 iNove 改造CSS东拼西凑来的，请莫见怪！
JavaScript代码
不知道放在comments.php还是comments.js ？ ？
可以说一个比较清楚的地方吗..mg12大大
呵呵 尊称 对了 MG12哥哥 （改口）
@Reply / w comment preview
这个插件貌似和您的“跨页悬浮显示 @ 评论”代码神似。我用了那个插件（照您的教程代码我不会改我的模板）虽然显示了悬浮框 。但是悬浮框只显示了一个小黑条 没看到评论内容预览 不知道是怎么回事 （已经按照插件作者的提示修改也没有效果）
问题具体在这个页面：http://xianzi.cc/airplay-player/#comment-35
还有哈
您的评论楼号功能是怎么实现的呢(点击楼号实现向下滚动的那个功能！)
@Mr.坏
这些代码本来就是针对 iNove 的.
@whisperer
如果是 Opera 9.x, 肯定是有问题的.
@dust2k
哈哈, 好定力.
@Leeiio
如果在提示框中再聚焦 @{username} 呢?
@ucax
这个不会出教程, 要出就出插件, 要么就不出.
@バカ
加到最后面 ?> 之前.
@techStudio
哈哈, 我去查看一下 IP.
@吖Bee
这个内置到主题不太好.
@Leo.N
活着就为了折腾
@鲜资网
我什么时候成大叔了?
看看MG12大叔！
Good Job!有了这东西我又能折腾下了。。。
新版的Philna2里还想内置了这功能~
终于等到了,可以有时间改一下了~
我是来顶帖子的！
@バカ 我试试@reply
是哪个有强迫症的搞得满页的评论都是负分……
请问INOVE主题需要添加在functions.php的什么地方..好像不能成功..
上次 mg12 在INOVE 掛上修改後 diggs 的代碼不錯. 不知會不會出教程?
有一个问题就是你这个弹出的内容当鼠标有焦点的时候不消失哈，个人建议，当然如果你只是单纯当作为了看内容的话可以无视
大家有空常交流!
@Mr.坏
我已经替换过了，貌似不大行啊，我等下再试试。。
博主的文采不错,大家有空多交流!
坚决不改，不为这些小技巧所诱惑，哈哈。。
终于放出来了 谢谢mg12~ 回去就升级下~
对了 不知道这个版本可以支持opera了么？因为我看到 yinheli 那儿的在opera下也正常
@Alex
应该是用现在的代码替换原来的。
技术贴，纯路过……
附带UML图，很清晰，学习下
这个技术贴，纯路过……
@Jacse
那个背景的箭头是自己手画的啊
@流浪路上
PS就可以。
想知道你的那个图是拿什么画的
这个功能很好玩！
你的博客风格很喜欢，请问首页的前两篇文章显示摘要，其他显示标题怎么实现的？
刚才好像没有试成功，我用的是inove主题。。
这段代码和以前的@预览代码会不会有什么冲突的？？
我的评论不是很多
我现在懒得分页了
不知道这样做好不好？
终于出来了！
mg12什么时候能整理一下针对你主题的跨页悬浮代码呢？特别是inove主题。你授于渔，很惭愧对于js我只会鱼。刚按照文中的方法改了一下，发现网页有错误，失败了。。
不错哦，我也开了一个博客，有空大家经常交流...
看着舒坦呐 Marked
@bolo
加不加都可以.
@yalexue
这是活动图, 绘图工具叫 JUDE UML, 我用的是社区版.
老大，你的结构图是用嘛软件绘制的啊？挺好看。
真是复杂
恩，那个结构图很好！
看到一大段的代码 头疼啊
从你的主题来看似乎并不需要if(jQuery(_commentId).is('.comment'))这段啊
看来你真的很讨厌加了密的代码，哈哈
沙发，终于出代码了