Add Comments to Your Eleventy (11ty) Site

Da biste videli svaki shortcode i flow koji se pokreću lokalno protiv javnog demo tenanta, klonirajte repozitorijum i pokrenite:

cd example
npm install
npm start

Svaka komponenta ima svoju stranicu u example/src/pages/ koju možete direktno kopirati u svoj Eleventy sajt.

npm install fastcomments-11ty

Registrujte dodatak u vašoj Eleventy konfiguraciji (.eleventy.js ili eleventy.config.js):

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

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

Ili koristeći ESM:

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

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

Zatim koristite shortcode-ove u vašim šablonima. U Nunjucks (.njk):

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

U Liquid (.liquid):

{% fastcomments tenantId: "demo" %}

Zamenite "demo" sa vašim FastComments tenant ID-om.

Primeri

{# Brojač komentara u tekstu #}
This page has {% fastcommentsCommentCount { tenantId: "demo" } %} comments.

{# Ćaskanje uživo #}
{% fastcommentsLiveChat { tenantId: "demo" } %}

{# Kolaborativni chat — ciljajte element sadržaja pomoću CSS selektora #}
<article id="post-body">
  <p>Highlight me to leave a comment.</p>
</article>
{% fastcommentsCollabChat { tenantId: "demo", target: "#post-body" } %}

{# Chat za slike — ciljajte element slike pomoću CSS selektora #}
<img id="hero" src="/hero.jpg" alt="Hero image" />
{% fastcommentsImageChat { tenantId: "demo", target: "#hero" } %}

{# Sažetak recenzija #}
{% fastcommentsReviewsSummary { tenantId: "demo" } %}

{# Feed aktivnosti korisnika #}
{% fastcommentsUserActivityFeed { tenantId: "demo", userId: "demo:demo-user" } %}

eleventyConfig.addPlugin(fastcommentsPlugin, {
    // Registruj samo podskup shortcodes-a:
    shortcodes: ['fastcomments', 'fastcommentsCommentCount'],
    // Dodaj prefiks svakom registrovanom imenu shortcode-a (npr. "fc" -> "fcFastcomments"):
    prefix: 'fc'
});

Svaki shortcode je takođe izvezen kao samostalna funkcija koja vraća HTML string:

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

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

Funkcionalan demo je uključen u direktorijumu example/:

cd example && npm install && npm start

• FastComments dokumentacija
• Prilagođavanje & konfiguracija
• Eleventy dokumentacija

Ove komponente su omotači oko naših osnovnih VanillaJS komponenti. Možemo automatski ažurirati ove komponente (ispraviti greške, dodati funkcionalnosti) bez objavljivanja ove biblioteke, pa iako možda neće biti objavljena neko vreme, to ne znači da FastComments nije u aktivnom razvoju! Slobodno pogledajte naš blog za ažuriranja. Promene API-ja koje narušavaju kompatibilnost ili nove funkcije nikada neće biti isporučene osnovnoj core biblioteci bez promene verzije u ovoj biblioteci.