Tilføj kommentarer til dit Hugo-site

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-widgetindstillinger indstilles under [params.fastcomments] i hugo.toml, og kan overskrives per side i front matter under [fastcomments]. Prioritet, lavest til højest: site params, page front matter, shortcode-parameter.

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

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

EU data residency

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

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

Bemærkning om nøglers store/små bogstaver

Hugo konverterer alle nøgler til små bogstaver i hugo.toml og front matter, men FastComments-widgets kræver camelCase-nøgler (tenantId, hasDarkBackground). Denne komponent gendanner automatisk den korrekte kapitalisering for hver kendt øverste niveau-indstilling, så skriv indstillinger i deres normale camelCase-form. Nøgler indlejret i en objektværdi (for eksempel nøglerne i et translations-map, eller felter i pageReactConfig) gendannes ikke. Konfigurer disse i stedet via tilpasningsbrugerfladen i FastComments-dashboardet.

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.