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 變更或新功能絕不會被推送到底層核心函式庫。