Add Comments to Your Eleventy (11ty) Site

Per vedere ogni shortcode e flow in esecuzione localmente contro il tenant pubblico demo, clona il repo ed esegui:

cd example
npm install
npm start

Ogni componente ha la propria pagina sotto example/src/pages/ che puoi copiare direttamente nel tuo sito Eleventy.

npm install fastcomments-11ty

Registra il plugin nella configurazione di Eleventy (.eleventy.js o eleventy.config.js):

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

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

Oppure con ESM:

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

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

Poi usa gli shortcode nei tuoi template. In Nunjucks (.njk):

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

In Liquid (.liquid):

{% fastcomments tenantId: "demo" %}

Sostituisci "demo" con il tuo tenant ID di FastComments.

Esempi

{# Conteggio dei commenti inline nel testo #}
This page has {% fastcommentsCommentCount { tenantId: "demo" } %} comments.

{# Chat live #}
{% fastcommentsLiveChat { tenantId: "demo" } %}

{# Chat collaborativa — seleziona un elemento di contenuto tramite selettore CSS #}
<article id="post-body">
  <p>Highlight me to leave a comment.</p>
</article>
{% fastcommentsCollabChat { tenantId: "demo", target: "#post-body" } %}

{# Chat immagine — seleziona un elemento immagine tramite selettore CSS #}
<img id="hero" src="/hero.jpg" alt="Hero image" />
{% fastcommentsImageChat { tenantId: "demo", target: "#hero" } %}

{# Riepilogo recensioni #}
{% fastcommentsReviewsSummary { tenantId: "demo" } %}

{# Feed attività utente #}
{% fastcommentsUserActivityFeed { tenantId: "demo", userId: "demo:demo-user" } %}

eleventyConfig.addPlugin(fastcommentsPlugin, {
    // Registra solo un sottoinsieme degli shortcodes:
    shortcodes: ['fastcomments', 'fastcommentsCommentCount'],
    // Aggiungi un prefisso a ogni nome di shortcode registrato (es. "fc" -> "fcFastcomments"):
    prefix: 'fc'
});

Ogni shortcode è anche esportato come funzione autonoma che restituisce la stringa HTML:

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

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

Una demo funzionante è inclusa nella directory example/:

cd example && npm install && npm start

• Documentazione FastComments
• Personalizzazione e Configurazione
• Documentazione Eleventy

Questi componenti sono wrapper attorno ai nostri componenti core VanillaJS. Possiamo aggiornare automaticamente questi componenti (correggere bug, aggiungere funzionalità) senza pubblicare questa libreria, quindi, anche se potrebbe non essere pubblicata per un po', ciò non significa che FastComments non sia in sviluppo attivo! Sentitevi liberi di consultare il nostro blog per gli aggiornamenti. Le modifiche incompatibili dell'API o le nuove funzionalità non verranno mai rilasciate nella libreria core sottostante senza un aumento di versione in questa libreria.