跨页悬浮显示 @ 评论 (代码篇)
@ 回复是个好东西, 因为它结构简单, 处理方便; 嵌套回复则有更友好的用户体验, 可以调动访客回复的积极性. 对 @ 回复而言, 悬浮显示 @ 评论 (显示评论提示框) 在一定程度上可以提升 @回复的用户体验. 但是当评论出现分页的时候, 评论提示框就像被阉割一样, 功能不全. 表现为不能获取其他页面的评论信息, 本文将告诉你如何跨页处理.
《跨页悬浮显示 @ 评论 (原理篇)》已经浅谈了跨页获取评论信息的原理, 本文将剖析其处理流程和提供相关代码.
在当前页面如何通过 @{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');
如果您使用以上代码进行了二次开发, 请不要转码和加密, 以保持代码开放可用.
jQuery.ajax 测试的时候有个问题, 就是不刷新页面, 二次调用评论ID的时候(就是用户浏览过后,又重复浏览), IE浏览器没有输出了, chrome正常, 怎么解决, 请教!
这个jQury代码用的是Prototype框架...所以我一开始整合到主题里的时候出了很多问题...后来改写jQuery代码就好了.感谢分享
我也 来看看俺MG12大叔
wp居然被你玩成这个样子 -________-!!!
还是不懂啊,唉~~~~~~怎么就没有小白菜教程呢。
马克下
@LDY
其实就是鼠标滑过时构造 DOM, 这个一时半会说不清楚, 有耐性的话就等我写教程吧.
@kelven
本站样式表你下载来偷瞄一下就好了.
请问一下可以共享一下你这个浮出框的样式么?CSS不好 做不出这样即简介又大方的感觉。感激不尽。。。
鼠标经过评论层显示回复按钮,又不是嵌套回复?请教详细实现方法!
我还在折腾品论弹出样式,嵌套回复不想用,不知道楼主的这个回复样式是怎么实现的
如何确认jq已经加载?
页面代码里面有上面这一句是不是就可以了?
是不是还需要修改css文件?
折腾好几天了,哪位指点一二?
我也折腾一下
不会JS很郁闷啊..折腾了好久...
请问博主,我在footer区调用了JS,然后将function load_comment()这12行代码复制到了FUNCTION.PHP中,可是INOVE中还是不起作用,请问怎么解决?
今天弄了一天,到处搜索也没搞定,还望不吝赐教。。。不胜感激!
@eroica
我的也可耻地失败了,折腾了好久不成功。。。泪奔
看起来头有点晕倒,反正用的你的主题,一会去找下你的回复插件...
这个表情工具好可爱