跨页面悬浮显示@评论 原理+实现

先说说我最近干嘛去了:

最近俺校高三第四次月考,实在是玩不动了,每次都考的比前一次差那么一丢丢,各种郁闷....

然后前两天来博客看了看,真的是草都长到脖子那么高了。各种无奈....

闲的没事去了趟 z大叔 的屋子转了转,新文章看看顺便吐槽一句,本来真的想修炼一下大叔的嘲讽技能,不过我貌似学不来.....(大叔看到后请务必传授我秘诀!我已经学习到链接结构都是Orz6的地步了)

看完文章吐槽完后就是各种无节操的拉RP,看到一个“羊羊”博主,估计也是爱折腾的主,就在 about-me 页面各种畅聊了.....

然后就看到了这个效果:

Clipboard_20141122还有一个我“以前”经常逛的站也用了这个效果,不过这个效果的既视感比我的强了好多倍....给出传送门

之后我还是觉得吧代码整理一下,为 WPer 的圈子也做一个贡献,于是就有了今天的这个文章。

开始折腾

要玩这个高大上的功能,你需要准备以下材料:

  • 良好的代码感(不是必需品,但我觉得至少结构能读懂)
  • 一颗爱折腾、不怕折腾的心
  • 复制粘贴.....(貌似这货有点多余...)
  • 视觉强迫症(也就是说,你得自己改CSS)
  • 我准备好的代码

OK,接下来我们开始理论部分

某某人曾经说过,先有理论,后有实践,这话一点也不假。

其实,早都有人做过这方面的研究,我也是在很早以前在 yinheli 那里看到过,不过现在这博客貌似已经不见了(如果是换域名我倒还不清楚,有知道的朋友请务必在吐槽区留下传送门,小弟感激不尽),当时代码是压缩过的,所以就大概做了个样子出来。

之后问这个 yinheli 大神要到过代码,作为研究之用。为此,他专门写了文章,拜读之后才彻底清楚实现方法。

首先载入jQuery库,至少1.3.2的版本(有的请直接略过....算我嘴贱....)

下面是 comments-tips.js 的代码( yinheli 的原版):

然后载入它,你可以放到主题目录下的 js 目录里

对于使用 yinheli 的 PhilNa2 主题用户,请在functions.php中另外添加如下php代码,用于加载评论:

这样就能实现这种效果了。

不过,用了他的方法后我忽然发现一个问题:我的博客评论区是 ajax 分页的,这就导致了鼠标触发 hover 特效时当前页面的评论还好说,可是一旦跨页就彻底死了,于是就开始在原有代码的基础上各种折腾,并且参照了 MG12 大神在09年早些时候写下的文章进行了一些修改,从而完成了现在的版本。

为什么不能跨页显示?

因为其工作原理是, 当鼠标移动到 @{username} 时在本页找到对应的评论, 并插入到评论列表中, 以绝对位置的方式显示出来. 如果评论不在本页, 找不到对象, 当然就没有后面的处理了.

—— MG12

后来,我读到 MG12 的另一篇文章(其实那时候来说已经很晚了,大概有大半年了之后才出的),改写了部分代码,就是你在下面要看到的我博客的代码部分。这里引用一下 MG12 大叔的图片与解释性文字:

如何跨页获取评论信息?如果本页找不到对应的评论, 可以通过评论的 ID, 用 AJAX 将后台查询到的评论信息返回页面. 当鼠标移动到 @ 评论上时, 向用户悬浮显示 'Loading...' 提示框, 如果操作成功将找到的评论插入评论列表的最后面, 并将该评论的内容置换到 'Loading...' 框.

也就是说, 被加载过的评论会一直保留在本页中, 当鼠标再次移动到 @ 评论上不用重新加载.

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

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

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

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

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

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

在后台中怎样获取评论并对其格式化?
这里可以自己写个方法对评论信息进行格式化, 也可以通过评论的回调方法 (WordPress 2.7 或以上版本可以定义评论的回调方法) 来获取格式化的 HTML.

$comment = get_comment($_GET['id']);
custom_comments($comment, null,null);
注: custom_comments 是我的回调函数的方法名.

—— MG12

下面的js是我博客的方式,这种方式可以跨页面完成请求并在点击@链接时可以直接跳转到该评论,同时支持跨页面:

 Update! 11/22/2014 更新一处bug 

今天接到肥羊兄的问题,大概找了一下原因,可能是我习惯了用简版函数工厂的原因,用美元符号写jQuery。解决方法很简单,把$改成jQuery就可以了。

