Add Comments to Your Eleventy (11ty) Site

Чтобы увидеть все шорткоды и потоки, работающие локально с публичным 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);
}

Затем используйте шорткоды в ваших шаблонах. В 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>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: ['fastcomments', 'fastcommentsCommentCount'],
    // Добавить префикс ко всем зарегистрированным именам шорткодов (например, "fc" -> "fcFastcomments"):
    prefix: 'fc'
});

Каждый шорткод также экспортируется как отдельная функция, которая возвращает 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 или новые функции никогда не будут перенесены в базовую библиотеку без повышения версии этой библиотеки.