Tilføj kommentarer til dit Hugo-site

Giv din kodeagent den FastComments‑kontekst, den har brug for - widgets, konfiguration, Secure SSO, REST‑API’en og SDK’erne:

npx skills add fastcomments/skills

Fungerer med Claude Code, Codex, Cursor, Copilot, Gemini og alle andre agenter, som skills CLI understøtter.

For at se alle shortcodes og tema-partialen kørende lokalt mod den offentlige demo-tenant, klon repo'et og kør det medfølgende exampleSite:

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

Hver widget har sin egen side under exampleSite/content/, som du kan kopiere direkte ind på dit eget websted.

Vælg en af de to standardmetoder til at tilføje en Hugo-temakomponent.

Valgmulighed A: Hugo-modul (anbefalet)

Fra dit sites rod:

hugo mod init github.com/you/your-site   # kun hvis dit site ikke allerede er et modul
hugo mod get github.com/FastComments/fastcomments-hugo

Tilføj derefter importen til din hugo.toml:

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

Valgmulighed B: Temakomponent (Git-submodul)

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

Referér derefter til det fra din hugo.toml. Angiv det sammen med dit eget tema; senere elementer har forrang, så hold dit tema først:

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

Angiv dit tenant-id én gang i hugo.toml:

[params.fastcomments]
  tenantId = "demo"   # erstat "demo" med dit FastComments tenant-id

Tilslut derefter kommentarfunktionen til dit tema (se Tema-integration), eller indsæt en shortcode i en sides Markdown:

\{{< fastcomments >}}

Eksempler

Kommentarantal inline med tekst:

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

Live chat:

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

Collab chat, målretter et indholdselement med en CSS-selektor:

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

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

Image chat, målretter et billedelement med en CSS-selektor:

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

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

Anmeldelsesoversigt:

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

Brugeraktivitetsfeed:

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

For at vedhæfte kommentarer til hvert indlæg på samme måde som Hugos indbyggede Disqus-understøttelse gør, tilføj én linje til temaets single-skabelon (layouts/_default/single.html):

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

Partialen gengives kun, når en tenantId er konfigureret. Deaktiver kommentarer på en individuel side med front-matter:

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

For at vise en kommentaroptælling ved siden af mange sider på én gang (et blogindeks, en sektionsliste), skal du bruge bulk-antal-widgeten. Den henter alle optællinger på siden i én enkelt anmodning. Der er to dele: en markør ved siden af hvert element, og ét init-opkald efter listen.

I en listeskabelon (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 gengiver <span class="fast-comments-count" data-fast-comments-url-id="..."></span>, og bruger samme identifikator som kommentar-widgeten bruger for den side (dens urlId, eller dens permalink når ingen urlId er sat), så optællingerne stemmer overens med de faktiske tråde. bulk-count.html udsender den enkelte anmodning, der udfylder dem.

Hvis du skriver markørerne selv (for eksempel i en sides Markdown), brug shortcoden til i stedet at udsende init-opkaldet:

<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 >}}

Alle FastComments widget-indstillinger sættes under [params.fastcomments] i hugo.toml, og kan overskrives pr. side i front matter under [fastcomments]. Prioritet, fra lavest til højst: site-parametre, sidens front matter, shortcode-parametre.

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

# en sides front matter
+++
title = "Article"
[fastcomments]
  urlId = "article-42"
  collapseReplies = true
+++

Når hverken url eller urlId er angivet, falder url tilbage til sidens permalink, så kommentartråde forbliver knyttet til en stabil URL.

EU-dataresidens

EU-kunder sætter region = "eu" for at dirigere widgeten til cdn-eu.fastcomments.com:

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

Bemærkning om nøglecasing

Hugo konverterer alle nøgler i hugo.toml og front matter til små bogstaver, men FastComments-widgets kræver camelCase-nøgler (tenantId, hasDarkBackground). Denne komponent gendanner automatisk den korrekte casing for alle kendte topniveau-indstillinger, så du kan skrive indstillingerne i deres normale camelCase-form. Nøgler, der er indlejret i en objektværdi (for eksempel nøglerne i et translations-map eller felterne i pageReactConfig), gendannes ikke. Konfigurér disse via FastComments dashboardets tilpasnings-UI i stedet.

For den fulde liste over widgetindstillinger, se FastComments-tilpasningsdokumentation. To af widgets kræver en påkrævet indstilling, som ikke har en standardværdi:

• fastcomments-collab-chat og fastcomments-image-chat kræver target, en CSS-selector for det element, der skal tilknyttes.
• fastcomments-user-activity-feed kræver userId.

• FastComments-dokumentation
• Tilpasning og konfiguration
• Hugo-dokumentation

Disse komponenter er tynde wrappers omkring vores kerne VanillaJS widgets. Vi kan opdatere disse widgets (rette fejl, tilføje funktioner) uden at udgive dette repository, så en stille udgivelseshistorik ikke betyder, at FastComments er inaktiv. Se vores blog for opdateringer. Kompatibilitetsbrydende ændringer i de underliggende widgets leveres med en versionsopgradering her.