Додайте коментарі до свого сайту Eleventy (11ty)

Щоб побачити кожен шорткод і флоу, які працюють локально проти публічного 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" } %}

{# Collab chat — націлити елемент контенту за допомогою CSS-селектора #}
<article id="post-body">
  <p>Highlight me to leave a comment.</p>
</article>
{% fastcommentsCollabChat { tenantId: "demo", target: "#post-body" } %}

{# Image chat — націлити елемент зображення за допомогою 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, що порушують сумісність, або нові можливості ніколи не будуть включені до базової бібліотеки без підвищення версії цієї бібліотеки.