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 テナント 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'],
    // 登録される各ショートコード名にプレフィックスを追加します（例: "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変更や機能は、このライブラリでバージョンを上げない限り基盤となるコアライブラリへは決して反映されません。