Add Comments to Your Eleventy (11ty) Site

Herkese açık demo kiracına karşı yerel olarak çalışan tüm shortcode'ları ve akışları görmek için depoyu klonlayın ve şu komutları çalıştırın:

cd example
npm install
npm start

Her bileşenin example/src/pages/ altında kendi sayfası vardır; bunları doğrudan kendi Eleventy sitenize kopyalayabilirsiniz.

npm install fastcomments-11ty

Eklentiyi Eleventy yapılandırmanıza (.eleventy.js veya eleventy.config.js) kaydedin:

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

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

Veya ESM ile:

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

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

Daha sonra şablonlarınızda kısa kodları kullanın. Nunjucks (.njk) içinde:

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

Liquid (.liquid) içinde:

{% fastcomments tenantId: "demo" %}

"demo"'yu FastComments tenant ID'niz ile değiştirin.

Örnekler

{# Metin içinde yorum sayısı #}
This page has {% fastcommentsCommentCount { tenantId: "demo" } %} comments.

{# Canlı sohbet #}
{% fastcommentsLiveChat { tenantId: "demo" } %}

{# İşbirlikçi sohbet — bir içerik öğesini CSS seçiciyle hedefleyin #}
<article id="post-body">
  <p>Highlight me to leave a comment.</p>
</article>
{% fastcommentsCollabChat { tenantId: "demo", target: "#post-body" } %}

{# Görüntü sohbeti — bir resim öğesini CSS seçiciyle hedefleyin #}
<img id="hero" src="/hero.jpg" alt="Hero image" />
{% fastcommentsImageChat { tenantId: "demo", target: "#hero" } %}

{# İncelemeler özeti #}
{% fastcommentsReviewsSummary { tenantId: "demo" } %}

{# Kullanıcı etkinlik akışı #}
{% fastcommentsUserActivityFeed { tenantId: "demo", userId: "demo:demo-user" } %}

eleventyConfig.addPlugin(fastcommentsPlugin, {
    // Kısa kodların yalnızca bir alt kümesini kaydet:
    shortcodes: ['fastcomments', 'fastcommentsCommentCount'],
    // Kayıtlı her kısa kod adına bir önek ekle (ör. "fc" -> "fcFastcomments"):
    prefix: 'fc'
});

Her kısa kod ayrıca HTML dizesini döndüren bağımsız bir fonksiyon olarak dışa aktarılır:

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

eleventyConfig.addShortcode('comments', fastcomments);
eleventyConfig.addShortcode('commentCount', commentCount);

Çalışır durumda bir demo example/ dizinine dahil edilmiştir:

cd example && npm install && npm start

• FastComments Dokümantasyonu
• Özelleştirme ve Yapılandırma
• Eleventy Dokümantasyonu

Bu bileşenler, çekirdek VanillaJS bileşenlerimizin etrafına sarılmış sarmalayıcılardır. Bu bileşenleri (hataları düzeltme, özellik ekleme) bu kütüphaneyi yayımlamadan otomatik olarak güncelleyebiliriz; dolayısıyla bir süre yayımlanmamış olması, FastComments'in aktif geliştirme altında olmadığı anlamına gelmez! Güncellemeler için blogumuzu kontrol etmeyi unutmayın. Kırıcı API değişiklikleri veya özellikler, bu kütüphanede sürüm artırımı yapılmadan altyapıdaki çekirdek kütüphaneye asla gönderilmeyecektir.