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

根據您的需求以及您想從瀏覽器、伺服器還是使用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 的評論數量小工具提供一種簡單且高效的方式，在整個網站上顯示評論數量。

我們希望這份文件對您有幫助。