FastComments.com

Add Members-Only Live Commenting to ghost Sites

With FastComments we can easily add live, members-only commenting to any site built with Ghost.

We will be able to 自动导入您的会员用户名、头像,并设置评论回复通知

注意 本教程需要一个 FastComments 帐户。建议您先注册,然后再回来这里。 You can create an account here.

In this tutorial we'll be targeting a blog built with Ghost, but with a little know-how the same instructions apply to any type of site.

This tutorial starts from the perspective of a user who is very new to Ghost. Users experienced in editing their themes can skip to Step 4.

If you're having trouble, feel free to send your exported theme template to your support representative (still requires steps 1 - 5).


步骤 1:下载您的主题 Internal Link


要将 FastComments 正确添加到 Ghost,我们必须编辑主题文件。

因此,我们先下载您当前或想要的主题。

导航到您站点的仪表板,点击左下角的齿轮:

打开设置
打开设置

接下来选择 Design 选项:

选择 设计
选择 设计

虽然我们实际上并未更改主题,但请在左下角点击 Change Theme

更改主题
更改主题

在右上角选择 Advanced

选择 高级
选择 高级

...然后下载您当前或理想的主题:

下载主题
下载主题

步骤 2:在本地安装您的主题 Internal Link

现在我们已下载 zip 文件,将其解压到一个文件夹。我已下载默认的 casper.zip 并在 Windows 上解压到 Downloads\casper

接下来,请确保已安装 LTS 或更高版本的 NodeJS。您可以在此获取:https://nodejs.org/en/download/

NodeJS 安装完成后,请安装一个代码编辑器。

我们推荐(并使用)Webstorm,您可以在此获取试用 30 天(无需信用卡):https://www.jetbrains.com/webstorm/

下一个最佳的免费选择可能是 Visual Studio Code: https://code.visualstudio.com/download

在编辑器中设置好并打开主题文件夹后,在 IDE 中打开终端并运行:

安装主题
Copy Copy
1
2npm install
3

成功的输出如下(您可以忽略警告):

成功的 npm install 输出
成功的 npm install 输出

这将为后续要运行的命令设置主题的依赖项。此外,导出依赖于已安装主题的依赖项,否则重新导入将无法正常工作。


步骤 3:为新主题命名 Internal Link

现在我们在编辑器中打开了主题,打开 package.json 并将 name 字段更改为其他内容。在我们的例子中我们只是在末尾添加 -fastcomments:

重命名主题
重命名主题

如果你使用 IDE,它会在你进行此更改后自动保存。


步骤 4:打开文章模板 Internal Link

现在我们将打开用于我们的博客文章的模板。它叫 post.hbs

打开 post.hbs
打开 post.hbs

步骤 5:添加 FastComments 代码 Internal Link

接下来我们需要确定将 FastComments.com 小部件代码添加到何处。

如果您使用默认的 casper 主题,您将在第 82 行看到类似的部分:

已禁用的评论部分
已禁用的评论部分

如果您使用其他主题,则不会看到此项,需要在最后一个 </section> 之后添加此代码:

示例节
Copy Copy
1
2<section class="article-comments gh-canvas">
3</section>
4

您应该会看到如下准备就绪的情况:

模板已为评论代码准备就绪
模板已为评论代码准备就绪

准备好后,复制 FastComments.com 小部件代码:

Ghost FastComments.com 评论代码片段
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5 (function () {
6 let simpleSSO = null;
7
8 {{#if access}}
9 {{#if @member}}
10 simpleSSO = {
11 id: '{{ @member.uuid }}',
12 email: '{{@member.email}}',
13 username: '{{@member.name}}',
14 avatar: '{{ @member.avatar_image }}',
15 optedInNotifications: true,
16 optedInSubscriptionNotifications: true,
17 displayLabel: '{{@member.labels}}'
18 }
19 {{/if}}
20 {{/if}}
21
22 FastCommentsUI(document.getElementById('fastcomments-widget'), {
23 tenantId: "demo",
24 urlId: window.location.pathname,
25 allowAnon: false,
26 simpleSSO: simpleSSO
27 });
28 })();
29</script>
30

...看起来应该像这样:

添加 FastComments.com 评论代码
添加 FastComments.com 评论代码

代码已完成。现在我们只需重新导入我们的主题!


步骤 6:导出您的主题 Internal Link

现在我们需要将主题文件打包回一个 zip 文件。为此,请使用 Ghost 内置的功能。

再次打开编辑器的终端并运行 npm run zip

导出您的主题
Export Your Theme

这会将主题打包成一个位于 dist/casper-fastcomments.zip 的 zip 文件(如果这是你在 Step Three 中为主题命名的名称)。


步骤 7:将主题上传到 Ghost Internal Link

回到 Ghost 仪表板,我们来上传我们的主题:

上传您的主题
上传您的主题

就我而言,我的 zip 文件位于以下位置。注意 dist 文件夹:

选择要上传的 Zip 文件
选择要上传的 Zip 文件

记得激活你新上传的主题(Ghost 应该会提示你)。

成功! Internal Link


现在我们应该已经为我们的成员启用了 FastComments 即时评论功能!

成功!
成功!

恭喜你在 Ghost 中完成了 FastComments 的设置!如果你遇到域名错误,或想了解如何自定义评论区,请继续阅读!


自定义 Internal Link


FastComments 旨在根据您的网站进行定制。

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