Add Comments to Your Eleventy (11ty) Site

Če želite videti vse shortcode in flow, ki tečejo lokalno proti javnemu najemniku demo, klonirajte repozitorij in zaženite:

cd example
npm install
npm start

Vsaka komponenta ima svojo stran v example/src/pages/, ki jo lahko neposredno kopirate v svojo Eleventy spletno stran.

npm install fastcomments-11ty

Registrirajte vtičnik v vaši Eleventy konfiguraciji (.eleventy.js ali eleventy.config.js):

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

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

Ali z ESM:

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

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

Nato uporabite kratke kode v svojih predlogah. V Nunjucks (.njk):

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

V Liquid (.liquid):

{% fastcomments tenantId: "demo" %}

Zamenjajte "demo" z ID-jem vašega FastComments najemnika.

Primeri

{# Število komentarjev v vrstici z besedilom #}
This page has {% fastcommentsCommentCount { tenantId: "demo" } %} comments.

{# Klepet v živo #}
{% fastcommentsLiveChat { tenantId: "demo" } %}

{# Sodelovalni klepet — ciljanje elementa vsebine s CSS selektorjem #}
<article id="post-body">
  <p>Highlight me to leave a comment.</p>
</article>
{% fastcommentsCollabChat { tenantId: "demo", target: "#post-body" } %}

{# Klepet za slike — ciljanje elementa slike s CSS selektorjem #}
<img id="hero" src="/hero.jpg" alt="Hero image" />
{% fastcommentsImageChat { tenantId: "demo", target: "#hero" } %}

{# Povzetek ocen #}
{% fastcommentsReviewsSummary { tenantId: "demo" } %}

{# Vir aktivnosti uporabnika #}
{% fastcommentsUserActivityFeed { tenantId: "demo", userId: "demo:demo-user" } %}

eleventyConfig.addPlugin(fastcommentsPlugin, {
    // Registrirajte le podmnožico shortcodov:
    shortcodes: ['fastcomments', 'fastcommentsCommentCount'],
    // Dodajte predpono vsakemu registriranemu imenu shortcoda (npr. "fc" -> "fcFastcomments"):
    prefix: 'fc'
});

Vsaka kratka koda je prav tako izvožena kot samostojna funkcija, ki vrne HTML-niz:

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

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

V mapi example/ je vključen delujoč primer:

cd example && npm install && npm start

• Dokumentacija FastComments
• Prilagajanje in konfiguracija
• Dokumentacija Eleventy

Te komponente so ovojnice okoli naših osnovnih komponent VanillaJS. Te komponente lahko samodejno posodobimo (odpravimo napake, dodamo funkcije) brez objave te knjižnice, zato to, da morda nekaj časa ne bo objavljena, ne pomeni, da FastComments ni v aktivnem razvoju! Za posodobitve si lahko ogledate naš blog. Prelomne spremembe API-ja ali nove funkcije nikoli ne bodo vključene v osnovno jedrno knjižnico brez dviga različice te knjižnice.