跨页悬浮显示 @ 评论 (代码篇)

Nov 1st, 2009 Add Comment
comment tip

@ 回复是个好东西, 因为它结构简单, 处理方便; 嵌套回复则有更友好的用户体验, 可以调动访客回复的积极性. 对 @ 回复而言, 悬浮显示 @ 评论 (显示评论提示框) 在一定程度上可以提升 @回复的用户体验. 但是当评论出现分页的时候, 评论提示框就像被阉割一样, 功能不全. 表现为不能获取其他页面的评论信息, 本文将告诉你如何跨页处理.

跨页悬浮显示 @ 评论 (原理篇)》已经浅谈了跨页获取评论信息的原理, 本文将剖析其处理流程和提供相关代码.

在当前页面如何通过 @{username} 找到对应评论?

1. 每个评论都会有一个 ID, 结构如: comment-{commentId}, 这本是为了方便通过锚点找到评论, 同时也成为完成 @ 评论提示的必要条件.
2. 每个 @{username} 其实就是指向评论的锚点, 自然可以取得评论 ID.

所以其实很简单, 如果评论 ID 是 _commentId, 那么在 JS 可以通过以下代码找到对应的评论.

document.getElementById(_commentId);

如果能够找到目标评论, 则创建一个隐藏的临时评论, 并以目标评论作为其内容, 在 @{username} 附件将它显示出来; 如果没找到目标评论, 则通过 ID 到后台查找对应的评论, 进行跨页处理.

如何跨页加载评论?

跨页的实质是动态加载评论, 将获取的评论追加到评论列表最后, 让评论可以在本页中找到, 不同的只是这些评论通过 CSS 加工并不会显示出来.

可以参考下图. 如果评论不在本页, 会走红色路径, 在评论被加入当前页面之后, 会有一个动作, 将提示框的 Loading 信息替换为评论内容. 当用户在此将鼠标悬停在这个 @{username} 时, 评论已在当前页面, 所以不需再次加载, 而是走绿色路径, 直接将评论提示框调出.

at-reply-tip

注: 图中蓝色部分是后台处理, 黄色部分是整个加载过程的重点.

在后台中怎样获取评论并对其格式化?

这里可以自己写个方法对评论信息进行格式化, 也可以通过评论的回调方法 (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');

如果您使用以上代码进行了二次开发, 请不要转码和加密, 以保持代码开放可用.

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 跨页悬浮显示 @ 评论 (代码篇)

  1. http://1.gravatar.com/avatar/57ee0e14f023f457a4a3e6f085441a26?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    jQuery.ajax 测试的时候有个问题, 就是不刷新页面, 二次调用评论ID的时候(就是用户浏览过后,又重复浏览), IE浏览器没有输出了, chrome正常, 怎么解决, 请教!

  2. http://0.gravatar.com/avatar/e87b264d88631de777ecfe2abb602de6?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    这个jQury代码用的是Prototype框架...所以我一开始整合到主题里的时候出了很多问题...后来改写jQuery代码就好了.感谢分享

  3. http://0.gravatar.com/avatar/e87b264d88631de777ecfe2abb602de6?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    我也 来看看俺MG12大叔

  4. http://0.gravatar.com/avatar/27d702f6df7a7ad98f16a1247270ad2d?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    wp居然被你玩成这个样子 -________-!!!

  5. http://1.gravatar.com/avatar/780c6d9f5c47a6f54d74a7baa19e623a?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    还是不懂啊,唉~~~~~~怎么就没有小白菜教程呢。

  6. http://1.gravatar.com/avatar/b1cd481865728781f9dfcd8631b09e4f?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    马克下

  7. http://0.gravatar.com/avatar/490cf262668eebb0f0f1a50d9d48d702?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    @LDY
    其实就是鼠标滑过时构造 DOM, 这个一时半会说不清楚, 有耐性的话就等我写教程吧.

    @kelven
    本站样式表你下载来偷瞄一下就好了.

  8. http://1.gravatar.com/avatar/14b93dab9a34f9dce201beeb55b3cfe7?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    请问一下可以共享一下你这个浮出框的样式么?CSS不好 做不出这样即简介又大方的感觉。感激不尽。。。

  9. http://1.gravatar.com/avatar/b6be8ea344633fd1d16470e5aff3a73d?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    鼠标经过评论层显示回复按钮,又不是嵌套回复?请教详细实现方法!

  10. http://1.gravatar.com/avatar/b6be8ea344633fd1d16470e5aff3a73d?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    我还在折腾品论弹出样式,嵌套回复不想用,不知道楼主的这个回复样式是怎么实现的

  11. http://0.gravatar.com/avatar/8ce3e1ec8d277f054e288ee813e6e13b?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    mg12 :
    @Mr.坏
    这些代码本来就是针对 iNove 的.
    @whisperer
    如果是 Opera 9.x, 肯定是有问题的.
    @dust2k
    哈哈, 好定力.
    @Leeiio
    如果在提示框中再聚焦 @{username} 呢?
    @ucax
    这个不会出教程, 要出就出插件, 要么就不出.
    @バカ
    加到最后面 ?> 之前.
    @techStudio
    哈哈, 我去查看一下 IP.
    @吖Bee
    这个内置到主题不太好.
    @Leo.N
    活着就为了折腾
    @鲜资网
    我什么时候成大叔了?

    如何确认jq已经加载?
    页面代码里面有上面这一句是不是就可以了?
    是不是还需要修改css文件?
    折腾好几天了,哪位指点一二?

    我也折腾一下

  12. http://0.gravatar.com/avatar/aad3b4423e897b2fd2647ee77a56a965?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    不会JS很郁闷啊..折腾了好久...

  13. http://1.gravatar.com/avatar/17f60d0036e9dbbfd4db53e7499e48c7?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    请问博主,我在footer区调用了JS,然后将function load_comment()这12行代码复制到了FUNCTION.PHP中,可是INOVE中还是不起作用,请问怎么解决?

    今天弄了一天,到处搜索也没搞定,还望不吝赐教。。。不胜感激!

  14. http://1.gravatar.com/avatar/17f60d0036e9dbbfd4db53e7499e48c7?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    @eroica

    我的也可耻地失败了,折腾了好久不成功。。。泪奔

  15. http://0.gravatar.com/avatar/062385a9f796ac3d9cecadd1f9fb4fc3?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    看起来头有点晕倒,反正用的你的主题,一会去找下你的回复插件... :grin: 这个表情工具好可爱 :cool:

Comment pages
  1. Loading...