Kommentare zu Ihrer Hugo-Website hinzufügen

Um jeden Shortcode und das Theme-Partial lokal gegen den öffentlichen demo-Mandanten laufen zu sehen, klonen Sie das Repository und starten Sie die mitgelieferte exampleSite:

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

Jedes Widget hat seine eigene Seite unter exampleSite/content/, die Sie direkt in Ihre eigene Website kopieren können.

Wählen Sie eine der beiden Standardmethoden, um eine Hugo-Theme-Komponente hinzuzufügen.

Option A: Hugo-Modul (empfohlen)

Aus dem Stammverzeichnis Ihrer Website:

hugo mod init github.com/you/your-site   # nur wenn Ihre Website noch kein Modul ist
hugo mod get github.com/FastComments/fastcomments-hugo

Dann fügen Sie den Import zu Ihrer hugo.toml hinzu:

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

Option B: Theme-Komponente (Git-Submodul)

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

Verweisen Sie dann darauf in Ihrer hugo.toml. Listen Sie es zusammen mit Ihrem eigenen Theme auf; spätere Einträge haben Vorrang, daher sollte Ihr Theme zuerst stehen:

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

Legen Sie Ihre Tenant-ID einmal in hugo.toml fest:

[params.fastcomments]
  tenantId = "demo"   # ersetzen Sie "demo" durch Ihre FastComments-Tenant-ID

Dann binden Sie entweder das Kommentar-Widget in Ihr Theme ein (siehe Theme Integration), oder fügen Sie einen Shortcode in das Markdown einer beliebigen Seite ein:

\{{< fastcomments >}}

Beispiele

Kommentaranzahl inline im Text:

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

Live-Chat:

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

Kollaborativer Chat, der ein Inhaltselement per CSS-Selektor anspricht:

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

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

Bild-Chat, der ein Bildelement per CSS-Selektor anspricht:

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

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

Zusammenfassung der Bewertungen:

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

Aktivitäts-Feed eines Benutzers:

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

Um Kommentare an jeden Beitrag anzuhängen, so wie es die eingebaute Disqus-Unterstützung von Hugo macht, fügen Sie Ihrem Theme im Single-Template (layouts/_default/single.html) eine Zeile hinzu:

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

Das Partial wird nur gerendert, wenn eine tenantId konfiguriert ist. Deaktivieren Sie Kommentare auf einer einzelnen Seite mit der Front Matter:

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

Um neben vielen Seiten gleichzeitig die Anzahl der Kommentare anzuzeigen (z. B. in einem Blog-Index oder einer Bereichsliste), verwenden Sie das Bulk-Count-Widget. Es ruft alle Zähler auf der Seite in einer einzigen Anfrage ab. Es besteht aus zwei Teilen: einem Marker neben jedem Eintrag und einem Initialisierungsaufruf nach der Liste.

In einer Listen-Vorlage (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 gibt <span class="fast-comments-count" data-fast-comments-url-id="..."></span> aus und verwendet denselben Identifikator, den das Kommentar-Widget für diese Seite benutzt (sein urlId, oder dessen Permalink, wenn kein urlId gesetzt ist), sodass die Zähler mit den echten Threads übereinstimmen. bulk-count.html sendet die einzelne Anfrage, die diese Werte befüllt.

Wenn Sie die Marker selbst schreiben (z. B. im Markdown einer Seite), verwenden Sie stattdessen den Shortcode, um den Initialisierungsaufruf zu erzeugen:

<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-Optionen werden unter [params.fastcomments] in hugo.toml gesetzt und können pro Seite im Front Matter unter [fastcomments] überschrieben werden. Reihenfolge der Priorität, von niedrig bis hoch: Site-Parameter, Seiten-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
+++

Wenn weder url noch urlId angegeben sind, wird url standardmäßig auf den Permalink der Seite gesetzt, damit Kommentarthreads an eine stabile URL gebunden bleiben.

EU data residency

EU-Kunden setzen region = "eu", um das Widget zu cdn-eu.fastcomments.com zu routen:

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

Hinweis zur Groß-/Kleinschreibung von Schlüsseln

Hugo wandelt jeden Schlüssel in hugo.toml und im Front Matter in Kleinbuchstaben um, aber die FastComments-Widgets erfordern camelCase-Schlüssel (tenantId, hasDarkBackground). Diese Komponente stellt die korrekte Groß-/Kleinschreibung für jede bekannte oberste Option automatisch wieder her, schreiben Sie die Optionen also in ihrer normalen camelCase-Form. Schlüssel, die innerhalb eines Objektwerts verschachtelt sind (zum Beispiel die Schlüssel einer translations-Map oder Felder von pageReactConfig), werden nicht wiederhergestellt. Konfigurieren Sie diese stattdessen über die Anpassungsoberfläche des FastComments-Dashboards.

Für die vollständige Liste der Widget-Optionen siehe die FastComments-Anpassungsdokumentation. Zwei Widgets benötigen eine erforderliche Option, die keinen Standardwert hat:

• fastcomments-collab-chat und fastcomments-image-chat benötigen target, einen CSS-Selektor für das Element, an das sie angehängt werden sollen.
• fastcomments-user-activity-feed benötigt userId.

• FastComments-Dokumentation
• Anpassung & Konfiguration
• Hugo-Dokumentation

Diese Komponenten sind dünne Wrapper um unsere Kern-VanillaJS-Widgets. Wir können diese Widgets (Fehler beheben, Funktionen hinzufügen) aktualisieren, ohne dieses Repository zu veröffentlichen, daher bedeutet eine ruhige Release-Historie nicht, dass FastComments inaktiv ist. Siehe unseren Blog für Updates. Kompatibilitätsbrechende Änderungen an den zugrunde liegenden Widgets werden hier mit einem Versionssprung ausgeliefert.