Add Comments to Your Eleventy (11ty) Site

כדי לראות כל shortcode ו-flow שרצים באופן מקומי מול הטננט הציבורי demo, שכפל את המאגר והרץ:

cd example
npm install
npm start

לכל רכיב יש עמוד משלו תחת 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);
}

לאחר מכן השתמש בקיצורי-הקוד בתבניות שלך. ב-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

רכיבים אלה הם עטיפות סביב רכיבי ה-VanillaJS הליבה שלנו. אנחנו יכולים לעדכן אוטומטית את הרכיבים האלה (לתקן באגים, להוסיף תכונות) מבלי לפרסם את הספרייה הזו, כך שלמרות שייתכן שהיא לא תפורסם לעת עתה, זה לא אומר ש-FastComments אינה בפיתוח פעיל! אל תהססו לבדוק את הבלוג שלנו לעדכונים. שינויים מפירי תאימות ב-API או תכונות לא יישולבו לעולם בספריית הליבה הזו מבלי העלאת גרסה בספרייה זו.