Add Comments to Wix Sites

使用 FastComments，我们可以轻松地向任何 Wix 网站添加实时评论。我们还将介绍如何确保每个页面或博客文章都有其自己的唯一评论线程。

请注意，本教程需要一个 FastComments 帐户。建议您先注册，然后再回来。您可以在此处创建帐户。

步骤 1：编辑正确的页面

在本示例中，我们将在博客文章页面中添加 FastComments 实时评论功能。

为此，我们将在 Wix 编辑器中打开我们的网站。

然后，我们需要确保正在编辑正确的页面。

我们希望为每篇博客文章显示唯一的评论线程，因此请编辑 Blog Pages -> Post。

第一步：编辑动态文章页面

步骤 2：添加嵌入块

然后，我们转到 Add -> Embed Code -> Embed HTML。

第二步：添加嵌入 HTML 块

这将给我们一个看起来很简陋的起始框：

起始区块

步骤 3：复制并粘贴自定义代码

此示例使用自定义代码以兼容 Wix。您将无法使用其他教程中的 FastComments 代码片段。

通过点击 Enter Code 并选择 HTML 打开表单以添加我们的自定义 HTML 对话框：

步骤 3：打开 HTML 对话框

复制以下 HTML 片段并粘贴到对话框中，然后点击 Update:

Wix 评论代码片段

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
    (function () {
        const config = {
            tenantId: "demo"
        };
        const instance = FastCommentsUI(document.getElementById('fastcomments-widget'), config);
        window.onmessage = (event) => {
            if (event.data) {
                if (event.data.action === 'reload') {
                    console.log('Updating FastComments:', event.data.url);
                    config.urlId = event.data.url;
                    config.url = event.data.url;
                    instance.update(config);
                }
            }
        }
    })();
</script>

步骤 3：粘贴并保存

您现在应该会看到一个非常小的评论小部件版本：

步骤 3：结果

接下来我们将调整其位置和大小以适应页面。

步骤 4：调整大小

既然我们已经添加了评论小部件，让我们在页面上进行布局。

第4步：调整大小

通过本教程，我们将能够根据活动页面更改当前线程。然而，我们无法动态调整评论小部件的大小直到 Wix 开放此功能。在此之前，您需要决定页面上评论区域的大小并相应设置尺寸。

步骤 5：设置唯一的评论线程

接下来，我们需要设置，使评论线程根据当前页面变化，从而允许用户讨论当前显示的内容。

如果不执行以下步骤，你的网站将只有一个全局评论线程——这并不太实用。

开发者模式

要添加此功能，我们需要进入 Wix 所称的 Dev Mode。

点击屏幕顶部的 Dev Mode 选项。

启用 Dev Mode

设置元素 ID

我们将添加自定义代码来实现此功能，但首先需要为新嵌入元素设置一个用于引用的 ID。

我们把它命名为 fastcomments。

点击我们添加的新嵌入元素，在开发者模式下右下角你应该能看到一个 ID 字段，其值类似 html1：

ID 字段

把它改为 fastcomments 然后按回车：

设置 ID

现在我们可以添加自定义代码，告诉评论区域当前正在查看哪个页面。

在屏幕底部你应该能看到如下的代码编辑器：

打开编辑器

复制以下代码并粘贴到其中：

Wix 评论导航代码片段

Copy

import wixLocation from 'wix-location';
$w.onReady(function () {
    function updateFastCommentsLocation() {
        try {
            const url = (wixLocation.baseUrl + '/' + wixLocation.path).replace(/,/g, '/');
            $w('#fastcomments').postMessage({'action': 'reload', 'url': url});
        } catch (err) {
            console.error('Wix -> FastComments Error', err);
        }
    }
    updateFastCommentsLocation();
    wixLocation.onChange( () => {
        updateFastCommentsLocation();
    });
});

添加导航代码

步骤 6：庆祝

现在我们可以喘口气并预览我们的网站。您应该会看到一个根据当前页面变化的评论区域。恭喜！

如果您有任何问题，请在下面的评论框中告诉我们。

自定义

FastComments 旨在可定制，以匹配您的网站。

如果您想添加自定义样式或调整配置，查看我们的自定义文档以了解如何操作。

语言 🇨🇳 简体中文

Wix 安装