Ajouter des commentaires à votre site Hugo

Pour voir chaque shortcode et le partial de thème s'exécuter localement contre le tenant 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 possède sa propre page sous exampleSite/content/ que vous pouvez copier directement dans votre propre site.

Choisissez l'une des deux méthodes standard pour 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   # uniquement si votre site n'est pas déjà un module
hugo mod get github.com/FastComments/fastcomments-hugo

Ajoutez ensuite l'import dans 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

Référencez-le ensuite depuis votre hugo.toml. Listez-le aux côtés de votre propre thème ; les entrées suivantes ont priorité, donc placez votre thème en premier :

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

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

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

Ensuite, soit intégrez le widget de commentaires dans 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 sur 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 >}}

Flux d'activité utilisateur :

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

Pour ajouter des commentaires à chaque article, comme le fait le support Disqus intégré de 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 lorsqu'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 en même temps (un index de blog, une liste de section), utilisez le widget de comptage en masse. Il récupère le nombre de commentaires pour chaque élément de 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 lorsqu'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 pour chaque page dans le front matter sous [fastcomments]. Priorité, du plus bas au plus élevé : paramètres du site, front matter de la page, paramètres du shortcode.

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

Lorsqu'aucun des url ou urlId n'est fourni, url prend par défaut le permalink 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 de premier niveau connue, donc écrivez les options dans leur forme camelCase habituelle. 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, consultez la documentation de personnalisation FastComments. Deux widgets prennent 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 de Hugo

Ces composants sont de légères surcouches autour de nos widgets VanillaJS principaux. Nous pouvons mettre à jour ces widgets (corriger des bugs, ajouter des fonctionnalités) sans publier ce dépôt, donc un historique de versions discret 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 mise à jour de version.