Προσθέστε σχόλια στον ιστότοπό σας Eleventy (11ty)

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

cd example
npm install
npm start

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

npm install fastcomments-11ty

Καταχωρήστε το πρόσθετο στη ρύθμιση του 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/ περιλαμβάνεται ένα λειτουργικό demo:

cd example && npm install && npm start

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

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