Comment Count Widgets | FastComments Docs

FastComments 提供轻量、独立的评论计数小部件，可显示特定页面或文章的评论数量。这些小部件独立于主评论小部件，旨在在任何希望显示评论计数但不需要完整评论界面的地方使用。

有两种类型的评论计数小部件可用：

Comment Count Widget - 用于显示单个页面的评论数
Bulk Comment Count Widget - 用于在同一页面上高效地显示多个页面的评论数

本文涵盖 VanillaJS 小部件。我们的 React/Angular/etc 库也有各自的小部件。

评论计数小部件旨在显示单个页面的评论数量。它轻量级，如果配置了，可以提供实时更新。

基本安装

Comment Count Widget Installation

Copy

Copy

External Link

<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
<div id="comment-count"></div>
<script>
    window.FastCommentsCommentCount(document.getElementById('comment-count'), {
        tenantId: 'demo'
    });
</script>

配置选项

FastCommentsCommentCount 函数接受以下配置选项：

tenantId（必需）：您的FastComments租户ID
urlId（可选）：页面标识符。如果未指定，默认为 window.location.href
numberOnly（可选）：如果为 true，仅显示数字而不显示文本。默认为 false
isLive（可选）：如果为 true，计数将自动更新。默认为 false

高级示例

自定义URL ID

Comment Count with Custom URL ID

Copy

Copy

External Link

<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
<div id="comment-count-custom"></div>
<script>
    window.FastCommentsCommentCount(document.getElementById('comment-count-custom'), {
        tenantId: 'demo',
        urlId: 'my-custom-page-id'
    });
</script>

仅显示数字

Comment Count Number Only

Copy

Copy

External Link

<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
<div id="comment-count-number"></div>
<script>
    window.FastCommentsCommentCount(document.getElementById('comment-count-number'), {
        tenantId: 'demo',
        numberOnly: true
    });
</script>

实时更新

Live Comment Count Updates

Copy

Copy

External Link

<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
<div id="comment-count-live"></div>
<script>
    window.FastCommentsCommentCount(document.getElementById('comment-count-live'), {
        tenantId: 'demo',
        isLive: true
    });
</script>

小部件方法

小部件返回一个具有以下方法的对象：

destroy()：移除小部件并清理所有计时器
update(config)：使用新配置更新小部件

使用示例

Widget Methods Example

Copy

Copy

External Link

<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
<div id="comment-count-methods"></div>
<script>
    const widget = window.FastCommentsCommentCount(document.getElementById('comment-count-methods'), {
        tenantId: 'demo'
    });
    // Update the widget to show a different page's count
    setTimeout(() => {
        widget.update({
            tenantId: 'demo',
            urlId: 'different-page-id'
        });
    }, 5000);
    // Destroy the widget after 10 seconds
    setTimeout(() => {
        widget.destroy();
    }, 10000);
</script>

样式

小部件呈现包含评论数量的纯HTML，并带有最小的样式。您可以使用CSS自定义外观：

Custom Styling

Copy

Copy

External Link

<style>
    .comment-count-styled {
        background: #f0f0f0;
        padding: 5px 10px;
        border-radius: 15px;
        font-size: 14px;
        color: #666;
        display: inline-block;
    }
</style>
<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
<div id="comment-count-styled" class="comment-count-styled"></div>
<script>
    window.FastCommentsCommentCount(document.getElementById('comment-count-styled'), {
        tenantId: 'demo'
    });
</script>

批量评论计数小部件旨在高效地在同一页面上显示多个页面的评论数量。该小部件不会为每个评论计数进行单独的API调用，而是批量处理请求以获得最佳性能。

基本安装

Bulk Comment Count Widget Installation

Copy

Copy

External Link

<script src="https://cdn.fastcomments.com/js/embed-widget-comment-count-bulk.min.js"></script>
<!-- Multiple elements with comment counts -->
<div class="fast-comments-count" data-fast-comments-url-id="page-1"></div>
<div class="fast-comments-count" data-fast-comments-url-id="page-2"></div>
<div class="fast-comments-count" data-fast-comments-url-id="page-3"></div>
<script>
    window.FastCommentsBulkCountConfig = {
        tenantId: 'demo'
    };
</script>

工作原理

批量小部件的工作方式：

扫描页面中具有 fast-comments-count 类的元素
从每个元素读取 data-fast-comments-url-id 属性
批量处理API请求以高效获取多个评论计数
使用适当的评论计数更新每个元素

配置选项

FastCommentsCommentCountBulk 函数接受以下配置选项：

tenantId（必需）：您的FastComments租户ID
apiHost（可选）：如果您使用自托管实例，则为自定义API主机

实际示例

这是一个实用示例，展示如何在博客文章列表中使用批量小部件：

Blog Post Listing with Comment Counts

Copy

Copy

External Link

