Add Comments to Your Eleventy (11ty) Site

Da biste vidjeli svaki shortcode i flow koji se izvode lokalno protiv javnog demo tenant, klonirajte repozitorij i pokrenite:

cd example
npm install
npm start

Svaka komponenta ima svoju stranicu pod example/src/pages/ koju možete kopirati izravno u vlastiti Eleventy site.

npm install fastcomments-11ty

Registrirajte dodatak u svojoj Eleventy konfiguraciji (.eleventy.js ili eleventy.config.js):

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

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

Ili s ESM:

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

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

Zatim upotrijebite shortcode-ove u svojim predlošcima. U Nunjucks (.njk):

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

U Liquid (.liquid):

{% fastcomments tenantId: "demo" %}

Zamijenite "demo" svojim FastComments tenant ID-jem.

Primjeri

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

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

{# Surađivački chat — ciljate 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 — ciljanje elementa 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, {
    // Registriraj samo podskup shortcode-ova:
    shortcodes: ['fastcomments', 'fastcommentsCommentCount'],
    // Dodaj prefiks svakom registriranom imenu shortcode-a (npr. "fc" -> "fcFastcomments"):
    prefix: 'fc'
});

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

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

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

U direktoriju example/ nalazi se funkcionalni demo:

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 značajke) bez objavljivanja ove biblioteke, pa iako možda neće biti objavljena neko vrijeme, to ne znači da FastComments nije u aktivnom razvoju! Slobodno provjerite naš blog za ažuriranja. Promjene API-ja koje narušavaju kompatibilnost ili značajke nikada neće biti isporučene u osnovnu biblioteku bez povećanja verzije u ovoj biblioteci.