Add Comments to Your Eleventy (11ty) Site

Pour voir chaque shortcode 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 possède 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 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);
}

Ensuite, utilisez les shortcodes dans vos modèles. 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, {
    // N'enregistrer qu'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 à jour automatiquement ces composants (corriger des bogues, 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 blogue pour les mises à jour. Les modifications incompatibles de l'API ou les nouvelles fonctionnalités ne seront jamais intégrées à la bibliothèque principale sous-jacente sans une modification du numéro de version dans cette bibliothèque.