Add Comments to Your Eleventy (11ty) Site

Pour voir tous les shortcodes et flux s'exécuter localement contre le locataire public demo, clonez le dépôt et exécutez :

cd example
npm install
npm start

Chaque composant a sa propre page sous example/src/pages/ que vous pouvez copier directement dans votre propre site Eleventy.

npm install fastcomments-11ty

Enregistrez le plugin dans votre configuration d'Eleventy (.eleventy.js ou eleventy.config.js):

const { fastcommentsPlugin } = require('fastcomments-11ty');

module.exports = function(eleventyConfig) {
    eleventyConfig.addPlugin(fastcommentsPlugin);
};

Ou avec ESM:

import { fastcommentsPlugin } from 'fastcomments-11ty';

export default function(eleventyConfig) {
    eleventyConfig.addPlugin(fastcommentsPlugin);
}

Puis utilisez les shortcodes dans vos templates. Dans Nunjucks (.njk):

{% fastcomments { tenantId: "demo" } %}

Dans Liquid (.liquid):

{% fastcomments tenantId: "demo" %}

Remplacez "demo" par votre ID de locataire FastComments.

Exemples

{# Nombre de commentaires intégré au texte #}
This page has {% fastcommentsCommentCount { tenantId: "demo" } %} comments.

{# Chat en direct #}
{% fastcommentsLiveChat { tenantId: "demo" } %}

{# Chat collaboratif — cibler un élément de contenu par sélecteur CSS #}
<article id="post-body">
  <p>Highlight me to leave a comment.</p>
</article>
{% fastcommentsCollabChat { tenantId: "demo", target: "#post-body" } %}

{# Chat d'image — cibler un élément image par sélecteur CSS #}
<img id="hero" src="/hero.jpg" alt="Hero image" />
{% fastcommentsImageChat { tenantId: "demo", target: "#hero" } %}

{# Résumé des avis #}
{% fastcommentsReviewsSummary { tenantId: "demo" } %}

{# Fil d'activité utilisateur #}
{% fastcommentsUserActivityFeed { tenantId: "demo", userId: "demo:demo-user" } %}

eleventyConfig.addPlugin(fastcommentsPlugin, {
    // Enregistrer uniquement un sous-ensemble des shortcodes :
    shortcodes: ['fastcomments', 'fastcommentsCommentCount'],
    // Ajouter un préfixe à chaque nom de shortcode enregistré (p. ex. "fc" -> "fcFastcomments") :
    prefix: 'fc'
});

Chaque shortcode est également exporté en tant que fonction autonome qui renvoie la chaîne HTML :

const { fastcomments, commentCount } = require('fastcomments-11ty');

eleventyConfig.addShortcode('comments', fastcomments);
eleventyConfig.addShortcode('commentCount', commentCount);

Une démo fonctionnelle est incluse dans le répertoire example/:

cd example && npm install && npm start

• Documentation de FastComments
• Personnalisation et configuration
• Documentation d'Eleventy

Ces composants sont des wrappers autour de nos composants VanillaJS de base. Nous pouvons mettre automatiquement à jour ces composants (corriger des bugs, ajouter des fonctionnalités) sans publier cette bibliothèque, donc, même si elle peut ne pas être publiée pendant un certain temps, cela ne signifie pas que FastComments n'est pas en développement actif ! N'hésitez pas à consulter notre blog pour les mises à jour. Les changements d'API incompatibles ou les nouvelles fonctionnalités ne seront jamais intégrés à la bibliothèque de base sous-jacente sans une augmentation de version dans cette bibliothèque.