FastComments.com

自定义与配置

自定义与配置

背景

在这里,您将找到有关评论小部件所支持的每个功能和设置的深入文档。

本档将涵盖核心概念,并深入探讨每个功能领域,包含操作指南和常见陷阱。

将提供代码示例,并突出显示相关行。必要时还会提供配置页面的截图。

代码示例将使用我们的纯 JavaScript 库,但配置选项在所有版本的评论小部件(React、Vue 等)中使用完全相同的名称。

本指南中概述的大多数配置和功能无需编写任何代码。

在不同页面渲染相同的评论 Internal Link

由于 urlId 参数允许我们定义评论所绑定的页面或 id,我们只需在这些页面上将 urlId 设置为相同的值。

The Same Comments on Multiple Pages
Copy CopyRun External Link
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 "urlId": "https://example.com/source-page"
8}];
9</script>
10

自定义字体 Internal Link

FastComments 设计用于可定制,我们小部件使用的字体也不例外。

默认情况下,FastComments 使用 system font stack,以便在各种设备上尽可能呈现良好外观。

要定义您自己的字体,请参阅 自定义 CSS 文档。

在那里您会找到定义自定义 CSS 的方法,从而允许您设置所需的字体。

如何定义字体

要覆盖字体,我们建议使用 .fast-comments, textarea 选择器来定义您的 CSS。例如:

自定义外部字体示例
Copy CopyRun External Link
1
2@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
3.fast-comments, textarea {
4 font-family: 'Roboto', sans-serif;
5}
6

支持深色背景(暗模式) Internal Link

默认情况下,FastComments 评论组件会在大多数网站上自动检测深色模式。

检测到深色模式时,FastComments 会将黑色文字/白色背景切换为黑色背景/白色文字。图像也会随之改变。

在页面加载时,组件会尝试判断评论组件背后页面背景的明暗程度。这意味着 页面可能是白色背景,但如果你将评论组件放在一个黑色背景的容器内,深色模式仍然应该 会自动启用以确保评论可读。

不过,依赖于“亮度”判断的检测机制可能不会在你期望的时候启用深色模式。要强制启用它,请将 hasDarkBackground 标志设置为 true,如下所示:

Force Dark Background Mode
Copy CopyRun External Link
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 "hasDarkBackground": true
8}];
9</script>
10

从评论链接到页面 Internal Link

发送通知邮件,或在像审核页面这样的用户界面中呈现评论时,能够将链接 从评论指向其所在页面会很有帮助。

如果 URL ID 不总是一个 ID,那么我们必须在别处存储 URL。这就是 "url" 属性的用途,定义如下。

Defining a Custom URL
Copy CopyRun External Link
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 "url": "https://example.com/article-5"
8}];
9</script>
10

一个常见用例是将评论线程绑定到一个标识符(例如文章),然后链接回特定页面,例如:

Defining Custom URL and URL IDs together
Copy CopyRun External Link
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 "url": "https://example.com/article-5",
8 "urlId": "article-5"
9}];
10</script>
11

URL 不会去除常见的营销参数。默认情况下,当前页面的 URL 即为随评论存储的 URL。

确定要渲染的页面 Internal Link

在获取和渲染评论时,评论组件需要知道从哪一页开始。默认情况下,它从 第一页开始,只渲染该页。

如果需要,可以将要渲染的确切页码作为设置 startingPage 传递给评论组件。

Specifying The Page to Render
Copy CopyRun External Link
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 "startingPage": 1
8}];
9</script>
10

请注意,页码从零开始,因此上例渲染的是第二页。

在不重新加载页面的情况下切换评论线程 Internal Link

我们已经讲过 urlId 是评论所绑定的页面或文章的 id。

另外,回顾一下,如果未定义,urlId 将默认为当前页面的 URL。

对于 SPA(Single-Page-Applications,单页应用),当评论所绑定的页面或内容在不重新加载页面的情况下动态改变时,该怎么办?

Angular、React、Vue 等

使用我们的库(例如 Angular 和 React),只需更新传递给组件的 urlId 属性即可使评论组件刷新。例如,你可以在 React 应用中看到实际效果,这里。

VanillaJS

如果使用 VanillaJS 库,情况会稍微复杂一些,因为没有像 Angular 或 React 这样的框架来处理数据绑定或状态传播。

