逐段评论系统

Posted 2023-02-22

【中文标题】逐段评论系统

【英文标题】：per-paragraph commenting system

【发布时间】：2013-10-28 22:33:47

【问题描述】：

我对 cme​​ts-per-paragraph 系统（也称为“注释系统”）的新兴趋势非常感兴趣，例如 medium.com 和 qz.com 实现的那些，我正在研究为我自己开发一个。

问题：似乎它们主要是通过 javascript 实现的，它贯穿文本的 html 段落，该段落由一个 id 属性（或者，在 Medium 的情况下，一个 name 属性）唯一标识。这是否意味着他们的 CMS 实际上将每个段落作为单独的条目存储在数据库中？对我来说似乎过于复杂，但除此之外，他们如何处理可以在整个文本中删除、编辑或移动段落的事实？如果作者更改段落，将如何保留唯一 ID？ 这个独特的 id 在逻辑上是如何构成的？ (post_id + position_in_post)？

感谢您的见解...

【参考方案1】：

如果有人进来看看，我已经实现了一个类似媒体的功能作为 Django 应用程序。 它是开源的，可以在 Pypi 和 github 上找到 package。

我使用了我的其他应用之一，blogging 为每个内容对象分配唯一的段落 ID（目前我们只查看<p> 标签），并在存储时在后端使用了一些额外的内部元数据在 DB 中（目前是 mysql，但我们所做的是 JSONed Blob，这种方法更适合面向文档的 DB）。前端主要是 jQuery 驱动，使用REST API 将后端与前端插入。

我从这篇文章中得到提示，但随后拒绝从段落中创建某种摘要值，因为内容可以改变。我想要的是保留注释，只要段落没有被完全覆盖。在完全覆盖的情况下，我提供了在孤立存储桶中收集注释的方法。

更多tutorials

相同的旧版本在这些教程页面上运行，这是第一个修订版。 （但您将无法在不登录的情况下发帖，但您可以随时使用社交帐户登录以查看 :-)）

【参考方案2】：

还有一个名为“commentpress”的 wordpress 插件已经存在了很长时间。 我在我的博客中使用了这个插件的旧版本，效果很好。

你可以选择逐行或逐段评论，人机工程学真有思想！

这里有一个演示：http://futureofthebook.org/ 所有代码都在github上：https://github.com/IFBook/commentpress-core

快速查看代码后，他们似乎使用了第二个方法，就像@Eamon Nerbonne 在his answer 上解释的那样。 他们解析每个段落以根据每个单词的第一个字符进行签名。 Here 是执行此操作的函数。

【参考方案3】：

（免责声明：我是factlink 开发者。）

我在一家试图允许在任意网站上按段落（或按短语）发表评论的公司工作。本质上，您有两种选择来确定评论的锚点。

记住页面的结构（例如从根到段落的一些路径），下次将 cmets 放在相同的位置。 识别段落的内容，下次将 cmets 放置在相同或相似的内容附近。

这两个系统都有其缺点，但如果您想要一个强大的系统，您几乎需要使用选项 2。面对不断变化的结构，结构识别是脆弱的。尤其是不相关的更改，例如主题或使用的精确 html 标签会显着影响“路径”。发生这种情况时，您真的无法修复它 - 除非您检查内容，即选项 (2)。

Sam 在his answer 中描述了基于服务器端内容的内容。 factlink 和 (IIRC) hypothesis 使用纯客户端基于内容的匹配。大多数浏览器支持使用window.find 或TextRange.findText 在页面内容中进行非标准但快速的子字符串搜索。或者，您可以遍历 DOM，虽然速度较慢，但​​可以灵活地实现（例如）模糊匹配。

看起来客户端匹配有点矫枉过正或复杂，但实际上它更简单：这是一种将内容管理与评论分离的非常可靠的方法。两者都不是很简单，因此将这些问题解耦可能是一种胜利。

【参考方案4】：

我最近published a post 讨论了如何使用基于现有插件的 WordPress 来做到这一点。

像 qz.com 一样，我在客户端上分配段落 ID，然后将该信息提供给 WordPress，以便在创建新评论时存储为评论元数据。我使用段落文本的散列来创建 id，这意味着段落的顺序并不重要，但确实意味着如果一个段落被编辑，那么任何关联的 cmets 都会变成孤立的。

起初我认为这是一个问题，但仔细想想，如果读者看到某个段落，那么随后编辑该文本似乎有点偷偷摸摸。

如果您想分叉和增强代码，可以在 GitHub 上免费获取代码。

【参考方案5】：

我在同一行上创建了一个小提琴，以在培训课程中展示 JQuery 的强大功能。

http://fiddle.jshell.net/fotuzlab/Lwhu5/

结合 Sam 的详细而有用的见解可能会有所帮助。您可以在 Jquery 函数中获取文本字段的值，您可以使用 ajax/API 将其发送到您的 CMS。

PS：该功能尚未准备好生产。它只是作为一个起点。稍作调整即可使用。

【参考方案6】：

我不能说媒体，但作为 Quartz 的开发者之一，我可以深入了解 qz.com 注释的工作原理。

注释代码是自定义的php代码，独立于CMS用于发布文章（wordpress VIP）。我们确实将每个段落的引用存储为数据库中的一行，以便跟踪文章内容的任何更新。我们称之为注释线程，当用户保存注释时，threadId 与注释一起存储。

我们没有为每个段落存储在 wordpress 端的唯一 id，而是存储该文章中的段落相对位置（nodeIndex “3” 和 nodeSelector “p” == 内容正文中的第三个 p-tag对于给定的文章）和 javascript 确定确切放置注释块的位置。我们走这条路线是为了避免在 wordpress 方面进行更重的自定义，但根据您的 CMS，直接在 CMS 代码中解决这个问题并添加唯一的可能更容易发送到客户端之前的 html 中的 id。

每次发布​​文章更新时，都会将更新文章中的每个段落与之前存储在该文章的注释线程中的内容进行比较。如果位置和段落文本不匹配，它会尝试找到最接近匹配的段落并更新该线程的行，并在适当的地方创建和删除新线程。每当将更改发布到文章时，所有这些都会在服务器端处理。

还有一些值得关注的替代含义是 Gawker 的 Kinja 文本注释（目前在 Jalopnik 上使用）和 rapgenius.com 的逐字注释。

【讨论】：

感谢 Sam，您的回复带来了非常有趣的见解。祝 Quartz 好运！

也许你想开源你的代码？ ... 我在开玩笑。感谢您的洞察力。这会给很多开发者一个启发，如何自己实现这样一个系统。我相信有人会发布一个智能的第三方服务来进行内联评论。时间问题:)

啊，有人这样实现Disqus，查看源代码github.com/tsi/inlineDisqussions