Add Comments to Your Eleventy (11ty) Site

Чтобы увидеть все шорткоды и потоки, запускаемые локально против публичного тенанта 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" на ваш 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'],
    // Добавить префикс ко всем зарегистрированным именам шорткодов (e.g. "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 или новые функции никогда не будут внесены в базовую библиотеку без повышения номера версии этой библиотеки.