Add Comments to Your Eleventy (11ty) Site

Да бисте видели сваки shortcode и flow који раде локално против јавног demo тенанта, клонирајте репозиторијум и покрените:

cd example
npm install
npm start

Свака компонента има своју страницу у example/src/pages/ коју можете директно копирати у свој Eleventy сајт.

npm install fastcomments-11ty

Registrujte plugin 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 shortcodes u vašim predlošcima. U Nunjucks (.njk):

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

U Liquid (.liquid):

{% fastcomments tenantId: "demo" %}

Zamijenite "demo" sa vašim FastComments tenant ID.

Primjeri

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

{# Live chat #}
{% fastcommentsLiveChat { tenantId: "demo" } %}

{# Collab 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" } %}

{# Image chat — 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, {
    // Региструј само подскуп shortcodes-а:
    shortcodes: ['fastcomments', 'fastcommentsCommentCount'],
    // Додај префикс сваком регистрованом имену shortcode-а (нпр. "fc" -> "fcFastcomments"):
    prefix: 'fc'
});

Сваки shortcode је такође извезен као самостална функција која враћа HTML низ:

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

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

Радна демонстрација је укључена у директоријум example/:

cd example && npm install && npm start

• Dokumentacija FastComments
• Prilagođavanje i konfiguracija
• Dokumentacija Eleventy

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 vrijeme, to ne znači da FastComments nije pod aktivnim razvojem! Slobodno provjerite naš blog za ažuriranja. Promjene API-ja koje remete kompatibilnost ili nove funkcije nikada neće biti isporučene u osnovnu biblioteku bez povećanja verzije u ovoj biblioteci.