给任意段落添加批注:启用插件Feedback by Paragraph

先是偶然看到Wordpress中文论坛中的一个帖子,提及了译言网(这家网站似乎不错啊)的一个功能:眉批。可以给文章中的每一段加上批注,注册会员可以很方便地对具体的段落进行讨论。这一功能于这样一个翻译社群而言,简直是绝妙的设计。

我瞬间就被这一功能吸引了。我试图打造一个Web2.0时代的学术博客,这种学术模式希望达到的最基本的效果是:“无限的margin”——页边空白,或者说交流空间,将是互动的和无限的。这是印刷学术无论如何也比不过网络学术的一项重要的潜能。

但传统的评论模式虽然已经非常灵活和丰富了,但却失去了印刷书的页边空白与具体段落之间的切近距离,尤其是对于一篇长文章而言,每次都拖到页面底部去评论,实在会让阅读体验大打折扣,也就是说,我要么中断阅读转去写评论,要么就等到读完全文后才去写评论,这样一来“页边空白”虽然被无限延伸了,不过却只是“往下”延伸,变成“页底空白”了……

完美的“页边空白”应当可以让读者随读随记,记完接着读,而且一边读着作者的文字一边就能看到前辈读者的批注。这种功能在网络上能否实现呢?

当然,一种办法是,根本不发表长文章,而是像推特、微博那样,一段话一段话地发表出去,这种形式的确是更贯彻了网络的特色而远远超越了印刷时代的范畴。但就学术文本而言,无论时代如何变化,我们毕竟难以想象它将以一小段百余字为单位来发表。但网络的潜能巨大,肯定还会有别的方案。这样一种以文章为单位发表,但又可以以段落为单位进行评注和讨论的方式,最能让人满意。

如何实现这种功能呢?论坛上那篇帖子后面网友回复中给出一个网站:linebuzz。注册这一网站并在博客中安插js代码之后,就可以在网页的任意部分选中任意一段文本进行批注和讨论。但这一服务要求每位批注者都去注册他们家的会员,而且评论的数据也将储存在他们的网站里。更致命的问题是,这家网站最后的更新日志写到2007年……

另外还有一家著名的Web2.0网站diigo,它要求安装每位用户浏览器插件,然后就可以在任意的网站对任意文本添加高亮和注释,并和其它安装diigo的网友交流。功能虽好,但更加麻烦,而且更大问题的是,这家伟大的网站和绝大多数最伟大的Web2.0网站一样,被墙了……

于是我重新转向万能的WordPress,它那无数的插件中难道没有能够实现类似功能的吗?变换了几个关键词后,终于被我找出一个好用的:Feedback by Paragraph

这款插件做得还很不完美,比如后台设置的功能非常弱,我得手动去改css和php,才添加了评论时的网址选项,添加了在数据库中准确记录评论时间的语句(查了半天,还是用current_time方便),解决了它和表情插件的冲突,并让批注也同时显示在最下方的评论列表中,折腾这个插件让我学会了不少PHP的知识……不过它实现的功能毕竟非常让人满意了,不然我也不会费力去改它,

功能很简单,在每一段(在</p>标签前自动嵌入)末尾嵌入一个标记,点击后就会立刻弹出一个小窗口,可以在里面添加批注,同时也会显示这段已有的批注。至于段尾的标记,本来我是想设成透明完全不影响阅读,鼠标滑过才显示出来。不过想来想去,这个功能还是应该弄得醒目一些,要不然更加没人会用了……

这个插件会稍稍妨碍读者对文章内容的剪刀浆糊工作,而且会在每一段后都增添一段html代码使得网页文件变大不少(本站已启用g-zip压缩,对浏览速度的影响不太大吧)。但只是在文章页面才显示,不影响Feed,也就是说,订阅、分享等聚合(Rss)功能不会受到影响。

美中不足的是在提交批注后会刷新网页,这仍然影响了阅读的流畅性。这个问题肯定可以用Ajax技术解决,不过我暂时是懒得再折腾了,欢迎达人指教。另外,新回复的Email提醒功能对于批注无效。

批注仍然会像一般评论那样显示在文章后面,只不过专门设置了图标而与一般评论的Gravatar头像不同(顺便也把pingback的图标加上了)。现在这些批注仍然可以在评论列表中嵌套回复,这个功能不太好,最好是在评论列表中点击回复后进入相应的段落去讨论,而与一般的嵌套评论相区别。当然这个功能理论上肯定是可以实现的,不过也超出了我目前能够承受的折腾程度,也欢迎达人指教~

