Hugo サイトにコメントを追加する

公開されている demo テナントに対して、すべてのショートコードとテーマのパーシャルがローカルで動作する様子を確認するには、リポジトリをクローンし、同梱されている exampleSite を実行してください：

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

各ウィジェットは exampleSite/content/ 以下にそれぞれのページを持っており、これをそのまま自分のサイトにコピーできます。

Hugo テーマコンポーネントを追加するための標準的な2つの方法のうち、いずれかを選んでください。

オプション 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) に1行追加します:

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

そのパーシャルは tenantId が設定されている場合にのみレンダリングされます。個別のページでコメントを無効にするには、フロントマターで次のように設定します:

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

複数のページ（ブログの一覧やセクションの一覧など）にコメント数を同時に表示するには、bulk count ウィジェットを使用します。ページ上のすべてのカウントを単一のリクエストで取得します。構成は2つに分かれます：各項目の横に置くマーカーと、一覧の後に行う1回の初期化（init）呼び出しです。

リストテンプレート（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] で上書きできます。優先順位（低い -> 高い）: サイト params、ページ 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 に紐づくように、url はページのパーマリンクをデフォルト値として使用します。

EU データ居住

EU のお客様はウィジェットを cdn-eu.fastcomments.com にルーティングするために region = "eu" を設定します:

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

キーの大文字小文字に関する注意

Hugo は hugo.toml と front matter のすべてのキーを小文字に変換しますが、FastComments ウィジェットは camelCase のキー（tenantId, hasDarkBackground）を必要とします。このコンポーネントは既知のトップレベルオプションの正しい大文字小文字を自動で復元するため、オプションは通常の camelCase 形式で記述してください。オブジェクト値の内部にネストされたキー（例えば translations マップのキーや pageReactConfig のフィールド）は復元されません。それらは代わりに FastComments ダッシュボードのカスタマイズ UI で設定してください。

ウィジェットオプションの完全な一覧については、FastComments のカスタマイズと構成に関するドキュメント を参照してください。2つのウィジェットにはデフォルト値のない必須オプションがあります:

• fastcomments-collab-chat と fastcomments-image-chat は target が必要で、これはアタッチする要素のための CSS セレクタです。
• fastcomments-user-activity-feed は userId が必要です。

• FastComments ドキュメント
• カスタマイズと構成
• Hugo ドキュメント

これらのコンポーネントは当社のコア VanillaJS ウィジェットの薄いラッパーに過ぎません。これらのウィジェット（バグ修正や機能追加）は、このリポジトリを公開せずに更新できるため、リリース履歴が静かだからといって FastComments が活動していないわけではありません。最新情報は当社のブログを確認してください。基盤となるウィジェットの破壊的変更は、ここでのバージョンアップとともに提供されます。