Add Comments To a Website

您可以在這裡找到我們的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和複雜應用程式。更改當前頁面很簡單，在這裡有介紹。