Add Comments to Your Eleventy (11ty) Site

Για να δείτε κάθε shortcode και flow να τρέχουν τοπικά ενάντια στον δημόσιο tenant demo, κλωνοποιήστε το αποθετήριο και τρέξτε:

cd example
npm install
npm start

Κάθε component έχει τη δική του σελίδα κάτω από example/src/pages/ την οποία μπορείτε να αντιγράψετε απευθείας στην δική σας ιστοσελίδα Eleventy.

npm install fastcomments-11ty

Καταχωρήστε το plugin στο αρχείο ρυθμίσεων του Eleventy (.eleventy.js ή eleventy.config.js):

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

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

Ή με ESM:

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

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

Έπειτα χρησιμοποιήστε τα shortcodes στα πρότυπά σας. Στο Nunjucks (.njk):

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

Στο Liquid (.liquid):

{% fastcomments tenantId: "demo" %}

Αντικαταστήστε το "demo" με το tenant ID σας στο FastComments.

Παραδείγματα

{# Πλήθος σχολίων εντός του κειμένου #}
This page has {% fastcommentsCommentCount { tenantId: "demo" } %} comments.

{# Ζωντανή συνομιλία #}
{% fastcommentsLiveChat { tenantId: "demo" } %}

{# Συνεργατική συνομιλία — στοχεύστε ένα στοιχείο περιεχομένου χρησιμοποιώντας επιλογέα CSS #}
<article id="post-body">
  <p>Highlight me to leave a comment.</p>
</article>
{% fastcommentsCollabChat { tenantId: "demo", target: "#post-body" } %}

{# Συνομιλία εικόνας — στοχεύστε ένα στοιχείο εικόνας με επιλογέα CSS #}
<img id="hero" src="/hero.jpg" alt="Hero image" />
{% fastcommentsImageChat { tenantId: "demo", target: "#hero" } %}

{# Σύνοψη αξιολογήσεων #}
{% fastcommentsReviewsSummary { tenantId: "demo" } %}

{# Ροή δραστηριότητας χρήστη #}
{% 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

• Τεκμηρίωση FastComments
• Προσαρμογή & Διαμόρφωση
• Τεκμηρίωση Eleventy

Αυτά τα components είναι wrappers γύρω από τα core VanillaJS components. Μπορούμε να ενημερώνουμε αυτόματα αυτά τα components (διόρθωση σφαλμάτων, προσθήκη δυνατοτήτων) χωρίς να δημοσιεύσουμε αυτή τη βιβλιοθήκη, οπότε, παρόλο που μπορεί να μην δημοσιευτεί για κάποιο διάστημα, αυτό δεν σημαίνει ότι το FastComments δεν βρίσκεται σε ενεργή ανάπτυξη! Μη διστάσετε να επισκεφθείτε το blog μας για ενημερώσεις. Αλλαγές που σπάνε το API ή νέες λειτουργίες δεν θα προωθηθούν ποτέ στην υποκείμενη βασική βιβλιοθήκη χωρίς αύξηση έκδοσης σε αυτή τη βιβλιοθήκη.