当你实例化 VanillaJS 小部件时,它会返回一些可用于更新小部件的函数。

下面是一个实际的示例,我们在其中更改页面哈希并更新评论小部件:

切换页面哈希示例
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3<button id="change-page"></button>
4<div id="fastcomments-widget"></div>
5<script>
6 (function fastCommentsMain() {
7 let config = {
8 tenantId: 'demo'
9 };
10 let instance = window.FastCommentsUI(document.getElementById('fastcomments-widget'), config);
11
12 let page = '#page-1';
13 function getNextPage() {
14 if (page === '#page-1') {
15 return '#page-2';
16 } else {
17 return '#page-1';
18 }
19 }
20
21 let button = document.getElementById('change-page');
22 function nextPage() {
23 page = getNextPage();
24 button.innerText = 'Go to ' + getNextPage();
25 window.location.hash = page;
26 let locationString = window.location.toString();
27
28 config.url = locationString; // 我们也更新 url,这样通知可以链接回正确的页面
29 config.urlId = locationString;
30
31 instance.update(config);
32 }
33 nextPage();
34 button.addEventListener('click', nextPage);
35 })();
36</script>
37

禁用图片重定向 Internal Link

默认情况下,FastComments 允许用户上传图片。 当用户点击该图片时,FastComments 默认会, 在新标签页中打开该图片以全尺寸显示。将此标志设为 true 会禁用此行为:

Disable Image Redirect
Copy CopyRun External Link
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 "disableImageRedirect": true
8}];
9</script>
10

如果您不打算自己捕获图片点击事件(参见 onImageClicked),我们建议同时使用一些样式来去除图片看起来可点击的效果。

高亮新评论 Internal Link

FastComments 提供多种方式来突出显示新评论。

首先且最重要的是,默认情况下,会触发应用内通知的评论(回复、同一线程中的回复,或你订阅的页面 上的评论),会自动突出显示,用户头像会略微发光。颜色可以通过 CSS 使用 is-unread 类进行自定义。

在过去 24 小时内发布的评论会应用 24hr 类,可用于样式化。

最后,任何在用户会话中出现的新实时评论会通过动画高亮显示数秒。这是通过 is-live CSS 类实现的,也可以自定义。

电子邮件模板 Internal Link

FastComments 发送给您的客户的电子邮件可以自定义。模板、逻辑、 和翻译都可以更改。文本可以按语言/区域定制,样式 甚至可以按域名更改。 在此了解有关自定义电子邮件模板的更多信息。

新实时评论显示在底部 Internal Link

默认情况下,实时发布的新评论会出现在评论列表的顶部。

启用此选项后,实时发布的新评论将改为添加到列表底部。这会影响用户在查看评论线程时实时发布的评论的显示位置。

New Live Comments to Bottom
Copy CopyRun External Link
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 "newCommentsToBottom": true
8}];
9</script>
10

启用此设置后:

  • 其他用户实时发布的新评论将出现在评论列表的底部
  • 用户将在实时中看到新评论出现在现有评论之下
  • 这只影响实时评论更新 - 不影响初始页面加载
  • 当用户跟随讨论时,这有助于保持阅读流畅性

请注意,此设置仅影响实时到达的新评论的放置位置。它不会影响页面加载时的初始排序顺序。

启用无限滚动 Internal Link

默认情况下,FastComments 小部件会按垂直方向调整大小以适应所有可见评论。分页通过当前页面末尾的 "View Next" 按钮实现,因为我们发现这种交互对大多数用户来说是最为舒适的。

但是,在某些情况下更偏好使用无限滚动。例如,我们在 Stream Chat 产品中使用此功能。

我们可以通过将 enableInfiniteScrolling 标志设置为 true 来隐藏 "View Next" 按钮并切换到无限滚动:

Enabling Infinite Scrolling
Copy CopyRun External Link
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 "enableInfiniteScrolling": true
8}];
9</script>
10

这还需要添加自定义 CSS。为 .comments 选择器添加自定义 CSS 以启用滚动,例如:

启用无限滚动
Copy CopyRun External Link
1
2.comments {
3 max-height: 500px;
4 overflow-y: auto;
5}
6

