跳到主要内容
Termlib

UI 组件 · 社交

评论

Comment

也叫：评论区、评论列表、留言、回复、Comments、Comment Section

文章、商品、帖子下面用户留下的看法：每条有头像、昵称、时间、正文和「回复、点赞」，可以楼中楼回复，顶部是写评论的输入框。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

在文章底部做一个评论区：顶部标题「评论 128」，右侧「最热 / 最新」切换。下面是写评论的区域：左侧 32px 当前用户头像，右侧 3 行高的多行文本框，占位文字「写下你的看法…」，聚焦后显示「发布」按钮，内容为空时按钮禁用。评论列表每条：左侧 36px 头像，右侧第一行昵称（14px 加粗），作者本人的评论带「作者」小标签，后面是灰色相对时间「3 小时前」；第二行正文 14px、行高 1.7；第三行是灰色的「回复」「👍 12」和悬停才出现的「⋯」（举报、删除）。回复缩进 48px 显示在父评论下方，只嵌套一层，超过 3 条折叠成「展开 8 条回复」。每次加载 20 条，底部「加载更多」。用户内容转义后再渲染。

发给

01判断

你的内容是这样吗？

对照两列，确认评论是不是你要找的。

符合这些情况，用评论

  • 博客文章、视频、社区帖子下面，让读者发表看法、互相回复
  • 商品详情页的用户评价，带评分和晒图
  • 文档、设计稿、任务详情里的协作讨论

是这些情况，换成别的

  • 两个人一来一回的实时对话

    改用聊天气泡

  • 只想收集用户对产品的意见、不需要公开展示，用反馈表单

    改用表单

  • 按时间记录系统操作（谁在什么时候改了什么）

    改用时间线

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    回复无限层嵌套，缩进越来越深，第五层的评论只剩窄窄一条

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    评论只有正文，没有时间，也没有回复和点赞，看不出先后，也没法接着讨论

  3. 03

    用户写的内容不转义就直接当 HTML 渲染，留下 XSS 漏洞

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由评论区标题（数量和排序）、写评论的输入框和评论列表组成；每条评论是头像、昵称、时间、正文和「回复 / 点赞 / 更多」操作，回复缩进显示在下方。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1内容下方一列左对齐的条目，每条左边是圆形头像
  2. 2头像右边第一行是加粗的昵称和灰色的「3 小时前」，下面是一段文字
  3. 3文字下方有「回复」和点赞数，部分条目下面有缩进的回复

04解释

详细解释

评论出现在博客文章、视频、商品详情、社区帖子和文档的最下方。一个评论区通常分三块：顶部是「评论 128」标题和「最热 / 最新」排序，接着是写评论的输入框，下面是一条条评论。每条评论左边是头像，右边第一行是昵称、「作者」这类身份标签和「3 小时前」，第二行是正文，最下面一行是「回复」「点赞 12」和「⋯」更多操作；对某条评论的回复缩进显示在它下方（楼中楼），回复多了折叠成「展开 8 条回复」。

它和 聊天气泡 的区别：评论是围绕同一篇内容的公开讨论，所有人的评论都靠左排成一列，按时间或热度排序；聊天是一来一回的对话，左右分开，新消息在最下面。它和 信息流 的区别：信息流里每一项本身就是一篇独立的内容；评论依附于上面那篇内容。商品评价就是带 评分 星星和晒图的评论，结构一样。

回复最多嵌套两层，更深的改成「回复 @某人」平铺，不然缩进会越来越窄。评论多时分页或「加载更多」，不要一次全部渲染。发出的评论要立刻出现在列表里（可以标「审核中」），删除、举报收进「⋯」菜单。展示用户写的内容前要转义，防止 XSS；评论里的链接加 rel="nofollow"。

开发者信息
术语 ID
component-comment
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-comment
  • .arco-comment
  • .t-comment
  • #disqus_thread
  • .giscus
  • .utterances
  • .tk-comment
  • .atk-comment
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • comment
  • comments
  • comment-item
  • comment-card
  • comment-list
  • comment-section
  • comment-thread
  • comment-box
  • reply-item
  • replies
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Comment
  • CommentItem
  • CommentList
  • CommentSection
  • CommentThread
  • Comments
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 图片开头
  • 重复子项
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30