您的足迹: • comment
Comment
目录
评论(Comments) 显示在原始贴子的上下文中,可能是通过Webmention收到的来自其他网站的联合回复帖子以及本地创建的评论。
操作方式
怎样显示
目标: 以高保真显示收到的评论,至少设计的跟“原生”显示在博客贴子和 silo 贴子那样的好 (例如 对Twitter帖子的回复,Facebook的回复, Flickr/Instagram 照片,等——参见Silos 以下对他们的分析)。
按照接受评论,你的系统应该已经是:
- 在你的服务器上侦听 webmention (你的服务器软件支持它)
当你的服务器接收到webmention URL:
- 在那个URL上解析 h-entry (如果有多个则仅使用第一个h-entry ,严格意义上,它应该是永久链接) - 使用 microformats2 解析器来执行此操作。
- 如果到原始帖子的超链接有一个in-reply-to url,然后继续将它处理为评论。否则,将它添加到贴子页脚 中“相关文章”和“提及”部分。 贴子尾部.
- 获取显示的评论信息
- 如果h-entry 有一个 p-author,使用它的 h-card:
- 否则,获得而面中第一个* rel-author 连接,检索它指向的URL,并使用其表示性的 h-card:
- logo/photo
- name
- url (评论者的个人资料/主页)
- 获取要显示评论的文本
- 如果h-entry有一个 e-content, 并且文本没有太长 (按照你自己站点的UI喜欢/设计,但是注意 “太长” 可能是字符/字数太多,或者如果包含新行的话,行数太多),则在净化 (过滤掉不安全的HTML)后使用它。
- 如果没有 e-content 或者它太长了,则
- 如果 h-entry 有一个 p-summary, 并且文本不是太长,那们就使用这个 (作者精心制作的摘要,或者较长文章中只有一部分是该评论)
- 如果 p-summary 太长 (按照你自己站点的UI喜好/设计), 则自行截断 p-summary (按照下面的TRUNCATING细节)
- 否则 自行截断 e-content (如果有) (按TRUNCATING).
- 否则 (没有 e-content 和没有 p-summary), 如果有一个 p-name, 则使用这个
- 如果该 p-name 太长 (根据你自己的站点UI喜好/设计)
- 则自行截断 p-name (按照 TRUNCATING).
- TRUNCATING: 如果评论的文本 (不管你是怎么从上面获取的) 太长 (你的网站你自己判断), 则使用一些智能的略去代码来缩小它 (例如,参见 POSSEing 一个Twitter的详论缩写 作为思路) 并提供一个 “参见更多” / “查看更多” / “更多……” 链接到记注链接 (当您(您的网站)选择截断或仅显示摘要时时,在省略号旁边显示整个评论摘要的显示连接是有用的,因为评论本身可能有一个省略号)。
- 获得更多的评论相关信息
- 使用h-entry的dt-published 作为回复时间
- 此外,它的 dt-updated 可以在你的显示中作为 “编辑时间: datetime”注释
- 使用它的 u-url 作为固定链接 (回到到固定链接的超链接时间)
- 可选的位置特别信息 -因为没什么人在回复帖子时实现位置信息
- 使用 h-entry的 p-geo / p-latitude / p-longitude 作为位置 - 你可能需要服务将它转为人类可读的邻域/城市/州/国家/地区名称。 也许是指向地图的超链接,或者是您所在地点附近所有帖子(和评论)的聚合。
有了这些信息,应该可以在原始帖子永久链接的页脚“评论”部分中进行足够丰富的展示,将每个评论添加上:
- webaction 点赞/喜欢/属性按镇民/链接
则你应该可以得到一个类似于任何Silo那样保真度的评论显示。
注:其中一些已经实现!
-
- 从 h-card / name, photo, url 属性获得评论作者信息
- 从 h-entry / content, published, url 属性获得评论内容
- … 一下个实现会是谁?
问题:
- “*第一个” rel-author 最好,因为 a) 没有那么多的多个作者Blog,相对而言,更重要的是 b) 这是从 *reply* 贴子中检索的,而这个总是由单个人写的,所以那里应该只是单个rel-author在 *那个t* 页面上。 欢迎真实世界反驳的例子。
实时
更妙的是,如果您可以实时 在查看帖子的人群中显示评论,那么当您的服务器收到帖子时,用户看起来会感觉很棒。 想法/挑站 2013-09-30.
如何概览:
- 从您的文章的浏览器视图中打开websocket,并向您的服务器发送评论。
- 让你的服务器向你的浏览器推送评论通过打开的websocket查看你的文章。
参见: 操作详情,代码示例和演示视频
如何标记
评论回复的帖子应该是顶级的 h-entry, 并且对它的评论应该标记为嵌套在comment属性之下的h-cite。例如:
<div class="h-entry"> <h1 class="p-name">The Main Entry</h1> <p class="p-author h-card">John Smith</p> <p class="e-content">A few insights I've had:</p> <h2>Comments</h2> <div class="u-comment h-cite"> <a class="u-author h-card" href="http://jane.example.com/">Jane Bloggs</a> <p class="p-content p-name">Ha ha ha great article John.</p> <a class="u-url" href="http://jane.example.com/c12"> <time class="dt-published">2015-07-12 HH:MM</time> </a> </div> <div class="u-comment h-cite"> <a class="u-author h-card" href="http://kim.example.net">Kim Codes</a> <p class="p-content p-name">What were the insights?</p> <a class="u-url" href="http://kim.example.net/k23"> <time class="dt-published">2015-07-12 HH:MM</time> </a> </div> • • • </div>
都做什么:
- u-comment - 将元素标记为h-entry的评论,以便在读取用于salmention接收的h-entry 时进行评论发现。
- u-comment h-cite - 将评论标识为可能从其他地方复制的实际评论的引用,用于提供评论发现以进一步抓取原件的提示。
- “comment”属性中的 **u-** 前缀 用于从h-cite中获取u-url
- u-author - URL 到评论作者的网站
- u-author h-card - h-card将作者的URL和名称组织到一个结构中
- p-content - 评论的完整文本内容
- p-content p-name - 如果需要,可以使用评论的文本作为注释的标签
- u-url - 评论的固定链接,对于发表者收件人唯一标识单个评论是必要的
- dt-published - 发表评论时,提供链接到固定链接的文本标签
参见:
其中记录了一系列关于如何标注评论的一系列pre-indieweb思想,特别是当评论只是直接在帖子上进行本地化,而不是传播到对等体。
总的来说,这个“操作方法”和indieweb过程是关于微格式评论灵感的进一步简化,根据真实世界的需要添加了属性。
在body上的p-content
注 class=“p-content” 用在comment的body上,这是原因:
- p-* instead of e-*: 他最简单和最安全的做法是只显示来自别人网站的纯文本评论内容。 因此,使用p-content而不是电子内容。 如果您在其他人的网站上包含链接,图片或其他任何比纯文本更丰富的内容,则可以使用电子内容。
- p-content instead of p-summary: 典型的评论足够小,可以全部显示,因此常见情况是整个内容而不是摘要,因此p-content比p-summary。 如果由于某种原因,你觉得有必要截断评论(或者使用他人的“p-summary”),那是的,你应该使用p-summary而不是p-content。
标记问题
如何删除
如何删除从其它站点接收到的评论。.
如果独立网站 reply/comment 贴子被 删除,则用户的站点希望发送另一个相应的Webmention。
如果试图检索回复永久链接URL时,服务器收到410 GONE,那么您的服务器应该删除该评论的现有联合副本。 详情参见 处理删除贴子
独立网站IndieWeb例子
自动的:
Ryan Barrett
使用 WordPress, 回复评论自从 2013-01-15 e.g.
(native comments since 2003-08-09, e.g. https://snarfed.org/2003-08-09_back_from_vacation ) Uses:
- 在每个嵌入评论中用
p-comment
Aaron Parecki
Silos
一般而言,现有的博客/Silo帖子会显示注释(按时间顺序或反向时间顺序),并提供以下详细信息:
- commenter logo/photo
- commenter name
- hyperlinked to commenter profile
- full text of comment
- time of comment
- often in relative time since rather than absolute datetime
- though see reasons why you should not be displaying relative dates
- hyperlinked to comment permalink
- commenter location (variable granularity) at time of comment writing
- hyperlinked to silo aggregation of activity at that location
- like/favorite button (to like or favorite the comment/@-reply)
Tumblr
Tumblr groups various different response types into a generic “notes” feed, at the bottom of each post (example). They show:
- The author’s username
- The author’s profile photo
Twitter shows all tweets which are both in-reply-to a particular tweet AND contain the original tweeters @name below the tweet metadata in chronological order. They provide a “reply” box above (?) the reply feed (example). The tweets have:
- The authors name
- The author’s @name
- The author’s profile photo
- A relative timestamp
- The tweet content
- A bunch of actions (on hover)
Twitter replies are ordered according to an undocumented “relevance” heuristic https://help.twitter.com/en/using-twitter/twitter-conversations#ranking
Facebook treats comments as completely secondary to “full” posts, showing them in chronological order beneath the post’s action bar. Facebook only show the latest ~4 comments if there are more, and display the leave-a-comment box below. They have:
- The author’s name
- The author’s profile photo
- The comment content
- A relative timestamp
- 'via mobile' if applicable
- Like button w/ like counter
嵌入评论
有些silos 使用嵌入了评论,然后在各个网站上使用:
- comments.network - 在你的页面上显示来自hacker news 和 reddit上的评论
- Disqus - 重点在其它页面提供评论和或 (“讨论” - 按他的名字)部分.
开源嵌入评论:
- commento - 基于go
- e-comments - 静态HTML页面的外部评论,一个轻量级的自托管disqus备选方案。
- Mozilla Talk - 用于评论审核和显示的系统(Javascript)
- schnack - 支持oauth的基于nodejs的嵌入评论
评论隐藏
shutup.css shutup.css是自定义样式表,它隐藏了许多热门网站上的评论。 因此,它是关于如何标注评论的实证研究。 有关详细信息,请参见 该CSS。
关于评论comments和提及mentions的不同
如果原始帖子没有明确的 in-reply-to属性表明它是直接回复您的帖子,则不应出现与您提供评论相同的样式或群组。 这可能会误导观众认为一般性提及是对帖子的评论,这可以改变对原文帖子的解读。 例如,请参阅下面的交换内容,了解如何将提及(mention)作为评论(comment)提交意见可以改变的说明。
常见问题
当我可以截断e-content时为什么使用p-summary
Q: 我想如果我抓取e-content并认为它太长了,我不妨自己截断它。 为什么我需要这个p-summary?
A: 因为作者/出版商可能(或仅是可能)明确撰写p-summary,使其成为截然不同的截断版本的电子内容,而不是自动截断。
为什么使用u-comment而不是 p-comment
Q: 为什么在评论中使用 u-comment
而不是p-comment
?
A: u-comment
会作为评论的URL解析评论隐含值,这对于支持 salmention很有用。 http://indiewebcamp.com/irc/2015-07-22#t1437612361069
讨论
- Long posts where only a part of it is in-reply-to another post and a large chuck of it is a tangent should not be published as a reply/comment and instead should be published as a mention. Noting this here because this is accounted for above in the “How to display > get the text of the comment to display” section and it might wrongly send the message that (largely tangential) posts like these should be marked up with in-reply-to. (See http://indiewebcamp.com/irc/2013-07-07/line/1373241638)
- For places where comments can't be included in line the use of a
u-responses
to point to another page containing a list of>h-entry
objects with all of the received comments would be useful. Useful in blog lists and when using an external WebMention endpoint such as webmention.herokuapp.com Kodfabrik.se
如何制作嵌套注评论?
Salmention很容易导致嵌套评论。 reply-chain 有显示多个回复的例子。. 一个来自 https://ben.thatmustbe.me/note/2014/4/24/1/的例子:
<div class="comment u-comment h-cite"> <div class='comment_header'> <span class="minicard h-card u-author"> <img class='comment_author u-photo' src="https://ben.thatmustbe.me/image/static/icon_128.jpg" /> <span class="p-name u-url" href="https://ben.thatmustbe.me" rel="nofollow" title="Ben Roberts" > Ben Roberts </span> </span> <a href="https://ben.thatmustbe.me/note/2014/9/12/1/_" class="u-url permalink"> <time class="date dt-published" datetime="2014-09-12 13:40:56">September 12, 2014 1:40 PM</time> </a> </div> <div class='comment_body p-content p-name'> On account of I got called out on it, I now have back context in my replies! </div> <div class="subcomment u-comment h-cite"> <div class='comment_header'> <span class="minicard h-card u-author"> <img class='comment_author u-photo' src="https://kylewm.com/static/img/users/kyle.jpg" /> <span class="p-name u-url" href="https://kylewm.com" rel="nofollow" title="Kyle Mahan" > Kyle Mahan </span> </span> <a href="https://kylewm.com/2014/09/great-work-ben-have-a-feeling-you" class="u-url permalink"> <time class="date dt-published" datetime="2014-09-12 16:29:19">September 12, 2014 4:29 PM</time> </a> </div> <div class='comment_body p-content p-name'> Great work, Ben! Have a feeling you have started a trend :P </div> </div> </div>
该标记可以重复嵌套
头脑风暴
缩放显示
How do you scale the display of hundreds (or more) of comments or responses in general?
E.g. see:
- aaronpk's 100+ item facepile of likes: https://aaronparecki.com/2017/03/02/9/midi-poop-emoji
文章
- 2016 The Guardian series: the web we want “How can we end online abuse, and have better conversations on the web?” discusses challenges of online comments, e.g.
- 2016-04-12 The dark side of Guardian comments <blockquote>We decided to treat the 70m comments that have been left on the Guardian – and in particular the comments that have been blocked by our moderators – as a huge data set to be explored rather than a problem to be brushed under the carpet.</blockquote>
- 2013-05-16 Audrey Watters: The Comments Are Closed - many specific criticisms of comments, and the burden of maintaining them