您可以在这里找到我们的WordPress插件。

完整的安装指南和插件文档在这里。

此插件支持实时评论、SSO和无代码安装。安装插件后，只需按照管理页面中的安装指南操作即可。 它将指导您将WordPress安装连接到您的账户。

通过我们的WordPress插件使用FastComments留下的任何评论都可以自动同步回您的WordPress 安装，以便您保留对数据的控制。可以关闭此功能以限制WordPress数据库的大小。

VanillaJS版本的小部件非常容易安装，不需要任何构建系统或服务器端代码。

只需将以下代码片段添加到任何页面：

简单代码片段

Copy Run

1

2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>

3<div id="fastcomments-widget"></div>

4<script>

5window.fcConfigs = [{

6 "tenantId": "demo"

7}];

8</script>

9

您可以在多个页面上使用相同的代码片段；它将自动为每个页面创建单独的讨论线程。

许多应用程序都有"HTML嵌入代码"选项。选择该选项并粘贴上面的代码片段。

您甚至不需要账户就可以试用！ 如果您未登录，您可能会在上面的代码片段中看到"tenantId: demo"。这样它将使用 演示账户。

您可以在这里找到配置小部件的文档。

所有版本的FastComments小部件都是核心VanillaJS库的包装器。这使我们能够在一个地方添加功能 和修复问题——更改会自动传播到评论小部件的其他变体。

您可以在NPM的这里找到我们的Angular库。

FastComments Angular评论小部件支持与VanillaJS版本相同的所有功能——实时评论、SSO等。

您需要fastcomments-typescript，这是一个对等依赖。请确保它包含在您的TypeScript编译中。 将来，此对等依赖将移至@types/fastcomments，这将简化安装。

FastComments Angular（通过NPM）

Copy

1

2 npm install fastcomments-typescript --save

3 npm install ngx-fastcomments --save

4

对等依赖应添加到您的tsconfig.json文件中，例如：

添加fastcomments-typescript对等依赖

Copy

1

2"include": [

3 "src/**/*.ts",

4 "node_modules/fastcomments-typescript/src/index.ts"

5],

6

然后，将FastCommentsModule添加到您的应用程序：

将模块添加到您的应用

Copy

1

2import { BrowserModule } from '@angular/platform-browser';

3import { NgModule } from '@angular/core';

4

5import { AppComponent } from './app.component';

6import { FastCommentsModule } from 'ngx-fastcomments';

7

8@NgModule({

9 declarations: [

10 AppComponent

11 ],

12 imports: [

13 BrowserModule,

14 FastCommentsModule

15 ],

16 providers: [],

17 bootstrap: [AppComponent]

18})

19export class AppModule { }

20

使用方法

首先，我们传递演示租户的配置对象：

使用方法 - 内联配置

Copy

1

2<lib-fastcomments [config]="{ tenantId: 'demo' }"></lib-fastcomments>

3

由于配置可能变得相当复杂，我们可以传递对象引用：

使用方法 - 传递配置对象

Copy

1

2<lib-fastcomments [config]="fastcommentsConfig"></lib-fastcomments>

3

使用方法 - 欧盟

Copy

1

2<lib-fastcomments [config]="{ tenantId: 'demo', region: 'eu' }"></lib-fastcomments>

3

小部件使用变更检测，因此更改配置对象的任何属性都会导致它重新加载。

您可以在这里找到Angular组件支持的配置。

您可以在NPM的这里找到我们的React库。

FastComments React评论小部件支持与VanillaJS版本相同的所有功能——实时评论、SSO等。

FastComments React（通过NPM）

Copy

1

2npm install --save fastcomments-react

3

FastComments React（通过Yarn）

Copy

1

2yarn add fastcomments-react

3

React示例

Copy

1

2import React, { Component } from 'react'

3

4import {FastCommentsCommentWidget} from 'fastcomments-react'

5

6class Example extends Component {

7 render() {

8 return <FastCommentsCommentWidget tenantId="demo" />

9 }

10}

11

如果您在欧盟，您需要像这样设置region参数：

React示例 - 欧盟

Copy

1

2 <FastCommentsCommentWidget tenantId="demo" region="eu" />

3

您可以在这里找到React组件支持的配置。

您可以在NPM的这里找到我们的Vue库。

此外，vue-next库在NPM的这里

源代码可以在GitHub上找到。

FastComments Vue评论小部件支持与VanillaJS版本相同的所有功能——实时评论、SSO等。

以下说明适用于Vue 3（因为它已经发布了一段时间），但FastComments也通过fastcomments-vue库支持Vue 2。

FastComments Vue（通过NPM）

Copy

1

2npm install --save fastcomments-vue-next

3

FastComments Vue（通过Yarn）

Copy

1

2yarn add fastcomments-vue-next

3

Vue示例

Copy

1

2<template>

3 <img alt="Vue logo" src="./assets/logo.png">

4 <fast-comments v-bind:config="{tenantId: 'demo'}"/>

5</template>

6

7<script>

8import {FastComments} from 'fastcomments-vue-next';

9

10export default {

11 name: 'App',

12 components: {

13 FastComments

14 }

15}

16</script>

17

如果您在欧盟，您需要将region设置为EU：

FastComments Vue - 欧盟

Copy

1

2<fast-comments v-bind:config="{tenantId: 'demo', region: 'eu'}"/>

3

fastcomments-vue和fastcomments-vue-next库支持与VanillaJS评论小部件相同的配置。

您可以在这里找到Vue组件支持的配置。

FastComments的TypeScript定义（包括传递给评论小部件的所有配置的类型）可以在NPM的这里找到。

您可以在GitHub的这里找到它。

评论小部件的每个实例都是隔离的。因此，FastComments本质上支持每页多个实例，或多个实例指向同一聊天线程。

例如，对于VanillaJS库，您只需将评论小部件绑定到不同的DOM节点。如果您只想更新页面上的当前线程，请参阅无需重新加载页面切换评论线程；

在多个实例之间同步身份验证状态

让我们来看一个自定义单页应用程序的例子，它是一个常见问题列表，每个问题都有自己的评论线程。

在这种情况下，我们在DOM中同时有多个FastComments实例。

这没问题，但会给用户体验带来一些挑战。

考虑这个流程：

1. 用户访问包含问题列表的页面，每个问题都有自己的评论小部件。
2. 用户输入用户名和电子邮件，并在其中一个线程上留下问题。
3. 他们看到另一个有疑问的FAQ项目。
4. 他们去再次评论。他们需要再次输入电子邮件和用户名吗？

在这种情况下，FastComments会为您处理小部件实例之间的身份验证状态同步。在第四步，用户将已经临时通过身份验证，因为他们在同一页面上输入了用户名和电子邮件。

立即显示实时评论

评论小部件默认是实时的，但实时评论会显示在"显示N条新评论"按钮下方，以防止页面内容移动。

在某些情况下，仍然希望立即显示新评论，而无需点击按钮。

在这种情况下，您需要启用showLiveRightAway标志，您可以在这里找到文档。

允许匿名评论（不要求电子邮件）

默认情况下，FastComments要求用户在评论时留下电子邮件。

这可以禁用，说明在这里。

自定义样式

我们的许多客户将自己的样式应用于评论小部件。您可以在这里找到文档。

在多个域上显示相同的评论

在多个站点上显示相同的评论是FastComments开箱即用支持的功能。请参阅我们关于此主题的文档。

更改当前页面

FastComments支持SPA和复杂应用程序。更改当前页面很简单，在这里有介绍。