FastComments.com

Add Comments to Shopify Sites

使用 FastComments,我们可以轻松地为任何 Shopify 站点添加实时评论。

下面的说明适用于在 Shopify 上构建的博客,但嵌入代码也可以通过编辑其他主题文件手动添加到任何页面中。FastComments 支持也可以提供帮助。

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

步骤 2:禁用默认评论系统 Internal Link

在 Shopify 上使用 FastComments 的第一步是禁用 Shopify 的评论系统。

注意 FastComments 支持可以协助您迁移现有的评论线程。

要替换 Shopify 的评论系统,我们需要进入商店仪表板并点击左下角的 Blog posts

打开博客文章管理
Open Blog Posts Admin

然后在右上角点击 Manage blogs

管理博客
Manage Blogs

点击我们要管理的博客。如果显示 Comments are disabled,您可以跳过此步骤并进入 Step Two

管理博客
Manage Blog

如果不是,请选择该博客并确保在右侧面板中选中 Comments are disabled

禁用评论
Disable Comments

现在点击保存。

步骤 3:打开博客主题模板 Internal Link


现在我们将编辑商店的主题以添加 FastComments。

在左侧面板中,打开 Themes

Open Themes
打开 Themes

Current theme 下,选择 Actions,然后选择 Edit code

Edit Code
编辑代码

这将打开一个代码编辑器,左侧是文件浏览器,右侧是代码。

我们所需要做的就是复制一小段用于添加 FastComments 的代码,并将其粘贴到正确文件的正确行。

在左侧的文件浏览器中,向下滚动并单击 Sections

Select Sections
选择 Sections

现在向下滚动并选择 main-article.liquid

Select main-article
选择 main-article

这将打开用于呈现单篇博客文章的 主题模板

你现在应该能看到类似下面的内容,顶部选择着 main-article.liquid

main-article Open
main-article 已打开

步骤 4:添加 FastComments.com 的代码 Internal Link

接下来我们将向下滚动到第 100 行:

滚动到第 100 行
滚动到第 100 行

现在复制下面的代码片段,该片段专为 Shopify 设计 - 请勿使用其他教程中的代码片段

Shopify FastComments 代码片段
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3<div id="fastcomments-widget" class="page-width page-width--narrow"></div>
4<script>
5 FastCommentsUI(document.getElementById('fastcomments-widget'), {
6 tenantId: "demo",
7 urlId: window.location.pathname
8 });
9</script>
10

现在我们要把光标放在 line 101 上 - 就在 </div> 之后 - 然后粘贴。你应该会看到类似这样的内容:

添加 FastComments 代码
添加 FastComments 代码

现在我们可以保存:

保存
保存

成功 Internal Link


现在如果我们查看一篇博客文章,应该能看到 FastComments!

成功!
成功!

恭喜您已在 Shopify 中设置了 FastComments!如果您遇到了 Domain Error,或者想了解如何自定义评论区域,请继续阅读!


自定义 Internal Link


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

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