Add Comments to Your Eleventy (11ty) Site

Да бисте видели све шорткодове и фловове који се покрећу локално против јавног demo тенанта, клонирајте репозиторијум и покрените:

cd example
npm install
npm start

Свака компонента има своју страницу у example/src/pages/ коју можете директно копирати у ваш сопствени Eleventy сајт.

npm install fastcomments-11ty

Registrujte dodatak u vašoj Eleventy konfiguraciji (.eleventy.js ili eleventy.config.js):

const { fastcommentsPlugin } = require('fastcomments-11ty');

module.exports = function(eleventyConfig) {
    eleventyConfig.addPlugin(fastcommentsPlugin);
};

Ili sa ESM:

import { fastcommentsPlugin } from 'fastcomments-11ty';

export default function(eleventyConfig) {
    eleventyConfig.addPlugin(fastcommentsPlugin);
}

Zatim koristite shortcode-ove u vašim šablonima. U Nunjucks (.njk):

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

U Liquid (.liquid):

{% fastcomments tenantId: "demo" %}

Zamenite "demo" svojim FastComments tenant ID-jem.

Примери

{# Број коментара у линији уз текст #}
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-ја које ремете уназадну компатибилност или нове функције никада неће бити уграђене у основну библиотеку без повећања верзије у овој библиотеци.