顺便说一下,在文章后面的评论栏目中我又新添了“上传文件”的功能。

对于博客的设计,我最为着重的就是评论环节,千方百计添设评论的功能。不过结果可能还是:几乎没有人来评论……容我先哭一哭……

关于 古雴

胡翌霖,清华大学科学史系助理教授。本站文章在未注明转载的情况下均为我的原创文章。原则上允许任何媒体引用和转载,但必须注明作者并标注出处(原文链接),详情参考版权说明。本站为非营利性个人网站,欢迎比特币打赏:1YiLinDDwvBLT19CTUsNHdiQhXBENwURb

16 条评论

  1. 就像这样~

  2. 谁会整Ajax啊?

  3. 或者能让刷新后的滚动条保持原位也好~

  4. 添加了在cookie中保留滚动条状态的代码,不过现在只有在Webkit模式才有效,IE和Firefox都无效,不知道怎么回事…………

  5. 芬伯格指导过学生设计了个叫Marginalia,可以加亮文本、添加评注,你看看~
    http://www.geof.net/code/annotation/

  6. 呵呵,我说看得眼熟呢,原来是芬伯格设计的~~~ 我现在用的这个插件就是根据Marginalia的思路写的:

    The closest plugin I could find is one called marginalia (http://marginalia.cc/) which looks very nice but doesn’t seem to play well with WordPress 2.8. So I’ve written Feedback by Paragraph to fill the gap.

    • :)看你博客这些实打实的操练,我才有点真正感受到芬伯格说的那些个意思,交往为中心、以计算机为媒介的交往……看到前面有个留言说你的哲学什么时候实践云云,我看在网络博客这件事情上,就从最平凡的理解来看,你也是做的跟说的一样好!

      • 谢谢支持~ 不过交往活动毕竟需要许多人共同参与,光我一个人再操练也好不了,希望你继续支持,经常来交流讨论~ #路过#

  7. 試試批注。

  8. 路过这段,安慰一下。

  9. 下面列出我对该插件所作的修改(针对feedbackBP.php):

    我完全没学过编程,但PHP果然是出名的易读,摸索摸索搜索搜索就能折腾折腾了~ 本着开源软件的基本精神(共同学习),我还是把我所做的改动公布出来吧~

    删除线表示原来的被删掉的,下划线表示我加上的。改动的位置只要找到feedbackBP.php后很容易搜到。

    $comments = array_filter($commentarray,"stripFBPcomments"););

    return $comments;

    /* 删掉了这个使得批注仍然可以被显示在评论列表下*/

     

    $FBPlink="<a href=\"#TB_inline?height=400320&width=350300&inlineId=popupcomments-".$i." \" class=\"thickbox spch-bub-inside\"><em>".$FBPcc."</em></a>";

    /* 改动批注弹出窗口的大小*/

     

    $stuff.=$FBPlink.'<div id="popupcomments-'.$i.'" style="display:none;visibility:hidden"><div class="FBPcontent"><H2> Comments批注 </h2>'.$FBPcomms.''.$FBPform.'</div> </div></p>'.$ptagchange;

    /* 把弹出窗口显示的标题“Comments”改成“批注”*/

    }else{

    $FBPformcode .= '<p><input type="text" name="author" id="author" value="'.$author_default.'" size="2217" /> <label for="author"><small>Your name名字*</small></label></p>

    <p><input type="text" name="email" id="email" value="'.$email_default.'" size="2217" /> <label for="email"><small>Your e-mailemail*</small></label></p>';

    <p><input type="text" name="url" id="url" value="'.$url_default.'" size="17" /> <label for="url"><small>网址</small></label></p></p>';

    }

    /* 为未登陆的游客增加了网址一栏,和一般评论一样可以留下自己的网址*/

    $FBPformcode.='<p><label for="FBPcomment">Leave a comment</"><em>您可以为相应的段落添加批注(必须包含汉字)</em></label></p>

    <p><textarea name="commentfcomment" id="commentfcomment" cols="100%"38" rows="107" tabindex="4"></textarea></p>

    <p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment提交批注" />';

    /*把textarea的值改掉了,和一般评论的textarea相区别,消除了某些插件的冲突(比如表情插件) */

     

    if (empty($commentlist)) {

    return "<span class='FBPnocomment'> No Comments </span>";

    /*如果某段没有批注,点开后会显示No Comments,不要它,删了。 */

     

     

    if ( !isset($_POST['comment_form_submitted']) ) return;

    $header_location = get_permalink();

    $author = ( isset($_POST['author']) ) ? trim(strip_tags($_POST['author'])) : null;

    $email = ( isset($_POST['email']) ) ? trim(strip_tags($_POST['email'])) : null;

    $message = ( isset($_POST['comment''fcomment']) ) ? trim(strip_tags($_POST['comment''fcomment'])) : null;

    /*上面改了textarea的值,这里也得相应改一下 */

     

    $comment_type = ( isset($_POST['comment_type']) ) ? trim($_POST['comment_type']) : null;

    $comment_post_ID = ( isset($_POST['comment_post_ID']) ) ? trim($_POST['comment_post_ID']) : null;

    $comment_moderate = ( isset($_POST['comment_approved']) ) ? trim($_POST['comment_approved']) : null;

    $url = ( isset($_POST['url']) ) ? trim(strip_tags($_POST['url'])) : null;

    $comment_date = current_time('mysql');

    $comment_date_gmt = current_time('mysql',1);

    $comment_author_IP = $_SERVER["REMOTE_ADDR"];

    $fpattern = '/[-]/u';

    if(!preg_match($fpattern, $message)) {

    wp_die( "You should type some Chinese word (like \"你好\") in your comment to pass the spam-check, thanks for your patience! 您的评论中必须包含汉字!" );

    }

    $wpdb->query( $wpdb->prepare( "INSERT INTO $wpdb->comments(comment_author, comment_author_email,comment_content, comment_post_ID, comment_type,comment_approved,comment_author_url,comment_date_gmt,comment_date,comment_author_IP )VALUES ( %s, %s, %s, %d, %s,%d , %s, %s, %s, %s)", $author, $email, $message,$comment_post_ID, $comment_type,$comment_moderate ,$url,$comment_date_gmt, $comment_date,$comment_author_IP ) );

    header('Location: ' . $_SERVER['HTTP_REFERER']);

    /*用current_time指令添加批注的时间,否则的话在数据库中这些批注是没有时间的,然后我让它们显示在评论列表中时就都会排在一般评论前面,而增加了时间后一方面数据完整了,另一方面也能够按发表先后排列了。然后顺便也增加了评论者的IP记录。然后刚刚添加了反垃圾邮件的代码,$fpattern和之后的这三行代码意味着批注中不带有汉字的话将不能发表,刚刚一夜之间就有群发器通过批注发表了四百来条垃圾评论,不得不防啊…… */

  10. Hi

    I’m glad you’re getting some use out of the plugin and that you’ve managed to make some changes. I thought you’d like to know that I’ve updated the plugin and it’s now called MCEngine. You can get a beta version at http://www.andydickinson.net/mcengine/

    Andy

    你好

    • Thank you!

      However, I wish I could change the note”There are no comments yet…”, and translate “Leave your comment for the highlighted section” into Chinese. May you add some opinions to change those messages conveniently?

      And I like to display the micro-comments among the normal comments either Then vistors could see all the comments directly then find the relevant paragraph from a comment. Can you provide an opinion to do-not-hide?

      I have an extravagant hope that the plugin might use ajax so that we needn’t refresh the whole page while adding a new comment. Then we could read&comment smoothly.

      The function of “Print this with visible MCE comments” is quite good. But we generally like to print just the content without the sidebar.

      Anyway, your plugin is wonderful! Thank you very much. #星星眼#

    • I was attacked by SQL Injection with “feedbackBP”. It adds spam comments continuously, even if I had deleted the post and forbided anyone to cmment. My database was continually added new items that their “comment_post_ID ” was always the same(185), and “comment_type” was always “feedbackbypar0”.

      I stoped the old plugin “feedbackBP” and applied “MCEngine”. But the injection was not stop. Akismet or other Anti-spam plugin are all useless. The attack ended while I stoped “MCEngine” too.

  11. 引用通知: 小结一下新博客正在使用的插件 | 随轩

发表评论

电子邮件地址不会被公开。 必填项已用*标注