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   # only if your site is not already a module
hugo mod get github.com/FastComments/fastcomments-hugo

그런 다음 hugo.toml에 import 항목을 추가하세요:

[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에 tenant ID를 설정하세요:

[params.fastcomments]
  tenantId = "demo"   # "demo"을 귀하의 FastComments tenant 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" . }}

partial은 tenantId가 구성된 경우에만 렌더링됩니다. 개별 페이지에서 프론트 매터로 댓글을 비활성화하려면:

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

많은 페이지(예: 블로그 인덱스, 섹션 목록)에 댓글 수를 한 번에 표시하려면 bulk count widget을 사용하세요. 이 위젯은 페이지의 모든 카운트를 단일 요청으로 가져옵니다. 구성요소는 두 가지입니다: 각 항목 옆의 마커와 목록 뒤의 하나의 init 호출입니다.

In a list template (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>을 렌더링하며, 해당 페이지에 대해 comments widget이 사용하는 것과 동일한 식별자(해당 페이지의 urlId, 또는 urlId가 설정되지 않은 경우 permalink)를 사용하므로 카운트가 실제 스레드와 일치합니다. bulk-count.html은 이 값들을 채우는 단일 요청을 보냅니다.

If you write the markers yourself (for example in a page's Markdown), use the shortcode to emit the init call instead:

<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] 아래에 설정되며, 페이지별로는 프런트매터의 [fastcomments]에서 재정의할 수 있습니다. 우선순위(낮음→높음): 사이트 params, 페이지 프런트매터, 숏코드 매개변수.

# 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
+++

When neither url nor urlId is provided, url defaults to the page's permalink so comment threads stay tied to a stable URL.

EU 데이터 레지던시

EU 고객은 region = "eu"를 설정하여 위젯을 cdn-eu.fastcomments.com으로 라우팅합니다:

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

키 케이싱에 대한 참고

Hugo는 hugo.toml과 프런트매터의 모든 키를 소문자로 변환하지만, FastComments 위젯은 camelCase 키(tenantId, hasDarkBackground)를 요구합니다. 이 컴포넌트는 알려진 최상위 옵션에 대해서는 자동으로 올바른 대/소문자를 복원하므로, 옵션을 일반적인 camelCase 형태로 작성하세요. 객체 값 내부에 중첩된 키(예: translations 맵의 키 또는 pageReactConfig의 필드)는 복원되지 않습니다. 이러한 항목들은 대신 FastComments 대시보드의 커스터마이제이션 UI에서 구성하세요.

위젯 옵션 전체 목록은 FastComments 커스터마이제이션 문서를 참조하세요. 두 위젯은 기본값이 없는 필수 옵션을 필요로 합니다:

• fastcomments-collab-chat 및 fastcomments-image-chat는 연결할 요소의 CSS 선택자인 target을 필요로 합니다.
• fastcomments-user-activity-feed는 userId가 필요합니다.

• FastComments 문서
• 사용자 지정 및 구성
• Hugo 문서

이 컴포넌트들은 우리의 핵심 VanillaJS 위젯의 가벼운 래퍼입니다. 우리는 이 저장소를 배포하지 않고도 해당 위젯들을 업데이트(버그 수정, 기능 추가)할 수 있으므로, 조용한 릴리스 히스토리가 FastComments가 활동을 멈췄다는 뜻은 아닙니다. 업데이트는 우리 블로그를 확인하세요. 기반 위젯에 대한 비호환성 변경 사항은 여기에서 버전 업과 함께 배포됩니다.