下面是一个完整的工作示例:

Enabling Infinite Scrolling
Copy CopyRun External Link
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 "enableInfiniteScrolling": true,
8 "customCSS": ".comments { max-height: 500px; overflow-y: auto; }"
9}];
10</script>
11

在上例中我们使用了 customCSS 属性,但出于性能原因,建议改为使用 Widget Configuration UI。 查看自定义 CSS 文档。

一次渲染所有评论 - 禁用分页 Internal Link

要禁用分页,并一次性渲染所有评论,请将 startingPage 设置为 -1。

Render All Comments
Copy CopyRun External Link
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 "startingPage": -1
8}];
9</script>
10

阻止新的顶级评论 Internal Link

将 noNewRootComments 设置为 true 会导致小部件隐藏顶层回复区域,但仍允许用户回复 子评论。你可以例如在页面加载时有条件地设置此项,只允许某些用户留下顶级评论。

Prevent New Root Comments
Copy CopyRun External Link
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 "noNewRootComments": true
8}];
9</script>
10

最大回复深度 Internal Link

默认情况下,FastComments 允许无限层级的回复嵌套,形成用户可以无限回复回复的线程结构。

maxReplyDepth 选项允许您限制回复线程的最大深度。当达到最大深度时,用户将不再能在该层级的评论上看到回复按钮。

将回复深度限制为 2 层
Copy CopyRun External Link
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 "maxReplyDepth": 2
8}];
9</script>
10

将 maxReplyDepth 设置为 2 时:

  • 用户可以在顶层发表评论(深度 0)
  • 用户可以回复顶层评论(深度 1)
  • 用户可以回复这些回复(深度 2)
  • 超过深度 2 后不允许再回复

设置为 1 则只允许回复顶层评论,形成更扁平的讨论结构。

将 maxReplyDepth 设置为 0 将禁用所有回复,只允许顶层评论。如果未指定,回复可以无限嵌套。

在未发送评论离开前警告 Internal Link

默认情况下,如果用户输入评论后在提交前刷新页面、关闭标签页或离开页面,草稿会悄悄丢失。

将 warnOnUnsavedComment 设置为 true 时,只要任何评论框或正在编辑的内容仍包含文本,浏览器在离开页面前会要求用户确认。评论提交后文本会被清除,因此不会显示提示。

警告未保存的评论
Copy CopyRun External Link
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 "warnOnUnsavedComment": true
8}];
9</script>
10

提示使用浏览器自身的对话框。现代浏览器显示自己的文字并忽略自定义文本,因此无法自定义该消息。

此选项按需加载一个小扩展,对于未启用该功能的站点,不会向小部件添加任何内容。

单点登录(SSO)概述 Internal Link

SSO,即单点登录(single-sign-on),是一套约定,用于让您或您的用户无需再创建另一个账户即可使用 FastComments。

假设您不允许匿名评论,那么使用 FastComments 评论需要一个账户。我们让这个注册过程非常简单——用户只需在评论时留下他们的电子邮件即可。 不过,我们也理解,即使是这一点额外的阻力,有些网站也希望避免。

我们可以通过让整个网站只有一个登录流程来减少这种阻力。

如何获得该功能?

目前所有账户类型都可以使用 SSO。但是,SSO 用户数量上限取决于您的套餐。与其他功能一样,Pro 及更高版本的计划提供直接的开发支持。

让我们先比较各个选项,然后深入了解每一项。

用户和评论迁移

当从支持 SSO 的平台(如 Disqus)迁移时,您已经拥有用户及其评论。

评论会作为迁移的一部分被导入,可以通过 API、我们的导入 UI 或客户支持来完成。如果导入 UI 支持您要迁移的平台,则首选导入 UI,因为它包含错误处理、头像和媒体提取与上传,以及批处理任务监控系统。

用户本身会在首次查看评论线程时自动添加。或者,也可以通过 API 预先添加,但这样做并没有太多优势。

如果评论已导入,而 SSO 用户未通过 API 手动添加,那么当用户首次查看任何评论线程并创建账户时,评论会自动迁移到该用户的账户。之后他们将能够管理、编辑和删除自己最初撰写的评论。