<script src="https://cdn.fastcomments.com/js/embed-widget-comment-count-bulk.min.js"></script>
<style>
    .blog-post {
        border: 1px solid #ddd;
        margin: 10px 0;
        padding: 15px;
        border-radius: 5px;
    }
    .post-meta {
        color: #666;
        font-size: 14px;
        margin-top: 10px;
    }
    .comment-count {
        background: #e7f3ff;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        display: inline-block;
    }
</style>
<div class="blog-post">
    <h3>How to Install FastComments</h3>
    <p>Learn how to add FastComments to your website in just a few minutes...</p>
    <div class="post-meta">
        Published: March 15, 2024 |
        <span class="fast-comments-count comment-count" data-fast-comments-url-id="how-to-install-fastcomments"></span>
    </div>
</div>
<div class="blog-post">
    <h3>Advanced FastComments Configuration</h3>
    <p>Dive deep into the advanced configuration options for FastComments...</p>
    <div class="post-meta">
        Published: March 10, 2024 |
        <span class="fast-comments-count comment-count" data-fast-comments-url-id="advanced-fastcomments-config"></span>
    </div>
</div>
<div class="blog-post">
    <h3>FastComments vs Other Solutions</h3>
    <p>See how FastComments compares to other commenting solutions...</p>
    <div class="post-meta">
        Published: March 5, 2024 |
        <span class="fast-comments-count comment-count" data-fast-comments-url-id="fastcomments-comparison"></span>
    </div>
</div>
<script>
    window.FastCommentsBulkCountConfig = {
        tenantId: 'demo'
    };
</script>

性能考虑

批量小部件通过以下方式自动优化性能：

请求批处理：多个评论计数在单个API调用中获取
请求大小限制：如果URL列表变得太长（超过1,000个字符），请求会自动拆分
去重：具有相同 data-fast-comments-url-id 的多个元素共享相同的计数

具有相同URL ID的多个元素

您可以在页面上拥有多个具有相同 data-fast-comments-url-id 的元素。它们都将使用相同的计数进行更新：

Multiple Elements Same URL ID

Copy

Copy

External Link

<script src="https://cdn.fastcomments.com/js/embed-widget-comment-count-bulk.min.js"></script>
<style>
    .count-example {
        margin: 10px 0;
        padding: 10px;
        background: #f9f9f9;
        border-radius: 5px;
    }
</style>
<div class="count-example">
    Header Count: <span class="fast-comments-count" data-fast-comments-url-id="shared-article"></span>
</div>
<div class="count-example">
    Sidebar Count: <span class="fast-comments-count" data-fast-comments-url-id="shared-article"></span>
</div>
<div class="count-example">
    Footer Count: <span class="fast-comments-count" data-fast-comments-url-id="shared-article"></span>
</div>
<script>
    window.FastCommentsBulkCountConfig = {
        tenantId: 'demo'
    };
</script>

本地化

批量小部件根据您的FastComments语言设置自动格式化评论计数。它为以下情况提供适当的文本：

零条评论
一条评论
多条评论

何时使用批量小部件与单个小部件

在以下情况下使用批量小部件：

您在同一页面上有多个评论计数
您正在显示带有评论计数的帖子/文章列表
性能很重要（减少API调用）

在以下情况下使用单个小部件：

您只需要页面上的一个评论计数
您需要实时更新（单个小部件支持实时更新）
您想要对单个小部件的行为有更多控制

评论计数接口

根据您的需求以及您想从浏览器、服务器还是使用API SDK获取数据，有几个端点可用于获取计数。

公共评论计数

您可以使用上面的小部件或使用它们所使用的API来获取公共评论计数。这些API自2019年以来保持不变，并且永远不会改变。

Single Count Endpoint

Copy

Copy

https://fastcomments.com/widgets/comment-count/:tenantId?urlId=page_id_or_url

这将返回如下结构：

Single Count Endpoint Response

Copy

Copy

{"count":0,"postfix":"comments"}

postfix属性始终包含在内。

Bulk Count Endpoint

Copy

Copy

https://fastcomments.com/widgets/comment-count-bulk/:tenantId?urlIds=x,y,z

这将返回如下结构：

Bulk Count Endpoint Response

Copy

Copy

{
    "status": "success",
    "translations": {
        "t174": "0 Comments",
        "t175": "1 Comment",
        "t176": "[count] Comments"
    },
    "counts": {
        "x": 10
    }
}

counts对象仅为具有计数的页面填充。translations映射始终存在，因为它用于小部件。

公共端点行为 / 缓存

公共端点有60秒的缓存机制来处理流量高峰。在内部，这是服务器内存中每个线程的LRU缓存，因此当人们留下大量评论时，您可能会看到计数略有变化（上升然后暂时下降）。

公共端点始终返回总评论数，而不是根评论数。

服务器端API / SDK

从服务器获取评论的方法是调用Pages API并获取页面对象，其中包含总评论数和根评论数。我们提供SDK，允许您在不手动构建API请求的情况下调用此API，并提供类型化的返回值。

FastComments 评论计数小部件提供了一种简单且高效的方式来在您网站的各处显示评论计数。

我们希望您觉得这份文档有帮助。