Add Comments to Your Eleventy (11ty) Site

Om elke shortcode en flow lokaal te zien draaien tegen de openbare demo tenant, kloon je de repo en voer je het volgende uit:

cd example
npm install
npm start

Elk component heeft een eigen pagina onder example/src/pages/ die je rechtstreeks kunt kopiëren naar je eigen Eleventy-site.

npm install fastcomments-11ty

Registreer de plugin in je Eleventy-config (.eleventy.js of eleventy.config.js):

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

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

Of met ESM:

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

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

Gebruik daarna de shortcodes in je templates. In Nunjucks (.njk):

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

In Liquid (.liquid):

{% fastcomments tenantId: "demo" %}

Vervang "demo" door je FastComments tenant-ID.

Voorbeelden

{# Reactieaantal inline met tekst #}
This page has {% fastcommentsCommentCount { tenantId: "demo" } %} comments.

{# Livechat #}
{% fastcommentsLiveChat { tenantId: "demo" } %}

{# Collab chat — wijs een contentelement aan met een CSS-selector #}
<article id="post-body">
  <p>Highlight me to leave a comment.</p>
</article>
{% fastcommentsCollabChat { tenantId: "demo", target: "#post-body" } %}

{# Image chat — wijs een afbeeldingselement aan met een CSS-selector #}
<img id="hero" src="/hero.jpg" alt="Hero image" />
{% fastcommentsImageChat { tenantId: "demo", target: "#hero" } %}

{# Samenvatting van beoordelingen #}
{% fastcommentsReviewsSummary { tenantId: "demo" } %}

{# Gebruikersactiviteitenfeed #}
{% fastcommentsUserActivityFeed { tenantId: "demo", userId: "demo:demo-user" } %}

eleventyConfig.addPlugin(fastcommentsPlugin, {
    // Registreer alleen een deel van de shortcodes:
    shortcodes: ['fastcomments', 'fastcommentsCommentCount'],
    // Voeg een voorvoegsel toe aan elke geregistreerde shortcode-naam (bijv. "fc" -> "fcFastcomments"):
    prefix: 'fc'
});

Elke shortcode wordt ook geëxporteerd als een op zichzelf staande functie die de HTML-string retourneert:

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

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

Een werkende demo is opgenomen in de map example/:

cd example && npm install && npm start

• FastComments-documentatie
• Aanpassing & Configuratie
• Eleventy-documentatie

Deze componenten zijn wrappers rond onze core VanillaJS-componenten. We kunnen deze componenten automatisch bijwerken (bugs oplossen, functies toevoegen) zonder deze bibliotheek te publiceren, dus hoewel het misschien een tijdje niet gepubliceerd wordt, betekent dat niet dat FastComments niet actief in ontwikkeling is! Bekijk gerust onze blog voor updates. Compatibiliteitsbrekende API-wijzigingen of -functies zullen nooit naar de onderliggende core-bibliotheek worden geleverd zonder een versieverhoging in deze bibliotheek.