Add Comments to Your Eleventy (11ty) Site

要在本地查看针对公共 demo 租户运行的所有 shortcode 和 flow，请克隆该仓库并运行：

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 更改或新功能绝不会被合并到底层核心库中。