Add Comments to Your Eleventy (11ty) Site

Um jeden Shortcode und Flow lokal gegen den öffentlichen demo Tenant auszuführen, klonen Sie das Repository und führen Sie:

cd example
npm install
npm start

Jede Komponente hat ihre eigene Seite unter example/src/pages/, die Sie direkt in Ihre eigene Eleventy-Site kopieren können.

npm install fastcomments-11ty

Registrieren Sie das Plugin in Ihrer Eleventy-Konfiguration (.eleventy.js oder eleventy.config.js):

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

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

Oder mit ESM:

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

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

Verwenden Sie dann die Shortcodes in Ihren Templates. In Nunjucks (.njk):

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

In Liquid (.liquid):

{% fastcomments tenantId: "demo" %}

Ersetzen Sie "demo" durch Ihre FastComments Tenant-ID.

Beispiele

{# Kommentaranzahl inline im Text #}
This page has {% fastcommentsCommentCount { tenantId: "demo" } %} comments.

{# Live-Chat #}
{% fastcommentsLiveChat { tenantId: "demo" } %}

{# Collab-Chat — ein Inhaltselement mit einem CSS-Selektor anvisieren #}
<article id="post-body">
  <p>Highlight me to leave a comment.</p>
</article>
{% fastcommentsCollabChat { tenantId: "demo", target: "#post-body" } %}

{# Image-Chat — ein Bildelement mit einem CSS-Selektor anvisieren #}
<img id="hero" src="/hero.jpg" alt="Hero image" />
{% fastcommentsImageChat { tenantId: "demo", target: "#hero" } %}

{# Zusammenfassung der Bewertungen #}
{% fastcommentsReviewsSummary { tenantId: "demo" } %}

{# Benutzeraktivitäts-Feed #}
{% fastcommentsUserActivityFeed { tenantId: "demo", userId: "demo:demo-user" } %}

eleventyConfig.addPlugin(fastcommentsPlugin, {
    // Registriere nur eine Teilmenge der Shortcodes:
    shortcodes: ['fastcomments', 'fastcommentsCommentCount'],
    // Füge jedem registrierten Shortcode-Namen ein Präfix hinzu (z. B. "fc" -> "fcFastcomments"):
    prefix: 'fc'
});

Jeder Shortcode wird außerdem als eigenständige Funktion exportiert, die den HTML-String zurückgibt:

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

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

Eine funktionierende Demo ist im Verzeichnis example/ enthalten:

cd example && npm install && npm start

• FastComments Dokumentation
• Anpassung & Konfiguration
• Eleventy Dokumentation

Diese Komponenten sind Wrapper um unsere Kern-VanillaJS-Komponenten. Wir können diese Komponenten automatisch aktualisieren (Fehler beheben, Funktionen hinzufügen), ohne diese Bibliothek zu veröffentlichen, sodass es, auch wenn sie möglicherweise eine Weile nicht veröffentlicht wird, nicht bedeutet, dass FastComments nicht aktiv weiterentwickelt wird! Schau gern in unserem Blog nach Updates. Breaking-API-Änderungen oder -Funktionen werden niemals in die zugrunde liegende Kernbibliothek übernommen, ohne dass die Versionsnummer dieser Bibliothek erhöht wird.