安装

嵌入代码

在 Site Console → 你的组件 → Install & Embed 中复制嵌入代码，你的 app key 已经填好。

<script defer src="https://embeds.crowment.com/comments.js"></script>

<crow-comments app-key="YOUR_APP_KEY"></crow-comments>

1. 把 <script> 标签放进页面的 <head>。每个页面只需加载一次。
2. 把 <crow-comments> 标签放进 <body> 中评论区要出现的位置，通常紧跟在文章之后。

安装就这么简单。组件会自动适应外层元素的宽度。

WordPress

Crowment Comments 插件会用组件替换 WordPress 自带的评论，无需修改主题。

1. 下载 crowment-comments.zip。
2. 在 WordPress 中进入 Plugins → Add New → Upload Plugin，选择该 zip，点击 Install Now，然后点击 Activate。
3. 在 Settings → Crowment Comments 中粘贴你的 app key 并保存。

现有的 WordPress 评论仍保存在数据库中，插件启用期间会被隐藏。要更新插件，用同样方式上传新的 zip，并确认替换当前版本。

框架与建站工具

<crow-comments> 是标准的 Web Component，只要能添加 HTML 的地方都能使用：静态网站、CMS 主题、React、Vue、Svelte、Angular 等。

有些框架会对未知标签发出警告。请告诉它们 crow-comments 是自定义元素：

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: tag => tag === 'crow-comments',
    },
  },
})

import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag === 'crow-comments',
        },
      },
    }),
  ],
}

单页应用

应用切换路由时无需重新创建组件。组件会自动跟踪客户端导航（pushState、replaceState 以及前进、后退按钮），并加载新页面的评论串。

页面显示哪个评论串

每个页面都有自己的评论串。默认情况下，组件按 URL 路径识别页面，忽略地址的其余部分。对于 https://example.com/blog/hello?ref=mail#comments，识别结果是 /blog/hello。也就是说：

• /blog/hello?utm_source=newsletter 和 /blog/hello 共用一个评论串。
• /blog/hello 和 /blog/hello/ 是不同的路径，因此评论串也不同。请保持 URL 一致。
• 评论串属于某一个组件。即使路径相同，两个组件也不会共享评论。

以下三个属性可以改变页面的识别方式：

• watch-query 会按字母顺序把查询参数加入页面标识，因此 ?b=2&a=1 和 ?a=1&b=2 视为相同。适用于由查询参数决定内容的页面，例如 /watch?v=abc123。所有参数都会计入，包括 utm_source 这类跟踪参数。
• watch-hash 会把哈希加入页面标识。适用于基于哈希的路由，例如 /#/posts/42。
• page-id 用你自定的标识符代替 URL。适用于同一内容存在多个 URL，或 URL 将来可能变化的情况。使用文章在数据库中的 ID 这类稳定的值，无论 URL 如何变化，评论串都会跟随页面。

<crow-comments app-key="YOUR_APP_KEY" page-id="post-1842"></crow-comments>

链接到某条评论

在任意页面 URL 后加上带评论 ID 的 crowment_cid，即可打开该页面并加载这条评论所在的评论串，例如 https://example.com/blog/hello?crowment_cid=COMMENT_ID。评论 ID 可以在组件中该评论的菜单里复制。

属性参考

布尔属性只要出现即为开启：<crow-comments app-key="…" watch-query>。页面加载后修改任何属性，组件都会随之更新。