Voeg reacties toe aan je Hugo-site

Om elke shortcode en de theme partial lokaal te zien draaien tegen de openbare demo-tenant, kloon je de repo en start je de meegeleverde exampleSite:

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

Elke widget heeft zijn eigen pagina onder exampleSite/content/ die je rechtstreeks in je eigen site kunt kopiëren.

Kies een van de twee standaardmanieren om een Hugo-themacomponent toe te voegen.

Optie A: Hugo-module (aanbevolen)

Vanaf de root van je site:

hugo mod init github.com/you/your-site   # alleen als je site nog geen module is
hugo mod get github.com/FastComments/fastcomments-hugo

Voeg vervolgens de import toe aan je hugo.toml:

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

Optie B: Thema-component (Git submodule)

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

Verwijs er vervolgens naar in je hugo.toml. Vermeld het naast je eigen thema; latere vermeldingen winnen, dus houd je thema als eerste:

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

Stel uw tenant ID eenmalig in in hugo.toml:

[params.fastcomments]
  tenantId = "demo"   # vervang "demo" door uw FastComments tenant ID

Verbind daarna ofwel de reacties-widget met uw thema (zie Thema-integratie), of voeg een shortcode toe aan de Markdown van een pagina:

\{{< fastcomments >}}

Voorbeelden

Aantal reacties inline in de tekst:

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

Livechat:

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

Collab chat, een contentelement targeten met een CSS-selector:

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

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

Image chat, een afbeeldings-element targeten met een CSS-selector:

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

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

Samenvatting van beoordelingen:

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

Gebruikersactiviteitenfeed:

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

Om reacties aan elk bericht toe te voegen zoals de ingebouwde Disqus-ondersteuning van Hugo doet, voeg één regel toe aan de single-template van je thema (layouts/_default/single.html):

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

De partial wordt alleen weergegeven wanneer een tenantId is geconfigureerd. Schakel reacties uit op een individuele pagina via de front matter:

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

Om een reactieaantal tegelijk naast meerdere pagina's te tonen (een blogindex, een sectielijst), gebruik je de bulk count widget. Deze haalt elk aantal op de pagina op in één verzoek. Er zijn twee onderdelen: een marker naast elk item, en één init-aanroep na de lijst.

In een lijsttemplate (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 rendert <span class="fast-comments-count" data-fast-comments-url-id="..."></span>, met dezelfde identifier die de comments widget voor die pagina gebruikt (de urlId, of de permalink wanneer er geen urlId is ingesteld), zodat de tellingen overeenkomen met de echte threads. bulk-count.html zendt het enkele verzoek uit dat ze invult.

Als je de markers zelf schrijft (bijvoorbeeld in de Markdown van een pagina), gebruik dan de shortcode om in plaats daarvan de init-aanroep te genereren:

<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-widgetopties worden ingesteld onder [params.fastcomments] in hugo.toml en kunnen per pagina worden overschreven in de front matter onder [fastcomments]. Voorrang, van laagste naar hoogste: site-parameters, pagina-front-matter, shortcode-parameters.

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

Als noch url noch urlId is opgegeven, valt url terug op de permalink van de pagina zodat reactiedraden aan een stabiele URL blijven gekoppeld.

EU gegevensresidentie

EU-klanten stellen region = "eu" in om de widget naar cdn-eu.fastcomments.com te routeren:

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

Opmerking over hoofdlettergebruik van keys

Hugo zet elke sleutel in hugo.toml en de front matter om naar kleine letters, maar de FastComments-widgets vereisen camelCase-sleutels (tenantId, hasDarkBackground). Deze component herstelt automatisch het correcte hoofdlettergebruik voor elke bekende top-leveloptie, dus schrijf opties in hun normale camelCase-vorm. Sleutels genest binnen een objectwaarde (bijvoorbeeld de sleutels van een translations-map, of velden van pageReactConfig) worden niet hersteld. Configureer deze in plaats daarvan via de aanpassings-UI van het FastComments-dashboard.

Voor de volledige lijst met widgetopties, zie de FastComments customisatiedocumentatie. Twee widgets gebruiken een verplichte optie die geen standaardwaarde heeft:

• fastcomments-collab-chat en fastcomments-image-chat vereisen target, een CSS-selector voor het element waaraan het moet worden gekoppeld.
• fastcomments-user-activity-feed vereist userId.

• FastComments Documentatie
• Aanpassingen & Configuratie
• Hugo Documentatie

Deze componenten zijn dunne wrappers rond onze core VanillaJS-widgets.
We kunnen die widgets bijwerken (bugs oplossen, functies toevoegen) zonder deze repository te publiceren, dus een stille releasegeschiedenis betekent niet dat FastComments inactief is.
Bekijk onze blog voor updates.
Brekende wijzigingen aan de onderliggende widgets worden hier uitgebracht met een versienummerverhoging.