向您的 Hugo 站点添加评论

要在本地查看针对公共 demo 租户运行的所有短代码和主题局部，克隆该仓库并运行捆绑的 exampleSite：

git clone https://github.com/FastComments/fastcomments-hugo.git
cd fastcomments-hugo/exampleSite
hugo server

每个小部件在 exampleSite/content/ 下都有自己的页面，您可以将其直接复制到自己的网站中。

从以下两种标准方法中选择一种来添加 Hugo 主题组件。

选项 A：Hugo 模块（推荐）

在你的网站根目录下：

hugo mod init github.com/you/your-site   # 仅当你的网站尚未是一个模块时
hugo mod get github.com/FastComments/fastcomments-hugo

然后将导入添加到你的 hugo.toml：

[module]
  [[module.imports]]
    path = "github.com/FastComments/fastcomments-hugo"

选项 B：主题组件（Git 子模块）

git submodule add https://github.com/FastComments/fastcomments-hugo.git themes/fastcomments-hugo

然后在你的 hugo.toml 中引用它。将它与你自己的主题一起列出；后出现的条目将生效，因此请将你的主题放在第一位：

theme = ["your-theme", "fastcomments-hugo"]

在 hugo.toml 中设置一次您的租户 ID:

[params.fastcomments]
  tenantId = "demo"   # 将 "demo" 替换为您的 FastComments 租户 ID

然后将评论小部件接入到您的主题（参见 主题集成），或在任意页面的 Markdown 中插入短代码：

\{{< fastcomments >}}

示例

文本内联的评论计数：

This page has \{{< fastcomments-comment-count >}} comments.

实时聊天：

\{{< fastcomments-live-chat >}}

协作聊天，通过 CSS 选择器定位内容元素：

<article id="post-body">
  <p>Highlight me to leave a comment.</p>
</article>

\{{< fastcomments-collab-chat target="#post-body" >}}

图片聊天，通过 CSS 选择器定位图像元素：

<img id="hero" src="/hero.jpg" alt="Hero image" />

\{{< fastcomments-image-chat target="#hero" >}}

评论摘要：

\{{< fastcomments-reviews-summary >}}

用户活动提要：

\{{< fastcomments-user-activity-feed userId="demo:demo-user" >}}

要像 Hugo 内置的 Disqus 支持那样将评论附加到每篇文章，请在主题的 single 模板 (layouts/_default/single.html) 中添加一行：

\{{ partial "fastcomments/comments.html" . }}

仅当配置了 tenantId 时该 partial 才会渲染。要在单个页面上禁用评论，请在 front matter 中设置：

+++
title = "A page with no comments"
comments = false
+++

要在多个页面旁同时显示评论数（例如博客索引、章节列表），请使用批量计数组件。它会在单个请求中获取页面上的所有计数。它由两部分组成：每个项目旁的标记，以及列表之后的一次初始化调用。

在列表模板 (layouts/_default/list.html) 中：

<ul>
  \{{ range .Pages }}
    <li>
      <a href="\{{ .RelPermalink }}">\{{ .Title }}</a>
      \{{ partial "fastcomments/count-marker.html" . }}
    </li>
  \{{ end }}
</ul>
\{{ partial "fastcomments/bulk-count.html" (dict "page" .) }}

count-marker.html 渲染 <span class="fast-comments-count" data-fast-comments-url-id="..."></span>，使用评论组件用于该页面的相同标识符（它的 urlId，或者当未设置 urlId 时使用其固定链接），因此计数与真实线程对应。bulk-count.html 发出填充这些计数的单个请求。

如果你自己编写这些标记（例如在页面的 Markdown 中），请改用短代码来发出初始化调用：

<span class="fast-comments-count" data-fast-comments-url-id="article-1"></span>
<span class="fast-comments-count" data-fast-comments-url-id="article-2"></span>

\{{< fastcomments-comment-count-bulk >}}

所有 FastComments 小部件选项在 hugo.toml 的 [params.fastcomments] 下设置，并且可以在页面的 front matter 的 [fastcomments] 下进行每页覆盖。优先级从低到高：站点参数、页面 front matter、短代码参数。

# hugo.toml
[params.fastcomments]
  tenantId = "your-tenant-id"
  hasDarkBackground = true
  voteStyle = 1
  enableSearch = true

# a page's front matter
+++
title = "Article"
[fastcomments]
  urlId = "article-42"
  collapseReplies = true
+++

当既未提供 url 也未提供 urlId 时，url 会默认设为页面的永久链接 so comment threads stay tied to a stable URL。

欧盟数据驻留

欧盟客户将 region = "eu" 设置为将小部件路由到 cdn-eu.fastcomments.com：

[params.fastcomments]
  tenantId = "your-tenant-id"
  region = "eu"

键大小写说明

Hugo 在 hugo.toml 和 front matter 中会将每个键都转换为小写，但 FastComments 小部件需要 camelCase 的键（tenantId、hasDarkBackground）。该组件会自动为所有已知的顶级选项恢复正确的大小写，因此请以正常的 camelCase 形式编写选项。位于对象值内部的嵌套键（例如 translations 映射的键，或 pageReactConfig 的字段）不会被恢复。请通过 FastComments 仪表板的自定义界面来配置这些内容。

有关小部件选项的完整列表，请参阅 FastComments 自定义文档。两个小部件采用一个没有默认值的必需选项：

• fastcomments-collab-chat 和 fastcomments-image-chat 需要 target，这是用于附加到元素的 CSS 选择器。
• fastcomments-user-activity-feed 需要 userId。

• FastComments 文档
• 自定义与配置
• Hugo 文档

这些组件是围绕我们核心的 VanillaJS 小部件构建的薄封装。我们可以在不发布此存储库的情况下更新那些小部件（修复错误、添加功能），因此沉寂的发布历史并不意味着 FastComments 不活跃。有关更新，请查看我们的博客。对底层小部件的破坏性更改会在此处随版本号提升一并发布。