Add Comments To a Website

要在您的 WordPress 站点上添加评论，您可以在 此处 找到我们的 WordPress 插件。

关于该插件的完整安装指南和文档在此。

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

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

The VanillaJS 版本的 widget 是向您的网站添加评论的最简单方式，不需要任何构建系统或服务器端代码。

只需将以下代码片段添加到任何页面，就可以为您的网站添加评论：

Simple Code Snippet

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 widget 都是围绕核心 VanillaJS 库的封装。这使我们能够在一个地方添加功能并修复问题——更改会自动传播到评论组件的其他变体。

要在基于 Angular 构建的网站中添加评论，您可以在 NPM 上找到我们的 Angular 库，链接在 这里。

FastComments Angular 评论小部件支持与 VanillaJS 相同的所有功能 —— 实时评论、单点登录 (SSO) 等。

您将需要 fastcomments-typescript，它是一个 peer 依赖。请确保此依赖包含在您的 TypeScript 编译中。未来，该 peer 依赖将迁移到 @types/fastcomments，从而简化此安装。

通过 NPM 安装 FastComments Angular

Copy

1

2 npm install fastcomments-typescript --save

3 npm install ngx-fastcomments --save

4

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

在 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

用法 - EU 区域

Copy

1

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

3

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

您可以在 此处 找到 Angular 组件支持的配置。

要在使用 React 构建的网站上添加评论，您可以在 NPM 上找到我们的 React 库 这里。

FastComments 的 React 评论组件支持与 VanillaJS 相同的所有功能——实时评论、sso 等。

通过 NPM 使用 FastComments React

Copy

1

2npm install --save fastcomments-react

3

通过 Yarn 使用 FastComments React

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 组件支持的配置。

要在使用 Vue 构建的网站上添加评论，您可以在 NPM 上找到我们的 Vue 库 此处。

此外，vue-next 库也在 NPM 上，见 此处

源代码可在 GitHub 上找到。

FastComments Vue 评论组件支持与 VanillaJS 相同的所有功能 - live commenting、sso 等。

下面的说明针对 Vue 3，因为它已经发布有一段时间；但是 FastComments 也通过 fastcomments-vue 库支持 Vue 2。

通过 NPM 安装 FastComments Vue

Copy

1

2npm install --save fastcomments-vue-next

3

通过 Yarn 安装 FastComments Vue

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和复杂应用程序。更改当前页面很简单，在这里有介绍。