然后是我博客的 CSS 部分:

 

以下内容来自于 MG12 大叔, CSS 来自于其主题 iNove .

下面是 MG12 大叔的 JS 实现方法:

 

下面是 MG12 大叔在 iNove 主题中的 CSS ,你可以前往 NeoEase 查看原文。

 

这里的内容,WordPress及Typecho的朋友就别看了,这里的内容是针对 Micolog 的。

这里顺便贴上 Deniart 主题(基于Micolog)的CSS:

以及comments.html

更多内容参见传送门

最后再多说一句话:如果您使用以上代码进行了二次开发, 请不要转码和加密, 以保持代码开放可用. 

呼~ 看看表..... 02:04 了....看来明天上课精神又要萎靡了....

折腾完(大叔经典)

P.S.

  1. @zwwooooo,大叔...我无意间发现了你在文章开头提到的那个脚本效果很好的博客的留言....你有空了可以怀念一下...传送门
  2. @大肥羊 效果我搞定了,直接搬走吧,答应你的。
  3. @MG12 大叔,我本来想去找找你写过的文的...无奈你那里数据库出了问题...提醒一下,要修复了...
  4. 本文的出现离不开 MG12 大叔和 yinheli 大叔,感谢你们提供的丰富的折腾资料。
  5. 本文欢迎转载,但请各位大大务必留下本站链接(来源出处),小弟感激不尽。
  6. 《最近的生活》吐槽文近期生成,请关注本站...

 

 

 

声明: 本文采用 BY-NC-SA 协议进行授权 | Deamwork
转载请注明转自《跨页面悬浮显示@评论 原理+实现
本文地址:https://www.deamwork.com/archives/suspended-across-the-page-to-display-the-comments-principle-and-implementation.orz6

回复 (19)

  1. 大肥羊 China Mozilla Firefox Windows   / 回复

    TypeError: $ is not a function 这个咋解决?看到JS代码出现这个错误就头大。

    • Jason Cooper China Google Chrome Windows   / 回复

      @大肥羊
      你确定有加载过 jQuery 么?
      首先载入jQuery库,至少1.3.2的版本

      • 大肥羊 China Mozilla Firefox Windows   / 回复

        @Jason Cooper
        jQuery v2.1.1 ,wordpress自带的jquery也加载了。。。

        • Jason Cooper China Google Chrome Windows   / 回复

          @大肥羊
          加载位置呢,jq应该在前面加载的,或者是加载重复了

        • Jason Cooper China Google Chrome Windows   / 回复

          @大肥羊
          问题解决,我习惯了用$而不是jQuery,下次注意…….

          • 大肥羊 China Mozilla Firefox Windows  

            @Jason Cooper
            改了,不报错了,可是没东西出来啊,还要怎么处理么?

  2. Jason Cooper China Google Chrome Windows   / 回复

    @大肥羊
    难不成我没发全?我本地的站都出了效果啊….你试试看别的版本,我记得MG12大叔的版本也是支持跨页面的…

    • 大肥羊 China Mozilla Firefox Windows   / 回复

      @Jason Cooper
      可能是评论结构还没改对,如果可以的话,直接js和css就有效果,是吧?

      • Jason Cooper China WordPress for Android Android   / 回复

        @大肥羊
        没错,js的功能都在那个图上体现了,comment中查询匹配的a标签,然后自动生成DOM结构和应用css样式,同时AJAX被艾特的评论位置,抓取内容-。-我实在不知道哪里出了问题-。-

        • 大肥羊 China Mozilla Firefox Windows   / 回复

          @Jason Cooper
          估计是缺了点什么吧,看完代码了,不会改了 :mrgreen:

  3. 郑永 Argentina SouGou Browser Windows   / 回复

    没想到这里还有一个折腾控,呵呵 :) 辛苦了。

  4. Jason Cooper China Mozilla Firefox Windows   / 回复

    测试

  5. 龙笑天 China Mozilla Firefox Windows   / 回复

    只能看看…操作起来太复杂了!

发表评论 修改评论取消编辑

允许使用的标签 - 您可以在评论中使用如下的 HTML 标签以及属性。

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img src="" alt=""> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

 :mrgreen:  :|  :twisted:  :arrow:  8O  :)  :?  8-)  :evil:  :D  :idea:  :oops:  :P  :roll:  ;)  :cry:  :o  :lol:  :x  :(  :!:  :?:

欢迎来到Deamwork! o(∩_∩)o
X