自动迁移通过电子邮件或用户名完成。某些平台在导出时不提供电子邮件,例如 Disqus,因此在这种情况下我们会退而使用用户名。

  • 只要您传入匹配的用户名,并在 SSO 载荷中提供电子邮件,我们就会将电子邮件添加到各个评论对象中,以便通知和提及功能正常工作。

如果您希望一次性导入评论和用户,可以在通过 API 导入用户后,与支持团队协作,将评论迁移到用户各自的账户。

因此,总结一下迁移最简单的路径:

  1. 导入评论。
    1. 如果使用 Manage Data -> Imports 中的导入 UI,头像和其他媒体会自动迁移。
  2. 设置 Secure SSO 或 Simple SSO。
  3. 让迁移在用户首次登录时按用户自动进行。
    1. 如果用户的评论少于 5 万条,这通常只会给页面加载时间增加不到一秒。

WordPress 用户

如果您使用我们的 WordPress 插件,那么无需编写任何代码!只需前往插件的管理页面,点击 SSO Settings,然后点击 Enable。

这将带您进入一个单击式向导,它会创建您的 API 密钥,将其发送到您的 WordPress 安装并开启 SSO。我们已将此整合为一次按钮点击。

请注意,如果您是首次安装该插件,则需要先完成设置流程,才能看到带有 SSO Settings 按钮的管理页面。

WordPress SSO - 版主

请注意,目前若要在版主使用 FastComments WordPress 插件评论时在其旁边显示"Moderator"徽章, 他们还必须在 FastComments 控制面板中被添加为版主,并且其电子邮件已通过验证。

自定义集成

对于自定义集成,有两种选项。

选项一 - Secure SSO

使用 Secure SSO,FastComments 可以确认评论、投票和阅读评论的用户是您网站上的真实用户。

只要您创建有效的载荷,用户将始终拥有无缝的评论体验。

使用 Secure SSO 时,SSO 载荷是在服务器端使用 HMAC 身份验证创建的,然后传递给客户端上的小部件。

使用 Secure SSO 时,用户的账户与 FastComments 的其他用户群完全隔离。这意味着如果我们有两个合作伙伴 Company A 和 Company B,每一方都可以拥有一个用户名为"Bob"的 SSO 用户。

要求

  • 具备一些后端开发的基础知识。
  • 具备一些处理私密 API 密钥的基础知识。
  • 具备一些 API 开发或服务器端渲染的基础知识。

优点

  • 安全。
  • 无缝的评论体验。

缺点

  • 需要后端开发。

更新用户数据

使用 Secure SSO 时,每次您传递 sso 用户载荷,我们都会用最新信息更新该用户。例如,如果 用户的用户名是 X,而您在 SSO 载荷中传递 Y,则其用户名将变为 Y。

如果您想通过这种方式移除某个值,请将其设置为 null(而不是 undefined)。

Secure SSO API

我们还提供了一个用于与 SSO 用户交互的 API。请参阅文档。

请注意,使用 Secure SSO 时,用户会在页面加载时自动在后台创建。您无需批量导入用户。

选项二 - Simple SSO

Secure SSO 的替代方案是直接将用户信息传递给评论小部件。

使用 Simple SSO 时不需要提供电子邮件,但如果不提供,其评论将显示为"Unverified"。

注意! 自 2022 年初起,使用 Simple SSO 的用户名不再需要在整个 FastComments.com 上唯一。

理想情况下,只有在无法使用后端的平台上开发时,才应选择 Simple SSO。

要求

  • 具备一些客户端开发的基础知识。
  • 至少需要知道用户的电子邮件。

优点

  • 简单。
  • 所有活动仍会得到验证。
  • 用户无需输入用户名或电子邮件。

缺点

  • 安全性低于 Secure SSO,因为客户端载荷可能被伪造为任意用户。

Simple SSO API

通过 Simple SSO 流程自动创建的用户以 SSOUser 对象的形式存储。可以通过 SSOUser API 访问和管理它们。请参阅文档。

自定义集成 - 从 Disqus SSO 迁移 Internal Link

Disqus 与 FastComments Secure SSO 之间最大的区别是 Disqus 使用 SHA1 进行加密,而我们使用 SHA256。

这意味着从 Disqus 迁移很容易 - 将所使用的哈希算法从 SHA1 改为 SHA256 并更新传递给 UI 的属性名称。

