Add Comments to Your Eleventy (11ty) Site

Aby zobaczyć wszystkie shortcode'y i przepływy uruchamiane lokalnie przeciwko publicznemu tenantowi demo, sklonuj repozytorium i uruchom:

cd example
npm install
npm start

Każdy komponent ma własną stronę w katalogu example/src/pages/, którą możesz skopiować bezpośrednio do swojej witryny Eleventy.

npm install fastcomments-11ty

Zarejestruj wtyczkę w konfiguracji Eleventy (.eleventy.js lub eleventy.config.js):

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

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

Or with ESM:

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

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

Then use the shortcodes in your templates. In Nunjucks (.njk):

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

In Liquid (.liquid):

{% fastcomments tenantId: "demo" %}

Replace "demo" with your FastComments tenant ID.

Przykłady

{# Liczba komentarzy w tekście #}
This page has {% fastcommentsCommentCount { tenantId: "demo" } %} comments.

{# Czat na żywo #}
{% fastcommentsLiveChat { tenantId: "demo" } %}

{# Collab chat — skieruj do elementu treści za pomocą selektora CSS #}
<article id="post-body">
  <p>Highlight me to leave a comment.</p>
</article>
{% fastcommentsCollabChat { tenantId: "demo", target: "#post-body" } %}

{# Image chat — skieruj do elementu obrazu za pomocą selektora CSS #}
<img id="hero" src="/hero.jpg" alt="Hero image" />
{% fastcommentsImageChat { tenantId: "demo", target: "#hero" } %}

{# Podsumowanie recenzji #}
{% fastcommentsReviewsSummary { tenantId: "demo" } %}

{# Kanał aktywności użytkownika #}
{% fastcommentsUserActivityFeed { tenantId: "demo", userId: "demo:demo-user" } %}

eleventyConfig.addPlugin(fastcommentsPlugin, {
    // Zarejestruj tylko podzbiór shortcodów:
    shortcodes: ['fastcomments', 'fastcommentsCommentCount'],
    // Dodaj prefiks do każdej zarejestrowanej nazwy shortcode'a (np. "fc" -> "fcFastcomments"):
    prefix: 'fc'
});

Każdy shortcode jest również eksportowany jako samodzielna funkcja, która zwraca łańcuch HTML:

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

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

Działające demo znajduje się w katalogu example/:

cd example && npm install && npm start

• Dokumentacja FastComments
• Dostosowywanie i konfiguracja
• Dokumentacja Eleventy

Te komponenty są opakowaniami wokół naszych podstawowych komponentów VanillaJS. Możemy automatycznie aktualizować te komponenty (naprawiać błędy, dodawać funkcje) bez publikowania tej biblioteki, więc choć może nie być ona publikowana przez pewien czas, nie oznacza to, że FastComments nie jest aktywnie rozwijany! Zachęcamy do sprawdzania naszego bloga w poszukiwaniu aktualizacji. Zmiany łamiące API lub nowe funkcje nigdy nie zostaną wprowadzone do bazowej biblioteki rdzeniowej bez podniesienia wersji tej biblioteki.