**评论（Comments）** 显示在原始贴子的上下文中，可能是通过[[Webmention]]收到的来自其他网站的联合[[reply|回复]]帖子以及本地创建的评论。 

=====  操作方式 ====
====  怎样显示 ===
目标: 以高保真显示收到的评论，至少设计的跟"原生"显示在博客贴子和 [[silo]] 贴子那样的好 (例如 对[[Twitter]]帖子的回复，[[Facebook]]的回复， [[Flickr]]/[[Instagram]] 照片，等——参见[[#Silos|Silos]] 以下对他们的分析)。

按照[[comment#Accept_a_comment|接受评论]]，你的系统应该已经是：
  *  在你的服务器上侦听 [[webmention]] (你的服务器软件支持它)

当你的服务器接收到webmention URL:
  *  在那个URL上解析 **[[h-entry]]**  (如果有多个则仅使用第一个h-entry ，严格意义上，它应该是永久链接) - 使用 [[microformats2]] 解析器来执行此操作。
  *  如果到原始帖子的超链接有一个[[in-reply-to]] url，然后继续将它处理为评论。否则，将它添加到贴子页脚 中“相关文章”和“提及”部分。 [[posts#Footer_sections|贴子尾部]].
  *  **获取显示的评论信息**
    *  如果h-entry 有一个 **p-author**,使用它的 **h-card**:
    *  否则，获得而面中第一个[[#first-rel-author|*]] **rel-author** 连接，检索它指向的URL，并使用其表示性的 **h-card**:
      *  **logo/photo**
      *  **name**
      *  **url** (评论者的个人资料/主页)
  *  **获取要显示评论的文本**
    *  如果h-entry有一个 **e-content**, 并且文本没有太长 (按照你自己站点的UI喜欢/设计，但是注意 "太长" 可能是字符/字数太多，或者如果包含新行的话，行数太多），则在[[sanitize|净化]] (过滤掉不安全的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: 如果评论的文本 (不管你是怎么从上面获取的) 太长 (你的网站你自己判断), 则使用一些智能的略去代码来缩小它 (例如，参见 [[Twitter#POSSE_abbr_note_to_twitter|POSSEing 一个Twitter的详论缩写]] 作为思路) 并提供一个 "参见更多" / "查看更多" / "更多……" 链接到记注链接 (当您（您的网站）选择截断或仅显示摘要时时，在省略号旁边显示整个评论摘要的显示连接是有用的，因为评论本身可能有一个省略号)。
  *  **获得更多的评论相关信息**
    *  使用h-entry的**dt-published** 作为回复时间
      *  此外，它的 **dt-updated** 可以在你的显示中作为 "编辑时间: datetime"注释
    *  使用它的 **u-url** 作为固定链接 (回到到固定链接的超链接时间)
  *  **可选的位置特别信息** -因为没什么人在回复帖子时实现位置信息
    *  使用 h-entry的 **p-geo** / p-latitude / p-longitude 作为位置 - 你可能需要服务将它转为人类可读的邻域/城市/州/国家/地区名称。  也许是指向地图的超链接，或者是您所在地点附近所有帖子（和评论）的聚合。
      *  (问题: 也许 [[h-entry]] 可能使用类似于 [[h-event]]的 [[p-location]]属性，这将允许将结构化地址信息嵌入到 [[h-adr]]。)

有了这些信息，应该可以在原始帖子永久链接的页脚“评论”部分中进行足够丰富的展示，将每个评论添加上：

  *  [[webaction]] 点赞/喜欢/属性按镇民/链接
则你应该可以得到一个类似于任何[[Silo]]那样保真度的评论显示。

注：其中一些已经实现!
  *  [[Storytlr]] 通过[[pingback]]接收评论，然后从页面的 [[h-entry]] 和 [[h-card]] 中解析发贴内容和作者信息 ，然后显示：
    *  从 h-card / name, photo, url 属性获得评论作者信息
    *  从 h-entry / content, published, url 属性获得评论内容
    *  例如： http://eschnou.com/entry/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html
  *  ... 一下个实现会是谁?

问题：
  *  **"*第一个" rel-author** 最好，因为 a) 没有那么多的多个作者Blog，相对而言，更重要的是 b) 这是从 *reply* 贴子中检索的，而这个总是由单个人写的，所以那里应该只是单个rel-author在 *那个t* 页面上。 欢迎真实世界反驳的例子。

===  实时 ====
更妙的是，如果您可以**[[real-time|实时]]** 在查看帖子的人群中显示评论，那么当您的服务器收到帖子时，用户看起来会感觉很棒。 想法/挑站 [[iw>events/2013-09-30-indieweb-dinner#Realtime_inline_display_of_comments|2013-09-30]].

如何概览:
  *  从您的文章的浏览器视图中打开websocket，并向您的服务器发送评论。
  *  让你的服务器向你的浏览器推送评论通过打开的websocket查看你的文章。
参见: [[http://aaronparecki.com/articles/2013/10/13/1/realtime-indieweb-comments|操作详情，代码示例和演示视频]]

====  如何标记 ====

评论回复的帖子应该是顶级的 h-entry, 并且对它的评论应该标记为嵌套在comment属性之下的h-cite。例如:

<code html>
<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>
</code>

都做什么：
  *  **u-comment** - 将元素标记为h-entry的评论，以便在读取用于[[salmention]]接收的[[h-entry]] 时进行评论发现。
  *  u-comment **h-cite** - 将评论标识为可能从其他地方复制的实际评论的引用，用于提供评论发现以进一步抓取原件的提示。
    *  "comment"属性中的 [[mf>/microformats2-prefixes|**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** - 发表评论时，提供链接到固定链接的文本标签

参见: 
  *  http://microformats.org/wiki/comment-brainstorming#microformats2_p-comment_h-entry
其中记录了一系列关于如何标注评论的一系列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。
===  标记问题 ===

  *  I think the h-cite markup only works for comments via pingback/webmention, but what about comments made directly on the post using a comment-form? -- [[User:Notizblog.org|pfefferle]]
    *  Native comments make sense as "h-entry" since the copy of them on the post is likely the canonical copy. - [[User:Tantek.com|Tantek]] 13:45, 12 July 2015 (PDT)

====  如何删除 ====

如何删除从其它站点接收到的评论。.

如果独立网站 [[reply]]/comment 贴子被 [[deleted|删除]]，则用户的站点希望发送另一个相应的Webmention。

如果试图检索回复永久链接URL时，服务器收到410 GONE，那么您的服务器应该删除该评论的现有联合副本。
详情参见 [[deleted#Handling|处理删除贴子]] 

=====  独立网站IndieWeb例子 ==
自动的:

====  Ryan Barrett ===
使用 [[WordPress]], 回复评论自从 2013-01-15 e.g.
  *  https://snarfed.org/2013-01-15_healed_with_beard
(native comments since 2003-08-09, e.g. https://snarfed.org/2003-08-09_back_from_vacation )
Uses:
  *  在每个嵌入评论中用''p-comment''

====  Aaron Parecki ===
使用g [[p3k]] 自从 2013-05-29 (第一个接收到的评论显示)
  *  http://aaronparecki.com/notes/2013/05/21/1/xkcd

Aaron 还支持实时显示收到的评伭在[[http://Aaronparecki.com|aaronparecki.com]] 使用 [[p3k]] 自从 [[http://aaronparecki.com/articles/2013/10/13/1/realtime-indieweb-comments|2013-10-13]].

=====  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 [[http://aaronparecki.com/articles/2012/08/23/1/you-should-not-be-displaying-relative-dates|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 ([[http://www.kungfugrippe.com/post/47159818629/something-something-syncing#notes|example]]). They show:
  *  The author’s username
  *  The author’s profile photo

====  Twitter ===
[[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 ([[https://twitter.com/wilto/status/322028394944532480|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 ===
[[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]] 使用嵌入了评论，然后在各个网站上使用:
  *  [[https://comments.network/|comments.network]] - 在你的页面上显示来自hacker news 和 reddit上的评论
  *  [[Disqus]] - 重点在其它页面提供评论和或 ("讨论" - 按他的名字)部分.
  *  [[Facebook]] - 参见 [[Facebook#Comments_Embed|嵌入评论d]]
  *  [[https://www.hypercomments.com/|HyperComments]]

开源嵌入评论:
  *  [[https://commento.adtac.pw|commento]] - 基于go
  *  [[https://github.com/phusion/juvia|Juvia]] - 您可以在自己的服务器上安装类似于Disqus 和 [[Intense|Debate]]的评论系统
  *  [[https://github.com/skx/e-comments/|e-comments]] -  静态HTML页面的外部评论，一个轻量级的自托管disqus备选方案。
  *  [[http://coralproject.net/products/talk.html|Mozilla Talk]] - 用于评论审核和显示的系统(Javascript)
  *  [[http://donw.io/post/github-comments/|github-comments]] - 使用 [[GitHub]] issue发布评论，通过javascript加载，参见 [[GitHub#Using_Github_for_comments]]
  *  [[https://github.com/gka/schnack|schnack]] - 支持oauth的基于nodejs的嵌入评论

=====  评论隐藏 =====
[[https://stevenf.com/shutupcss/|shutup.css]] shutup.css是自定义样式表，它隐藏了许多热门网站上的评论。 因此，它是关于如何标注评论的实证研究。 有关详细信息，请参见 [[http://stevenf.com/shutup/shutup-latest.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]])
  *  https://the-pastry-box-project.net/marie-connelly/2014-june-24
  *  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 [[http://webmention.herokuapp.com/|webmention.herokuapp.com]] [[User:Kodfabrik.se|Kodfabrik.se]]

====  如何制作嵌套注评论? ===

[[Salmention]]很容易导致嵌套评论。 [[reply-chain]] 有显示多个回复的例子。.
一个来自 https://ben.thatmustbe.me/note/2014/4/24/1/的例子:

<code html>
<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>
</code>

该标记可以重复嵌套

=====  头脑风暴 =====
====  缩放显示 ====
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 [[https://www.theguardian.com/technology/series/the-web-we-want|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 [[https://www.theguardian.com/technology/2016/apr/12/the-dark-side-of-guardian-comments| 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: [[http://hackeducation.com/2013/05/16/the-comments-are-closed|The Comments Are Closed]] - many specific criticisms of comments, and the burden of maintaining them

=====  以前的规范 =====

====  Trackback 显示 ====

====  Pingback 显示 ====

=====  See Also =====
  *  [[reply]]
  *  [[comment]]
  *  [[local|comments]]
  *  [[webmention]]
  *  [[h-entry]]
  *  [[h-card]]
  *  https://aaronparecki.com/2016/12/23/7/day-3#Resized%20avatars%20for%20comments%20and%20other%20reactions