自定义集成 - 从 Commento SSO 迁移 Internal Link

Commento 使用一种截然不同的 SSO 方法 - 他们要求你有一个端点,他们会调用该端点来验证用户。FastComments 则相反 - 只需使用你的密钥对用户的信息进行编码和哈希并传递即可。

回调 Internal Link

所有评论小部件的库(目前包括 Angular、React、Vue)都支持回调。

回调在配置对象中指定,对每个库的签名相同。

支持的回调包括:

  • onInit
  • onAuthenticationChange
  • onRender
  • commentCountUpdated
  • onReplySuccess
  • onVoteSuccess
  • onImageClicked
  • onOpenProfile
  • onCommentSubmitStart
  • onCommentsRendered

可以在TypeScript 定义中找到确切的签名。

以下是使用所有回调的示例:

回调示例
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5 window.fcConfigs = [{
6 target: '#fastcomments-widget',
7 tenantId: 'demo',
8 onInit: function () {
9 console.log('Library started to fetch comments!');
10 },
11 onAuthenticationChange: function (eventName, userObj) {
12 console.log('User authenticated!', eventName, userObj);
13 },
14 onRender: function () {
15 console.log('Render event happened!');
16 },
17 commentCountUpdated: function (newCount) {
18 console.log('New comment count:', newCount);
19 },
20 onReplySuccess: function (comment) {
21 console.log('New comment saved!', comment);
22 },
23 onVoteSuccess: function (comment, voteId, direction, status) {
24 console.log('New vote saved!', comment, voteId, direction, status);
25 },
26 onImageClicked: function (src) {
27 console.log('Image clicked!', src);
28 },
29 onOpenProfile: function (userId) {
30 console.log('User tried to open profile', userId);
31 // 返回 true; // 返回 true 以阻止默认行为(打开 fastcomments.com 用户资料)。
32 },
33 onCommentSubmitStart: function(comment, continueSubmitFn, cancelFn) {
34 console.log('Trying to submit comment', comment);
35 setTimeout(function() { // 模拟异步行为(调用 API 等)。
36 if(confirm('Should submit?')) {
37 continueSubmitFn();
38 } else {
39 cancelFn('Some optional error message');
40 }
41 }, 1000);
42 },
43 onCommentsRendered: function(comments) {
44 // comments 按页面默认排序排序,可能是最相关(例如最多投票等)或最新优先
45 const topCommentInList = comments[0];
46 console.log('First Comment Rendered:', topCommentInList.avatarSrc, topCommentInList.commenterName, topCommentInList.commentHTML);
47 }
48 }];
49</script>
50

页面标题 Internal Link

当前页面标题会与指定的 urlId 关联,并保存以供审核工具使用。

默认情况下,此标题从 document.title 获取。

如果需要,您可以按如下方式指定自定义页面标题:

Specifying The Page Title
Copy CopyRun External Link
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 "pageTitle": "Article 42"
8}];
9</script>
10

评论计数及统计所有嵌套回复 Internal Link

评论小部件顶部显示的评论计数可以显示所有“顶级”评论,意思是那些 直接回复页面或文章本身的回复,或者它可以是所有嵌套评论的计数。

默认情况下,这是 true - 它是后者的计数 - 所有评论。在旧版本的评论小部件中,默认值是 false。

我们可以通过将 countAll 标志设置为 true 来更改行为,使其成为所有嵌套评论的计数。

Counting All Comments
Copy CopyRun External Link
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 "countAll": true
8}];
9</script>
10

如果我们希望计数仅反映顶级评论,我们将该标志设置为 false。

Counting Top Level Comments
Copy CopyRun External Link
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 "countAll": false
8}];
9</script>
10

目前无法在不修改代码的情况下进行自定义。

提及组 ID Internal Link

用于 @mentions 自动完成 的 ID 列表。当你希望在用户没有交集群组时防止标记他们时非常有用。

当指定后,输入 @ 字符后,自动完成中只会提供属于其他群组的用户。

Limit Groups for Mentions
Copy CopyRun External Link
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 "mentionGroupIds": [
8 "yxZAhjzda",
9 "QT19nXbqB"
10 ]
11}];
12</script>
13