Add Comments to Your Eleventy (11ty) Site

For at se hver shortcode og flow køre lokalt imod den offentlige demo tenant, klon repoet og kør:

cd example
npm install
npm start

Hver komponent har sin egen side under example/src/pages/, som du kan kopiere direkte ind i dit eget Eleventy-site.

npm install fastcomments-11ty

Registrer plugin'et i din Eleventy-konfiguration (.eleventy.js eller eleventy.config.js):

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

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

Eller med ESM:

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

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

Brug derefter shortcodes i dine skabeloner. I Nunjucks (.njk):

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

I Liquid (.liquid):

{% fastcomments tenantId: "demo" %}

Erstat "demo" med dit FastComments tenant ID.

Eksempler

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

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

{# Samarbejdschat — mål et indholdselement med en CSS-selektor #}
<article id="post-body">
  <p>Highlight me to leave a comment.</p>
</article>
{% fastcommentsCollabChat { tenantId: "demo", target: "#post-body" } %}

{# Billedchat — mål et billedelement med en CSS-selektor #}
<img id="hero" src="/hero.jpg" alt="Hero image" />
{% fastcommentsImageChat { tenantId: "demo", target: "#hero" } %}

{# Oversigt over anmeldelser #}
{% fastcommentsReviewsSummary { tenantId: "demo" } %}

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

eleventyConfig.addPlugin(fastcommentsPlugin, {
    // Registrer kun en delmængde af shortcodes:
    shortcodes: ['fastcomments', 'fastcommentsCommentCount'],
    // Tilføj et præfiks til hvert registreret shortcode-navn (f.eks. "fc" -> "fcFastcomments"):
    prefix: 'fc'
});

Hver shortcode eksporteres også som en selvstændig funktion, der returnerer HTML-strengen:

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

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

En fungerende demo er inkluderet i example/-mappen:

cd example && npm install && npm start

• FastComments Dokumentation
• Tilpasning & Konfiguration
• Eleventy Dokumentation

Disse komponenter er wrappers omkring vores kerne VanillaJS-komponenter. Vi kan automatisk opdatere disse komponenter (rette fejl, tilføje funktioner) uden at udgive dette bibliotek, så selvom det måske ikke bliver udgivet i et stykke tid, betyder det ikke, at FastComments ikke er under aktiv udvikling! Du er velkommen til at tjekke vores blog for opdateringer. Kompatibilitetsbrydende API-ændringer eller funktioner vil aldrig blive sendt til det underliggende kernebibliotek uden en versionsstigning i dette bibliotek.