评论区通常是文章最底下的一整块——读完一整篇，才想起还有话要说，可那时已经忘了是哪一段让你想开口。

段落评论想解决的是：讨论发生在你读到它的那一刻、那一处。

这篇文章本身就是一个演示场。正文里几乎每种内容块旁边都有一个不起眼的小气泡——把鼠标移上去，或是在手机屏幕上点一下那段文字，你就能对这一句或这一整块单独发表评论。下面我一边讲实现，一边把这些可评论的内容块都摆出来给你试。

---

先说说为什么不做“底部评论区”的升级，而要做“行内”

底部评论区有个老问题：讨论和内容分离。你读到第三段的某个观点想反驳，等翻到底部写下评论时，自己都未必记得清是针对哪句。

而段落评论把入口放在文字流里——光标悬停段落，行尾浮出一个小气泡；点它，就在这一段下面展开对话。

参考了不少内容平台的做法。有意思的是，调研下来发现：真正把讨论做成“行内批注”的产品，都不会把入口按钮压到文字上面，而是让它顺着文字流的结尾走，或者悬在整块内容的角落——这直接影响了我后面的实现取舍。

引用块本身也是可评论对象——比如上面这句设计感悟，就可以单独圈出来讨论。

但要小心：入口不能“泛滥”

如果每一段旁边都常驻一个按钮，文章会变成按钮田。所以做了几个约束：

• 没有评论的段落，气泡平时隐藏，只在鼠标悬停或手指点到时出现；
• 已经有人评论的段落，气泡常驻并显示评论数，作为“这里有人在聊”的路标；
• 手机上没有悬停，靠触摸追踪：手指划到哪一段，哪一段的入口浮现。

这些是段落评论可用性的第一课：可发现性要有，但要有克制。

---

实现：几种内容块，两种入口形态

文章正文来自 WordPress 的 block 结构。不同 block 的“评论锚点”长法不一样，最终分成两类：

• 文字流型（普通段落、列表项）：评论入口是一个小气泡图标，放在这段文字最后一行文字的结尾。它是个 SVG，评论数直接画在气泡里面——比如这个段落如果已经有一条评论，气泡里就有个数字。
• 整块型（引用、代码、表格、图片等有独立视觉容器的块）：入口是一个右上角的胶囊，而且入口出现时，整个块会浮起一圈高亮框——告诉你“你要评论的是这一整块，不是里面的某一行”。

下面把能评论的块类型各放一个，你可以逐个试。

1. 普通段落（行尾小气泡）

这就是最普通的一段话。把鼠标悬停在这段上，注意段末会出现小气泡。这一整段都可以作为评论锚点——试试评论“这一段的开头那句”和“评论结尾那句”，它们都会挂在这同一段下面。

段落文字很长的时候有个细节：气泡如果也跟着文字折行，可能会被挤到下一行单独成行。实现时用一个“零宽锚点”把气泡挂在文字流末尾，让行盒以为它不占宽度，这样即使文字顶到行尾，气泡也稳稳待在最后一行末尾，最多往右溢出一点点。

2. 列表项（每一项都能评论）

段落评论不只服务段落。列表的每一项也是独立锚点：

• 第一项：你可以单独评论这一条
• 第二项：也可以单独评论这一条，互不干扰
• 第三项：评论会精确挂到“这一项”而不是“整个列表”

列表、引用这类块里如果还嵌套着可评论内容，交互上有个原则：同一时刻只亮一个入口——你悬停到内层，外层的入口和高亮框就退下，避免两个按钮叠在一起不知道点哪个。

3. 引用块（整块评论 + 高亮框）

引用通常是一个完整的观点容器，值得整块讨论：

段落评论的意义，不是让每一句话都变成评论区，而是让“读到某处想说话”这个冲动，能在它发生的瞬间被接住。

悬停这块引用，右上角出现胶囊，同时整块浮起高亮框——这时候的评论是针对整句引用的。

4. 图片（整块评论）

图片也可以作为评论锚点。下面是演示用的占位说明：

图片块的可评论性意味着：读者可以对“这张图”本身发表看法，而不是绕到文章末尾说“上面那张图……”。悬停图片，右上角胶囊 + 高亮框同样会出现。

5. 代码块（整块评论）

技术文章里代码常被单独讨论——比如“这行是不是有 bug”，或者“这个写法有没有更优解”。代码块整体可评论：

// 零宽锚点：让行尾图标不触发折行
<span class="block-comment-anchor">
  <button class="block-comment-trigger--inline">
    {/* 气泡 SVG，评论数画在内部 */}
  </button>
</span>

6. 表格（整块评论）

表格适合整块讨论——“这个对比漏了一列”这类评论应该挂在表格上：

内容块	入口形态	高亮框
段落	行尾小气泡	无
列表项	行尾小气泡	无
引用、图片、代码、表格	右上角胶囊	有

7. 其他块：HTML、自由格式、预格式化文本

这三种块在 WordPress 里相对少见，但也纳入了可评论范围：

自定义 HTML 也能被评论

预格式化文本块（Preformatted）：
保留空格和换行的等宽文本，
也可以作为一个整块评论锚点。

---

嵌套与边界：这些场景最容易翻车

实现过程踩了不少坑，正好借这些段落说明边界行为。

Columns 分栏里的块

WordPress 的 Columns 把内容分成左右栏。栏里的段落、引用、图片，各自仍是独立的评论锚点——左右两栏都可以放内容，任何一侧的东西都能单独被评论：

不过这里藏着一个容易翻车的细节。

放进栏里的内容，渲染时会走一条“嵌套块”的处理路径。这条路径最初是为列表项设计的——列表项需要被包在一个轻量的行内元素里，才不会破坏列表结构。但问题在于：嵌套路径对所有内容一视同仁。图片、表格这类本应作为“完整块”渲染的内容，一旦也被套上轻量的行内处理，就会失去整块形态——评论入口还在，可悬停时不会再浮起那圈高亮框，读者也就看不出“这一整块都可以评论”。

修法也不复杂：渲染前先判断内容的类型。普通段落和列表项属于文字流，继续用轻量的行内方式就好；而引用、图片、表格这些属于容器型的内容，即使出现在嵌套位置，也必须保留完整的块级渲染——高亮框自然就不会丢。

Hover 死区

桌面端有个反直觉的 bug：鼠标从段落移向行尾气泡的过程中，会经过一小段“真空地带”，那段不在段落上也不在气泡上，导致气泡在鼠标到达前就消失了。

修法是双保险：气泡隐藏时加一点延迟（给鼠标留出移动时间），再在段落与气泡之间补一个透明的“桥”，让悬停状态在移动过程中不断开。

---

结束语

段落评论不是要把评论区拆碎，而是让讨论跟着内容走。如果这篇文章里你恰好对某一段、某块有想法——不用翻到底部了，直接在那一处留下它吧。

你正在读的这段话，也可以是一条评论的起点。