在您的 Hugo 網站新增留言

要在本機查看每個短碼和主題 partial 在公開的 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 中放入一個 shortcode:

\{{< 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" . }}

該 partial 只有在設定了 tenantId 時才會呈現。可以在單一頁面的 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

# 該頁面的 front matter
+++
title = "Article"
[fastcomments]
  urlId = "article-42"
  collapseReplies = true
+++

當既未提供 url 也未提供 urlId 時，url 預設為該頁面的 permalink，以便留言串綁定到穩定的 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 控制台的自訂化 UI 來設定那些。

欲查看完整的小工具選項清單，請參閱 FastComments 自訂與設定文件。有兩個小工具需要一個沒有預設值的必要選項：

• fastcomments-collab-chat and fastcomments-image-chat 需要 target，這是用來指定要附加到元素的 CSS 選擇器。
• fastcomments-user-activity-feed 需要 userId。

• FastComments 文件說明
• 客製化與設定
• Hugo 文件說明

這些元件是圍繞我們核心 VanillaJS 小工具的薄包裝層。我們可以更新那些小工具（修正錯誤、加入功能）而不需要發佈這個程式碼庫，因此安靜的版本發佈記錄並不代表 FastComments 已停止維護。查看 我們的部落格 以獲得更新。對底層小工具的重大變更會在此處隨著版本號提升一起發佈。