Add Comments to Your Eleventy (11ty) Site

Para ver cada shortcode y flujo ejecutándose localmente contra el tenant público demo, clona el repositorio y ejecuta:

cd example
npm install
npm start

Cada componente tiene su propia página bajo example/src/pages/ que puedes copiar directamente en tu propio sitio Eleventy.

npm install fastcomments-11ty

Registra el plugin en la configuración de Eleventy (.eleventy.js o eleventy.config.js):

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

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

O con ESM:

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

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

Luego usa los shortcodes en tus plantillas. En Nunjucks (.njk):

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

En Liquid (.liquid):

{% fastcomments tenantId: "demo" %}

Reemplaza "demo" con tu FastComments tenant ID.

Ejemplos

{# Recuento de comentarios en línea con el texto #}
This page has {% fastcommentsCommentCount { tenantId: "demo" } %} comments.

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

{# Chat colaborativo — apuntar a un elemento de contenido mediante selector CSS #}
<article id="post-body">
  <p>Highlight me to leave a comment.</p>
</article>
{% fastcommentsCollabChat { tenantId: "demo", target: "#post-body" } %}

{# Chat de imagen — apuntar a un elemento de imagen mediante selector CSS #}
<img id="hero" src="/hero.jpg" alt="Hero image" />
{% fastcommentsImageChat { tenantId: "demo", target: "#hero" } %}

{# Resumen de reseñas #}
{% fastcommentsReviewsSummary { tenantId: "demo" } %}

{# Feed de actividad del usuario #}
{% fastcommentsUserActivityFeed { tenantId: "demo", userId: "demo:demo-user" } %}

eleventyConfig.addPlugin(fastcommentsPlugin, {
    // Registrar solo un subconjunto de los shortcodes:
    shortcodes: ['fastcomments', 'fastcommentsCommentCount'],
    // Añadir un prefijo a cada nombre de shortcode registrado (p. ej. "fc" -> "fcFastcomments"):
    prefix: 'fc'
});

Cada shortcode también se exporta como una función independiente que devuelve la cadena HTML:

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

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

Se incluye una demo funcional en el directorio example/:

cd example && npm install && npm start

• Documentación de FastComments
• Personalización y Configuración
• Documentación de Eleventy

Estos componentes son envoltorios alrededor de nuestros componentes principales de VanillaJS. Podemos actualizar automáticamente estos componentes (corregir errores, agregar funciones) sin publicar esta biblioteca, así que aunque puede que no se publique durante un tiempo, eso no significa que FastComments no esté en desarrollo activo. No dude en consultar nuestro blog para actualizaciones. Los cambios incompatibles de la API o las nuevas funciones nunca se incorporarán a la biblioteca subyacente sin un aumento de versión en esta biblioteca.