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

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

Svaki shortcode je такође извезен као самостална функција која враћа 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-ја које крше компатибилност или нове функције никада неће бити испоручене у основну библиотеку без повећања верзије у овој библиотеци.