Ajouter des commentaires à votre site Hugo

Pour voir chaque shortcode et le partial du thème s'exécuter localement contre le locataire public demo, clonez le dépôt et lancez le exampleSite fourni :

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

Chaque widget a sa propre page sous exampleSite/content/ que vous pouvez copier directement dans votre site.

Choisissez l'une des deux façons standard d'ajouter un composant de thème Hugo.

Option A : Module Hugo (recommandé)

Depuis la racine de votre site :

hugo mod init github.com/you/your-site   # seulement si votre site n'est pas déjà un module
hugo mod get github.com/FastComments/fastcomments-hugo

Ensuite, ajoutez l'importation à votre hugo.toml :

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

Option B : Composant de thème (sous-module Git)

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

Ensuite, référencez-le depuis votre hugo.toml. Énumérez-le aux côtés de votre propre thème ; les entrées plus tardives l'emportent, donc gardez votre thème en premier :

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

Définissez votre ID de locataire une fois dans hugo.toml:

[params.fastcomments]
  tenantId = "demo"   # remplacez "demo" par votre ID de locataire FastComments

Ensuite, branchez soit le widget de commentaires à votre thème (voir Intégration du thème), soit insérez un shortcode dans le Markdown de n'importe quelle page :

\{{< fastcomments >}}

Exemples

Nombre de commentaires intégré au texte :

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

Chat en direct :

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

Chat collaboratif, ciblant un élément de contenu par sélecteur CSS :

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

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

Chat d'image, ciblant un élément image par sélecteur CSS :

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

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

Résumé des avis :

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

Fil d'activité par utilisateur :

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

Pour attacher des commentaires à chaque article de la même manière que la prise en charge intégrée de Disqus dans Hugo, ajoutez une ligne au modèle single de votre thème (layouts/_default/single.html) :

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

Le partial ne s'affiche que lorsque un tenantId est configuré. Désactivez les commentaires sur une page individuelle avec le front matter :

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

Pour afficher le nombre de commentaires à côté de plusieurs pages à la fois (un index de blog, une liste de section), utilisez le widget de comptage en masse. Il récupère tous les nombres de commentaires présents sur la page en une seule requête. Il y a deux éléments : un marqueur à côté de chaque élément, et un appel d'initialisation après la liste.

Dans un modèle de liste (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 rend <span class="fast-comments-count" data-fast-comments-url-id="..."></span>, en utilisant le même identifiant que le widget de commentaires utilise pour cette page (son urlId, ou son permalink lorsque aucun urlId n'est défini), afin que les nombres correspondent aux fils réels. bulk-count.html émet la requête unique qui les remplit.

Si vous écrivez vous-même les marqueurs (par exemple dans le Markdown d'une page), utilisez le shortcode pour émettre l'appel d'initialisation à la place :

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

Toutes les options du widget FastComments sont définies sous [params.fastcomments] dans hugo.toml, et peuvent être remplacées par page dans le front matter sous [fastcomments]. Priorité, de la plus basse à la plus élevée : site params, front matter de la page, paramètres du shortcode.

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

# front matter d'une page
+++
title = "Article"
[fastcomments]
  urlId = "article-42"
  collapseReplies = true
+++

Lorsque ni url ni urlId n'est fourni, url prend par défaut le permalien de la page afin que les fils de commentaires restent liés à une URL stable.

Résidence des données dans l'UE

Les clients de l'UE définissent region = "eu" pour acheminer le widget vers cdn-eu.fastcomments.com :

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

Remarque sur la casse des clés

Hugo met en minuscules chaque clé dans hugo.toml et le front matter, mais les widgets FastComments exigent des clés en camelCase (tenantId, hasDarkBackground). Ce composant restaure automatiquement la casse correcte pour chaque option connue de premier niveau, donc écrivez les options dans leur forme camelCase normale. Les clés imbriquées à l'intérieur d'une valeur d'objet (par exemple les clés d'une map translations, ou les champs de pageReactConfig) ne sont pas restaurées. Configurez celles-ci via l'interface de personnalisation du tableau de bord FastComments à la place.

Pour la liste complète des options de widget, voir la documentation de personnalisation de FastComments. Deux widgets nécessitent une option requise qui n'a pas de valeur par défaut :

• fastcomments-collab-chat et fastcomments-image-chat requièrent target, un sélecteur CSS pour l'élément auquel s'attacher.
• fastcomments-user-activity-feed requiert userId.

• Documentation de FastComments
• Personnalisation et configuration
• Documentation Hugo

Ces composants sont de fines couches autour de nos widgets VanillaJS principaux. Nous pouvons mettre à jour ces widgets (corriger des bogues, ajouter des fonctionnalités) sans publier ce dépôt, donc un historique des versions silencieux ne signifie pas que FastComments est inactif. Consultez notre blog pour les mises à jour. Les changements incompatibles apportés aux widgets sous-jacents sont publiés ici accompagnés d'une augmentation de version.