Add Comments to Your Eleventy (11ty) Site

За да видите всеки shortcode и flow, работещ локално срещу публичния demo tenant, клонирайте репото и стартирайте:

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);
}

След това използвайте shortcodes в шаблоните си. В Nunjucks (.njk):

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

В Liquid (.liquid):

{% fastcomments tenantId: "demo" %}

Заменете "demo" с вашия FastComments tenant ID.

Примери

{# Брой коментари в ред с текста #}
This page has {% fastcommentsCommentCount { tenantId: "demo" } %} comments.

{# Чат на живо #}
{% fastcommentsLiveChat { tenantId: "demo" } %}

{# Съвместен чат — насочване към елемент от съдържанието чрез CSS селектор #}
<article id="post-body">
  <p>Маркирайте ме, за да оставите коментар.</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 или нови функции никога няма да бъдат добавяни към основната библиотека без увеличение на версията на тази библиотека.