Threads 插件 为你的文档带来协作式的行内评论功能。选择页面上的任何文本，留下评论，开始讨论 - - 所有内容都直接存储在你的 markdown 源文件中，无需任何数据库。

原作者：@svallory

安装设置

docmd add threads

plugins: {
  threads: {}
}

配置选项

// 将线程保留在页面底部而不是行内
plugins: {
  threads: {
    sidebar: true
  }
}

工作原理

1. 在 docmd dev 期间，在任何文档页面上 选择文本
2. 出现一个 评论弹出层 - - 写下你的评论并提交
3. 所选文本会被 高亮显示 并带有线程标记
4. 线程以 ::: threads 块的形式存储在 markdown 文件的底部
5. 无需数据库 - - 你的 markdown 文件就是事实来源

预览

这是实时页面上线程的样子。带有讨论的文本会被 <span class=“threads-preview-highlight”>像这样高亮显示</span>，线程卡片会显示在下方。

<div class=“threads-preview-card”>
<div class=“threads-preview-comment”>
<div class=“threads-preview-avatar”>A</div>
<div class=“threads-preview-meta”><strong>Alice</strong> · 2d ago</div>
<div class=“threads-preview-body”>这一部分可以使用图表来解释架构。你觉得呢？</div>
</div>
<div class=“threads-preview-comment threads-preview-reply”>
<div class=“threads-preview-avatar”>B</div>
<div class=“threads-preview-meta”><strong>Bob</strong> · 1d ago</div>
<div class=“threads-preview-body”>好主意 - - 我会添加一个 Mermaid 流程图。这里可以使用 <code>sequenceDiagram</code> 吗？</div>
<div class=“threads-preview-reactions”>
<div class=“threads-preview-reaction”>👍 <span>2</span></div>
<div class=“threads-preview-reaction”>🚀 <span>1</span></div>
</div>
</div>
<div class=“threads-preview-comment threads-preview-reply”>
<div class=“threads-preview-avatar”>A</div>
<div class=“threads-preview-meta”><strong>Alice</strong> · 12h ago</div>
<div class=“threads-preview-body”>太棒了。一个简单的流程图会很理想。</div>
</div>
<div class=“threads-preview-footer”>
<div class=“threads-preview-footer-btn”>+ 新评论</div>
</div>
</div>

这是 <span class=“threads-preview-highlight-blue”>第二种不同颜色的高亮</span> - - 线程会自动循环使用一系列颜色。

<div class=“threads-preview-card threads-preview-card-blue”>
<div class=“threads-preview-comment”>
<div class=“threads-preview-avatar”>C</div>
<div class=“threads-preview-meta”><strong>Charlie</strong> · 3d ago</div>
<div class=“threads-preview-body”>我们应该在这里提到向后兼容性吗？</div>
</div>
<div class=“threads-preview-footer”>
<div class=“threads-preview-footer-btn”>+ 新评论</div>
</div>
</div>

已解决的线程显示为变暗：

<div class=“threads-preview-card threads-preview-card-resolved”>
<div class=“threads-preview-comment”>
<div class=“threads-preview-avatar”>A</div>
<div class=“threads-preview-meta”><strong>Alice</strong> · 5d ago  <span class=“threads-preview-resolved-badge”>✓ 已解决</span></div>
<div class=“threads-preview-body”>修复了配置示例中的拼写错误。</div>
</div>
<div class=“threads-preview-footer”>
<div class=“threads-preview-footer-btn”>+ 新评论</div>
</div>
</div>

页面右下角会出现一个悬浮的 讨论按钮 <span class=“threads-preview-fab”>💬<span class=“threads-preview-fab-badge”>2</span></span>，显示未解决线程的数量。点击它可跳转到页面上的第一个线程。

存储格式

线程使用 docmd 的容器语法嵌入在你的 markdown 中：

# 我的文档页面

一些内容带有 ==高亮文本=={t-a1b2c3d4}，该文本关联了一个线程。

::: threads
  ::: thread t-a1b2c3d4
    ::: comment c-e5f6a7b8 "Alice" "2026-04-09"
      这段文本需要澄清。
    :::
    ::: comment c-d9e0f1a2 "Bob" "2026-04-09" reply-to c-e5f6a7b8
      更新了  -  -  这样可以吗？

      ::: reactions
        - 👍 Alice
      :::
    :::
  :::
:::

==文本=={threadId} 语法将文档正文中的高亮文本链接到特定的线程。

特性

Actions API

Threads 插件通过 WebSocket RPC 系统公开以下操作。这些操作可以从浏览器插件中使用 docmd.call() 调用：

作者资料

作者信息存储在 <docsRoot>/.threads/authors.json 中：

{
  "alice@example.com": {
    "name": "Alice",
    "avatarUrl": "https://gravatar.com/avatar/..."
  }
}

在开发过程中，插件会自动检测你的 git 用户名和电子邮件以进行作者识别。