
语言 🇨🇳 简体中文
基础
外观与体验
实时评论
分页与排序
回复框
单点登录 (SSO)
匿名评论
其他
自定义与配置
自定义与配置
背景
在这里,您将找到有关评论小部件所支持的每个功能和设置的深入文档。
本档将涵盖核心概念,并深入探讨每个功能领域,包含操作指南和常见陷阱。
将提供代码示例,并突出显示相关行。必要时还会提供配置页面的截图。
代码示例将使用我们的纯 JavaScript 库,但配置选项在所有版本的评论小部件(React、Vue 等)中使用完全相同的名称。
本指南中概述的大多数配置和功能无需编写任何代码。
识别您的账户 
您可能会注意到,评论小部件可以使用 Tenant ID 为 "demo",例如:
Run 
这仅用于试用和玩转评论小部件。在生产环境中,您应传入您的 Tenant ID,如下所示:
Run 
您可以在评论小部件的 账户代码片段 中找到已应用的 Tenant ID。
还可以在 API 凭证页面 找到您的 Tenant ID 并管理您的 API 密钥。
从此之后,如果您已登录 FastComments,代码示例将使用您的真实 Tenant ID(如果您在 https://fastcomments.com 上已登录)。
评论如何与页面和文章关联 
在渲染评论线程或留下评论时,FastComments 需要知道这些评论属于哪个页面、文章或产品。
为此,我们使用一种称为 “URL ID” 的标识。它可以是标识符(如字符串或数字),也可以是一个 URL。
默认情况下,如果未指定 urlId,它将使用页面的 URL。我们会获取当前页面的 URL,并清除其中的常见营销参数或跟踪标识符。
在第三方集成(如 WordPress)的情况下,我们的插件通常会使用代表当前查看信息的标识符作为 URL ID,例如文章/页面的 ID。
Run 
本文档中我们经常会提到 小部件自定义 UI。
该 UI 可用于在无需编写代码的情况下对评论小部件进行多种更改。
创建自定义规则时,我们通常希望它适用于站点的所有页面。然而,在某些情况下,我们希望对特定页面的评论小部件进行自定义,例如应用自定义样式,或将该页面的评论设为匿名。您也可以例如让某些页面的实时评论立即显示,而在其他页面则通过通知按钮隐藏。
这全部可以通过此页面上的 URL ID 输入字段实现,示例如下:
此字段的值应与传入评论小部件的 urlId 参数匹配。如果希望自定义规则对 urlId 不敏感,请将此字段留空或输入 *。
自 2023 年起,widget 自定义中的 URL ID 字段也支持模式!例如,您可以使用 */blog/* 为博客添加特定样式,使用 */store/* 为商店添加特定样式,且仍使用同一域名。
注意事项
- 如果您的页面包含哈希参数(如 example.com#page-1),默认情况下它们会成为 URL ID 的一部分。
- 在迁移期间,例如从 WordPress 迁移到 Gatsby,您可能需要在初始迁移后迁移 URL ID 评论值。为此,请联系我们。
在不同页面渲染相同的评论 
由于 urlId 参数允许我们定义评论所绑定的页面或 id,我们只需在这些页面上将 urlId 设置为相同的值。
Run 
自定义样式 
FastComments 旨在实现高度自定义。出于安全考虑,评论小部件本身运行在 iframe 中,因此要应用自定义样式,需要遵循以下两种方法之一。
第一种,也是我们首选且最简便的方法,是使用小部件自定义页面。
在小部件自定义页面,查看 “显示高级选项” 部分,其中有一个标记为 “自定义 CSS” 的区域:
此方法有以下优势:
- 输入的 CSS 在发送给用户之前会被压缩,编辑 UI 中的格式保持一致。
- 您可以获得小部件自定义 UI 的全部好处,例如可以为不同站点轻松定制评论小部件。
- 当我们对评论小部件进行更改时,您的自定义样式将作为我们发布流程的一部分进行测试。
第二种方法是通过小部件配置中的 customCSS 参数指定,如下所示:
Run 
然而,这种方式有 限制:
- 由于请求头的大小限制,传递的自定义 CSS 有上限,超过后我们的服务器会拒绝请求。
- 您必须在自己的基础设施和构建系统中管理自定义 CSS。这有时也可能是一个优势。
- 在此使用场景下,网络上会 两次 发送自定义 CSS:一次发送到我们的服务器,随后再返回到 iframe 内容中。不过对于大多数负载大小,这几乎感觉不到。
- 常见的优化是对 CSS 进行压缩以减小网络传输大小,但使用此方法时您需要自行处理。
- 当我们进行更改时,您的自定义 CSS 将不会被测试。
外部 CSS 文件
您可以使用 @import 让小部件加载外部文件!
建议将 @import 放在自定义规则中。这样,如果我们需要对评论小部件进行更改,就可以使用自动化工具验证您的设置。例如,您可以在“小部件自定义 UI” 中创建一条自定义规则,点击 高级,并在 自定义 CSS 中输入:
@import url(https://example.com/styles.css);
在代码中 - 不推荐
您也可以通过 customCSS 属性加载外部 CSS 文件:
Run 
但请记住,如果这样做,您的 CSS 将无法由我们进行测试。
用户资料模态框样式
用户资料模态框也可以使用自定义 CSS 进行样式化。不过,为确保自定义样式能够应用于用户资料,所有 CSS 选择器必须以 .user-profile 为前缀。没有此前缀,自定义样式将被忽略。
例如:
Run 
向后兼容性
在 FastComments,我们知道客户会自定义评论小部件。这本就是设计初衷——我们最不希望的是我们的产品导致您产品的设计不一致。
由于这是我们产品的重要组成部分,我们拥有一条构建流水线,能够在每次发布时对评论小部件的每位客户的更改进行审查。
如果我们发现小问题,会更新您的账户以确保发布顺利进行。如果出现重大破坏性更改,这将使我们能够暂停发布。
自定义字体 
FastComments 设计用于可定制,我们小部件使用的字体也不例外。
默认情况下,FastComments 使用 system font stack,以便在各种设备上尽可能呈现良好外观。
要定义您自己的字体,请参阅 自定义 CSS 文档。
在那里您会找到定义自定义 CSS 的方法,从而允许您设置所需的字体。
如何定义字体
要覆盖字体,我们建议使用 .fast-comments, textarea 选择器来定义您的 CSS。例如:
Run 
移除品牌标识 
对于 Pro 或 Enterprise 账户的客户,允许使用白标。只需 联系我们,我们将很乐意提供帮助。
如果您只是想从评论小部件中移除我们的徽标,这在 Flex 和 Pro 计划中会自动启用。
这些计划也为从我们平台发送的电子邮件提供相同的功能。
支持深色背景(暗色模式) 
默认情况下,FastComments 评论组件会在大多数网站上自动检测深色模式。
检测到深色模式时,FastComments 会将黑色文字/白色背景切换为黑色背景/白色文字。图像也会随之改变。
在页面加载时,组件会尝试判断评论组件背后页面背景的明暗程度。这意味着 页面可能是白色背景,但如果你将评论组件放在一个黑色背景的容器内,深色模式仍然应该 会自动启用以确保评论可读。
不过,依赖于“亮度”判断的检测机制可能不会在你期望的时候启用深色模式。要强制启用它,请将 hasDarkBackground 标志设置为 true,如下所示:
Run 
切换暗色模式 
对于允许在初始页面加载后切换深色模式的网站,这会稍微复杂一些。
首先,评论小部件库的所有当前版本(React、Vue)在它们各自的代码仓库中都有切换深色模式的示例。
对于 VanillaJS 小部件,我们需要做更多工作。首先,FastCommentsUI 返回一个包含函数 "destroy" 和 "update" 的对象。
我们可以在每次想要更新评论小部件配置时简单地调用 update 函数,如下所示。下面是使用 VanillaJS 小部件切换深色模式的完整可运行示例。
Run 
覆盖文本 
使用 FastComments,评论小部件中的所有文本都是可自定义的。
您可以覆盖单个文本,例如提交按钮,或覆盖整个评论小部件中的所有文本。
默认情况下,评论小部件中的文本会根据用户的语言环境进行翻译。不过,如果我们确信用户群使用相同的地区/语言,例如:
Run 
所有可自定义的翻译可以在 此处 的“高级选项”标签下找到。
不过,有一种更简单的方法,通过小部件自定义 UI。在那里,我们可以直接找到 EN_US 语言环境下评论小部件中显示的文本,并指定替换内容。
所有翻译覆盖目前会影响所有语言环境。
更改默认头像 
当用户首次使用 FastComments 发表评论时,我们会尝试从 https://gravatar.com/ 获取他们的头像。
但是,如果未找到头像,或用户从未在其账户中设置头像,我们将显示一个静态的默认头像图像。
要指定您自己的静态头像图像,可以使用 defaultAvatarSrc 设置。
Run 
这也可以在不编写代码的情况下完成。在小部件自定义页面中,查看 “默认头像” 部分。
请注意,为特定用户(例如使用 SSO)定义头像的内容在其单独的章节中说明。
禁用头像 
头像可以完全从评论小部件中移除,即使用户已经设置了自己的头像。
Run 
这可以在小部件自定义页面上无需代码进行设置:
禁用所有默认样式 
对于更大的自定义样式项目,可能希望从零开始,不使用任何默认样式。
通过将 noStyles 参数设置为 true 可以移除所有默认样式,如下所示:
Run 
这可以在小部件自定义页面的高级选项下,无需编写代码即可进行自定义:
从评论链接到页面 
发送通知邮件,或在像审核页面这样的用户界面中呈现评论时,能够将链接 从评论指向其所在页面会很有帮助。
如果 URL ID 不总是一个 ID,那么我们必须在别处存储 URL。这就是 "url" 属性的用途,定义如下。
Run 
一个常见用例是将评论线程绑定到一个标识符(例如文章),然后链接回特定页面,例如:
Run 
URL 不会去除常见的营销参数。默认情况下,当前页面的 URL 即为随评论存储的 URL。
默认折叠回复 
默认情况下,顶层评论的回复会显示。
可以将其配置为用户必须点击顶层评论上的“Show Replies”才能查看子评论。
Run 
这可以在小部件自定义页面上无需代码进行自定义:
此设置不会影响最初加载的顶层评论数量。如果您有一个顶层评论以及 29 条子评论,启用此设置后,您将:
- 看到该顶层评论。
- 在该评论下看到“Show Replies (29)”。
如果您希望在使用此选项的同时显示所有顶层评论,请将起始页设为 -1设置为。
启用所见即所得 (WYSIWYG) 
默认情况下,FastComments 的格式化功能是通过在文本周围添加可见的锚标签,如 <b></b> 来实现的。点击工具栏
或使用快捷键会为您完成此操作。然而,某些社区可能希望使用不带锚标签的格式化。这称为启用
WYSIWYG(所见即所得)编辑器。该编辑器看起来与默认编辑器完全相同,只是加载了一些
额外的代码,使用户能够在不使用可见锚标签的情况下加粗、下划线等其文本。
Run 
这也可以在不编写代码的情况下完成。在小部件自定义页面,查看“启用高级格式化”选项。
禁用工具栏 
默认情况下,FastComments 在撰写评论时会显示工具栏,以提供装饰文本和上传图片的快捷方式。
此工具栏可以通过代码或自定义 UI 来禁用。
Run 
这也可以在不使用代码的情况下完成。在小部件自定义页面中,查看 “Disable The Reply Toolbar” 选项。
禁用屏蔽 
默认情况下,FastComments 允许用户阻止其他用户。阻止用户会导致其评论被屏蔽,阻止用户之间的通知等。
可能需要禁用此功能。可以这样做:
Run 
这也可以在不编写代码的情况下完成,通过小部件自定义 UI 同时实现正确的服务器端验证:
确定要渲染的页面 
在获取和渲染评论时,评论组件需要知道从哪一页开始。默认情况下,它从 第一页开始,只渲染该页。
如果需要,可以将要渲染的确切页码作为设置 startingPage 传递给评论组件。
Run 
请注意,页码从零开始,因此上例渲染的是第二页。
在不重新加载页面的情况下切换评论线程 
我们已经讲过 urlId 是评论所绑定的页面或文章的 id。
另外,回顾一下,如果未定义,urlId 将默认为当前页面的 URL。
对于 SPA(Single-Page-Applications,单页应用),当评论所绑定的页面或内容在不重新加载页面的情况下动态改变时,该怎么办?
Angular、React、Vue 等
使用我们的库(例如 Angular 和 React),只需更新传递给组件的 urlId 属性即可使评论组件刷新。例如,你可以在 React 应用中看到实际效果,这里。
VanillaJS
如果使用 VanillaJS 库,情况会稍微复杂一些,因为没有像 Angular 或 React 这样的框架来处理数据绑定或状态传播。
当你实例化 VanillaJS 小部件时,它会返回一些可用于更新小部件的函数。
下面是一个实际的示例,我们在其中更改页面哈希并更新评论小部件:
Run 
绝对日期(禁用人性化时间戳) 
默认情况下,使用本地化的相对日期。例如,在最近留下的评论旁边,你可能会看到“11 分钟前”。
可能需要或希望使用绝对日期,在这种情况下,你需要将此参数设置为 true。
Run 
这可以在无需代码的情况下进行自定义,前往小部件自定义页面的“高级选项”。:
同时显示绝对与相对日期 
默认情况下,使用本地化的相对日期。例如,在最近留下的评论旁边,你可能会看到“11 分钟前”。
可能需要或希望保留此相对日期格式,同时在旁边显示完整日期,在这种情况下,你需要将此参数设置为 true。
Run 
这可以在无需代码的情况下进行自定义,位于小部件自定义页面的“高级选项”下。你需要先启用绝对日期才能在 UI 中看到此选项。
添加页眉文本 
一些文本,例如标题或消息,可以渲染在评论计数下方但登录状态文本上方。
我们称之为标题,默认情况下它是隐藏的。
Run 
这可以在无需代码的情况下进行自定义,位于小部件自定义页面的高级选项下:
将链接渲染为文本 
默认情况下,FastComments 会将链接渲染为如下形式: https://exmaple.com - 其中链接 URL 会变成可点击的 HTML 锚点标签。
某些站点可能希望禁用此功能,例如以防止诈骗者。我们通过将 Comment HTML Rendering Option 设置为 Links as Text 来实现此功能。
此设置可在无需编写代码的情况下进行自定义,可在小部件自定义页面上针对整个域或单个页面进行设置:
---使用按钮切换评论 
默认情况下,FastComments 会同时渲染评论输入框和评论线程。为了节省垂直空间, 它还会隐藏所有其他必填字段,直到用户与小部件交互。
然而,评论小部件可以隐藏在按钮后面,例如:
按钮会根据当前是否显示评论而使用不同的翻译文本。如果评论被隐藏,它使用 translations.SHOW_COMMENTS_BUTTON_TEXT。如果
评论已显示,它使用 translations.HIDE_COMMENTS_BUTTON_TEXT。这些翻译文本可以包含 [count],该占位符将在本地化计数时被替换。
Run 
这旨在取代 hideCommentsUnderCountTextFormat 配置。
计数会随评论线程实时更新。如果没有评论,按钮将不会显示。
可以通过创建自定义规则并启用“Click to Show Comments”来在无需代码的情况下启用此功能:
自定义评论计数文本 
在评论小部件顶部显示的评论计数可以自定义。
这可以替换为任意字符串,且值 [count] 将被替换为计数值,并为用户本地化。
Run 
这可以在无需代码的情况下,通过小部件自定义页面进行自定义:
禁用图片重定向 
默认情况下,FastComments 允许用户上传图片。 当用户点击该图片时,FastComments 默认会, 在新标签页中打开该图片以全尺寸显示。将此标志设为 true 会禁用此行为:
Run 
如果您不打算自己捕获图片点击事件(参见 onImageClicked),我们建议同时使用一些样式来去除图片看起来可点击的效果。
禁用通知铃铛 
默认情况下,FastComments 会在评论区域的右上角显示一个通知铃。
该铃会变红并显示用户拥有的通知数量。一些示例通知包括:
- 用户回复了您。
- 用户在您参与的线程中回复。
- 用户给您的评论点了赞。
- 用户回复了您订阅的页面。
通知铃还提供了订阅整个页面的机制。
但是,我们可以完全禁用通知铃:
Run 
这也可以在不写代码的情况下完成。在小部件自定义页面,查看“禁用通知铃”部分。
禁用个人资料 
默认情况下,FastComments 会在您点击用户头像时显示该用户的个人资料。
但是,我们可以禁用此功能:
Run 
这也可以在不编写代码的情况下完成。在小部件自定义页面,查看“禁用个人资料”部分。
禁用个人资料评论 
默认情况下,FastComments 会在用户个人资料上显示一个“个人资料评论”标签页,允许访客在某人的个人资料上留下评论。
但是,我们可以禁用此标签页:
Run 
这也可以在不编写代码的情况下完成。在小部件自定义页面中,查看“禁用个人资料评论”部分。
禁用个人资料私信 
默认情况下,FastComments 会在用户个人资料上显示一个“直接消息”标签,允许访客向用户发送直接消息。
但是,我们可以禁用此标签:
Run 
这也可以在不编写代码的情况下完成。在小部件自定义页面中,查看“禁用直接消息”部分。
禁用成功消息 
默认情况下,FastComments 在评论后会显示成功消息。可以按以下方式禁用它:
Run 
这也可以在不使用代码的情况下完成。在小部件自定义页面:
更改 GIF 的内容评级 
默认情况下,FastComments 评论小部件会将 gif rating 设置为 pg。
可用的选项有 g、pg、pg-13 和 r。
可以在代码中或通过 UI 设置。代码中可以这样做:
Run 
在 UI 中,只要未选中 Disable Image Uploads?,您可以在 Gif Picker Rating 下找到它。
更改投票样式 
默认情况下,FastComments 会将投票选项渲染为向上和向下的箭头,允许用户对评论进行赞成或反对投票。
但是,可以更改投票工具栏的样式。当前的选项是默认的上下按钮,或使用心形投票机制。
我们使用 voteStyle 标志如下:
Run 
我们强烈建议您在不使用代码的情况下完成此操作,因为它还会启用服务器端验证。在小部件自定义页面,参见 “Vote Style” 部分。
投票也可以被禁用,请参见样式选项上方的 Disable Voting。
突出显示新评论 
FastComments 提供多种方式来突出显示新评论。
首先且最重要的是,默认情况下,会触发应用内通知的评论(回复、同一线程中的回复,或你订阅的页面
上的评论),会自动突出显示,用户头像会略微发光。颜色可以通过 CSS
使用 is-unread 类进行自定义。
在过去 24 小时内发布的评论会应用 24hr 类,可用于样式化。
最后,任何在用户会话中出现的新实时评论会通过动画高亮显示数秒。这是通过
is-live CSS 类实现的,也可以自定义。
页面大小 
默认情况下,FastComments 的页面大小为 30。这包括线程中的回复。
页面大小可以在 Widget Configuration UI 中自定义,范围从 10 到 200。
请注意,修改页面大小需要重新计算您账户中的所有评论线程。这可能需要几分钟。
由于页面在服务器端计算,无法在客户端小部件中进行配置。
下面显示了示例配置:
页面大小可以通过创建不同的自定义规则全局、按域或按页面进行自定义。
这将影响您通过我们的平台显示评论时使用的所有客户端、集成和框架。
电子邮件模板 
FastComments 发送给您的客户的电子邮件可以自定义。模板、逻辑、 和翻译都可以更改。文本可以按语言/区域定制,样式 甚至可以按域名更改。 在此了解有关自定义电子邮件模板的更多信息。
用户名格式 
默认情况下,FastComments 会显示用户输入的名称,或通过 SSO 传递给我们的名称。
然而,可能需要以不同的方式掩码或显示用户的名称。例如,如果用户的名称是 Allen Rex,您可能只想显示 “Allen R.”。
这可以在 Widget Customization UI 中无需编写代码完成,位于名为 Commenter Name Format 的设置下:
可用的格式有:
- Capitalize(将示例用户显示为 Example User)
- Last Initial(将 Example User 显示为 Example U.)
- All Initials(将 Example User 显示为 E. U.)
- 显示 “Anonymous”
更改此设置的效果是即时的。用户仍会在评论区域顶部看到自己的完整用户名,但他们的评论将显示修改后的用户名。
用户名在服务器端被掩码,以保护用户。
禁用图片上传 
默认情况下,FastComments 允许上传图片。可以通过将 noImageUploads 标志设置为 true 来禁用此功能。
Run 
可以在小部件自定义页面上无需代码进行自定义:
允许媒体嵌入 
默认情况下,FastComments 不允许在评论中使用 iframe。当您启用媒体嵌入时,评论者可以粘贴来自受信任提供商(如 YouTube、Vimeo、SoundCloud 和 Spotify)的嵌入代码(<iframe> 代码片段),它将在评论中内联渲染。
出于安全考虑,这不是客户端小部件配置标志,而是服务器端设置,在每条评论保存时进行验证,因此无法从页面上打开。仅允许指向内置受信任提供商列表的 iframe。任何其他 iframe 都会被移除。
这可以在小部件自定义页面上无需代码完成:
添加您自己的提供商
如果您想允许来自未列入内置受信任列表的提供商的嵌入,请在同一页面的 "Additional Embed Domains" 字段中添加其主机名。这些主机名将在内置提供商之外被允许。匹配是精确的,因此请包含完整的主机名(例如,player.example.com)。未列出的任何内容都将被阻止。
普通评论框和 WYSIWYG 编辑器都支持粘贴嵌入。在 WYSIWYG 编辑器中,嵌入会作为可移除的块插入。
启用搜索框 
默认情况下,评论小部件中不显示搜索框。
但是,我们可以通过将 enableSearch 标志设置为 true 来打开它:
Run 
这也可以不使用代码完成。在小部件自定义页面,查看“Enable Search Box”选项。
启用剧透 
我们可以通过将 enableSpoilers 标志设置为 true 来启用剧透支持:
Run 
This can also be done without code. In the widget customization page, see the "Enable Spoilers" option.
When text is highlighted, and the now visible SPOILER button is clicked, text will be masked until the user mouses over it. For dark mode we do the same thing, with different
colors that better match dark mode.
This is also compatible with the WYSIWYG editor.
启用评论查看计数 
默认情况下,FastComments 不会跟踪谁查看了每条评论,也不提供任何相关统计。
但是,我们可以启用此功能,系统随后将在每位用户滚动到评论时开始进行跟踪。
当发生这种情况时,每条评论旁边的眼睛图标旁的计数会递增。计数会实时更新,并根据用户的语言环境进行缩写。
我们可以通过将 enableViewCounts 标志设置为 true 来启用此功能:
Run 
这可以在小部件自定义页面上无需代码进行自定义:
我们会跟踪查看评论的用户 ID*,因此如果您再次查看该评论,计数不会递增。如果您在两年后再次查看该评论,计数将会递增更多。
- *注意:或匿名会话 ID,或用户的 IP(哈希值)。
立即显示实时评论 
默认情况下,实时评论已启用。这意味着如果有任何评论被添加、删除、编辑或置顶,所有正在查看该评论线程的用户都会同时看到这些更改。
然而,默认情况下,这些新评论会出现在一个动态显示的按钮下,按钮文本类似于“显示 2 条新评论”。
如果新评论是直接回复页面的,按钮会显示在评论线程的顶部。如果它们是对特定评论的回复,按钮则会显示在该评论下方。
这样做是为了防止页面大小不断变化,避免用户在尝试抓取滚动条时产生挫败感。
对于某些使用场景,例如实时竞标或在线活动,这并不是期望的行为——您可能希望评论小部件更像一个“聊天”框,新评论能够“立即显示”。
因此,启用此功能的标志名称为:showLiveRightAway。
我们可以按如下方式打开它:
Run 
这可以在小部件自定义页面上无需代码进行自定义:
禁用实时评论 
默认情况下,FastComments 将启用实时评论。
这意味着评论线程的每个观看者都应看到相同的内容。
例如,如果添加了一条评论,该评论应显示。如果评论被编辑或删除, 则这些评论会对线程的所有观看者进行相应的编辑或删除。投票以及所有的审核操作也是如此。
但是,我们可以禁用此功能:
Run 
这也可以在不使用代码的情况下完成。在小部件自定义页面,查看“禁用实时评论”部分。
将新实时评论置于底部 
默认情况下,实时发布的新评论会出现在评论列表的顶部。
启用此选项后,实时发布的新评论将改为添加到列表底部。这会影响用户在查看评论线程时实时发布的评论的显示位置。
Run 
启用此设置后:
- 其他用户实时发布的新评论将出现在评论列表的底部
- 用户将在实时中看到新评论出现在现有评论之下
- 这只影响实时评论更新 - 不影响初始页面加载
- 当用户跟随讨论时,这有助于保持阅读流畅性
请注意,此设置仅影响实时到达的新评论的放置位置。它不会影响页面加载时的初始排序顺序。
启用无限滚动 
默认情况下,FastComments 小部件会按垂直方向调整大小以适应所有可见评论。分页通过当前页面末尾的 "View Next" 按钮实现,因为我们发现这种交互对大多数用户来说是最为舒适的。
但是,在某些情况下更偏好使用无限滚动。例如,我们在 Stream Chat 产品中使用此功能。
我们可以通过将 enableInfiniteScrolling 标志设置为 true 来隐藏 "View Next" 按钮并切换到无限滚动:
Run 
这还需要添加自定义 CSS。为 .comments 选择器添加自定义 CSS 以启用滚动,例如:
Run 
下面是一个完整的工作示例:
Run 
在上例中我们使用了 customCSS 属性,但出于性能原因,建议改为使用 Widget Configuration UI。 查看自定义 CSS 文档。
更改默认排序方向 
默认情况下,FastComments 会按“最相关”排序方向对评论进行排序。
“最相关”排序会考虑评论留下的时间以及投票数量来进行排序。
用户随后可以在评论小部件 UI 中将排序方向更改为“最旧”或“最新”。
但是,我们可以将默认值更改为这三种之一。例如,如果您想先显示最旧的评论:
Run 
我们将 defaultSortDirection 的值设置为 “OF”,以将方向设为 “OF”。
对于“最新优先”排序方向,我们可以这样做:
Run 
defaultSortDirection 的有效值包括:
- MR: “最近”
- NF: “最新优先”
- OF: “最旧优先”
这也可以在不编写代码的情况下完成。在小部件自定义页面中,查看“默认排序方向”部分。
请注意,每个页面针对每种排序方向的评论都是预先计算好的,因此所有排序方向的性能相同。
一次渲染所有评论 - 禁用分页 
要禁用分页,并一次性渲染所有评论,请将 startingPage 设置为 -1。
Run 
将回复框移动到评论之后 
默认情况下,评论输入区域位于评论线程的前面。但是,通过将此配置参数设置为 true,我们可以将其移动到后面。
Run 
这可以在小部件自定义页面上无需代码进行自定义:
限制评论长度 
评论输入字段允许输入的最大字符数可以通过 maxCommentCharacterLength 参数进行限制。
默认值为 2000。
类似图片 URL 的内容不计入字符长度的计算。
Run 
这可以在小部件自定义页面上无需代码进行设置:
禁用多行评论 
默认情况下,FastComments 会允许用户输入任意行数的评论,直至默认字符限制。
然而,可能需要限制用户只能输入单行文本。示例用例包括在线竞标或实时聊天,FastComments 可用于这些场景。
我们按如下方式启用 useSingleLineCommentInput 标志:
Run 
这也可以不通过代码实现。在小部件自定义页面,查看 “Enable Single-Line Comment Input” 部分。
请注意,每个页面的每个排序方向的评论都是预先计算的,因此所有排序方向的性能相同。
阻止新的顶级评论 
将 noNewRootComments 设置为 true 会导致小部件隐藏顶层回复区域,但仍允许用户回复
子评论。你可以例如在页面加载时有条件地设置此项,只允许某些用户留下顶级评论。
Run 
最大回复深度 
默认情况下,FastComments 允许回复无限嵌套,形成一个线程结构,用户可以无限地对回复进行回复。
maxReplyDepth 选项允许您限制回复线程的最大深度。当达到最大深度时,用户将不会在该级别的评论上看到回复按钮。
Run 
With maxReplyDepth set to 2:
- 用户可以在顶层发表评论 (depth 0)
- 用户可以回复顶级评论 (depth 1)
- 用户可以回复这些回复 (depth 2)
- 超出 depth 2 不再允许进一步回复
Setting to 1 would only allow replies to top-level comments, creating a flatter discussion structure.
Setting maxReplyDepth to 0 would disable all replies, allowing only top-level comments. If not specified, replies can be nested without limit.
要求接受服务条款 
FastComments 允许您在提交评论之前,要求首次评论的用户接受您的服务条款。
启用后:
- 匿名用户 将在每次评论时看到服务条款复选框
- 已认证用户 只会在他们的首次评论时或当您更新服务条款时看到复选框
Configuration
导航至小部件自定义页面并勾选 “Require Terms of Service acceptance” 复选框。启用后,您将看到以下选项:
- TOS 文本模式:默认情况下,复选框显示 "I agree to the Terms of Service and Privacy Policy",并带有指向两个文档的链接。选择 "Customize text per locale" 以为每种语言提供您自己的文本。
- TOS 最近更新日期:当您更新服务条款时,设置此日期。之前在此日期之前接受的用户将需要再次接受。
How It Works
- TOS 接受时间戳按用户和评论分别存储
- 当用户接受 TOS 时,日期会记录在其用户资料中(按租户)
- 如果您设置的 "Last Updated" 日期晚于用户的接受日期,他们将需要重新接受
- 对于无法追踪的匿名用户,复选框会出现在每次评论提交时
单点登录 (SSO) 概述 
SSO,或单点登录,是一组约定,用于允许您或您的用户在不必创建另一个账号的情况下使用 FastComments。
假设您不允许匿名评论,发表评论需要一个账号。我们让这个注册流程非常简单——用户在评论时只需留下他们的邮箱。 不过,我们也理解即便如此,某些站点仍希望尽量减少摩擦。
我们可以通过为整个站点只保留一个登录流程来减少这种摩擦。
How do I get it?
所有账号类型目前都可访问 SSO。不过,SSO 用户的最大数量会根据您的套餐而有所不同。与其他功能一样,Pro 计划及以上提供直接的开发支持。
我们先比较这些选项,然后详细介绍每一种。
User and Comment Migrations
从像 Disqus 这样的具有 SSO 的平台迁移时,您通常已经拥有用户及其评论。
评论作为迁移的一部分被导入,可以通过 API、我们的导入 UI 或客服支持完成。如果导入 UI 支持您正在迁移的平台,则优先使用导入 UI,因为它集成了错误处理、头像和媒体的提取与上传,以及批处理作业监控系统。
如果使用导入 UI(位于 Manage Data -> Imports)则头像及其他媒体会自动迁移。
用户本身会在首次查看评论线程时自动被添加。或者,也可以通过 API 预先添加,但这样做并没有太多优势。
如果评论被导入,而 SSO 用户没有通过 API 手动添加,那么当用户首次查看任何评论线程并创建账户时,评论会自动迁移到该用户的账户。之后他们就可以管理、编辑和删除他们最初发表的评论。
自动迁移是通过邮箱或用户名完成的。有些平台在导出时不提供邮箱,例如 Disqus,因此在这种情况下我们会回退到使用用户名。
- 只要您在 SSO payload 中传入匹配的用户名和一个邮箱,我们就会将该邮箱添加到各个评论对象中,以便通知和提及功能能够正常工作。
如果希望在一次性导入评论和用户,可以在通过 API 导入用户后与支持团队合作,将评论迁移到各自用户的账户。
总结来说,迁移的最简路径是:
- 导入评论。
- 如果使用
Manage Data -> Imports中的导入 UI,头像和其他媒体会自动迁移。
- 如果使用
- 设置 Secure 或 Simple SSO。
- 让迁移在每个用户首次登录时自动发生。
- 如果用户的评论少于 50k,通常这会在页面加载时增加不到一秒的时间。
WordPress Users
如果您使用我们的 WordPress 插件,则无需编写任何代码!只需转到插件的管理页面,点击 SSO 设置,然后启用。
这会带您进入一个单按钮向导,该向导将为您创建 API key,将其发送到您的 WordPress 安装并开启 SSO。我们已将此过程整合为单按钮操作以简化流程。
注意,如果您是第一次安装该插件,则必须完成设置流程,之后才能看到包含 SSO 设置按钮的管理页面。
WordPress SSO - Moderators
请注意,当前要在使用 FastComments WordPress 插件评论时在版主旁显示 “Moderator” 徽章, 他们还必须在 FastComments 仪表板中被添加为版主,并且其邮箱已通过验证。
Custom Integrations
对于自定义集成,有两种选择。
Option One - Secure SSO
使用 Secure SSO 时,FastComments 可以确定正在发表评论、投票和阅读评论的用户确实是您站点上的真实用户。
只要您创建了有效的 payload,用户就会始终拥有无缝的评论体验。
使用 Secure SSO 时,SSO payload 在 服务器端 使用 HMAC 验证创建,然后传递到 客户端 的小部件中。
使用 Secure SSO 时,用户的账户与其余 FastComments 用户库是 完全独立 的。这意味着如果我们有两个合作方 Company A 和 Company B,每一方都可以有一个用户名为 "Bob" 的 SSO 用户。
Requirements
- 需要一些后端开发基础知识。
- 需要了解如何处理秘密 API 密钥。
- 需要一些 API 开发或服务器端渲染的基础知识。
Pros
- 安全。
- 无缝的评论体验。
Cons
- 需要后端开发。
Updating User Data
使用 Secure SSO 时,每次您传递 SSO 用户 payload,我们都会用最新信息更新该用户。例如,如果
用户的用户名为 X,而您在 SSO payload 中传入 Y,那么他们的用户名将变为 Y。
如果您想使用这种方法移除某些值,请将其设置为 null(而非 undefined)。
Secure SSO API
我们还提供与 SSO 用户交互的 API。参见 文档。
注意,在使用 Secure SSO 时,用户会在页面加载时在后台自动创建。您不必批量导入用户。
Option Two - Simple SSO
Secure SSO 的替代方案是简单地将用户信息传递给评论小部件。
使用 Simple SSO 时并不强制提供邮箱,但如果没有邮箱,他们的评论将显示为 “Unverified”。
注意! 截至 2022 年初,使用 Simple SSO 的用户名不需要在整个 FastComments.com 上唯一。
理想情况下,仅当在不提供后端访问的平台上开发时才选择 Simple SSO。
Requirements
- 需要一些客户端开发的基础知识。
- 至少需要知道用户的邮箱。
Pros
- 简单。
- 所有活动仍会被验证。
- 用户无需输入其用户名或邮箱。
Cons
- 比 Secure SSO 安全性低,因为客户端的 payload 可能被伪造以冒充任意用户。
Simple SSO API
通过 Simple SSO 流程自动创建的用户以 SSOUser 对象形式存储。可以通过 SSOUser API 访问和管理它们。参见 文档。
自定义集成 - 安全单点登录 (SSO) 
FastComments Secure SSO 使用 HMAC-SHA256 加密作为实现 SSO 的机制。首先我们将介绍整体架构、提供示例以及详细步骤。
也有一些关于从其他具有类似 SSO 机制的提供商迁移以及差异的文档。
流程如下所示:
由于 Secure SSO 涉及全栈开发,完整可运行的 Java/Spring、NodeJS/Express 和 原生 PHP 的示例代码当前位于 GitHub 上。
尽管我们在 NodeJS 示例中使用 ExpressJS,在 Java 示例中使用 Spring,但在这些运行时中实现 FastComments SSO 并不需要任何框架/库 —— 原生的加密包就可以工作。
使用 FastComments SSO 不需要编写任何新的 API 端点。只需使用您的密钥对用户信息进行加密并将负载传递给评论小组件即可。
获取您的 API Secret Key
您的 API Secret 可以从 此页面 获取。您也可以通过转到“我的账户”,点击 API/SSO 磁贴,然后点击“Get API Secret Key”来找到此页面。
评论小组件参数
评论小组件的高级 API 文档可以在 此处 找到。
下面我们详细说明这些参数的含义。
评论小组件接收一个配置对象 —— 如果您正在使用 FastComments,您已经传递了该对象以传递您的客户 ID(称为 tenantId)。
要启用 SSO,请传入一个新的 "sso" 对象,该对象必须具有以下参数。其值应在服务器端生成。
- userDataJSONBase64: 用户的数据,JSON 格式,然后进行 Base64 编码。
- verificationHash: 由 UNIX_TIME_MILLIS + userDataJSONBase64 创建的 HMAC-SHA256 哈希。
- timestamp: 纪元时间戳,单位为 毫秒。不得为将来时间,且不能早于两天之前。
- loginURL: 评论小组件可用于让用户登录的 URL。
- logoutURL: 评论小组件可用于让用户登出的 URL。
- loginCallback: 如果提供此项而不是 login URL,评论小组件在点击登录按钮时会调用的函数。
- logoutCallback: 如果提供此项而不是 logout URL,评论小组件在点击登出按钮时会调用的函数。

用户对象

版主和管理员
对于管理员和版主,在 SSOUser 对象中传递相应的 isAdmin 或 isModerator 标志。
通知
要启用或禁用通知,请将 optedInNotifications 的值分别设置为 true 或 false。当用户第一次在 SSO 有效负载中加载页面时,其通知设置将被更新。
此外,如果您希望用户接收有关他们订阅页面活动的电子邮件通知(而不仅仅是应用内通知),请将 optedInSubscriptionNotifications 设置为 true。
VIP 用户 & 特殊标签
您可以使用可选的 "displayLabel" 字段在用户名称旁显示特殊标签。
未认证用户
要表示未认证用户,只需不填充 userDataJSONBase64、verificationHash 或 timestamp。提供一个 loginURL 即可。
这些用户将无法发表评论,而是会看到一个登录提示(消息、链接或按钮,取决于配置)。
序列化和哈希用户数据的直接示例
更多示例详见 此处(js)、此处(java) 和 此处(php)。
我们理解任何集成都可能是复杂且令人头疼的过程。如有疑问,请随时联系您的客户代表或使用 支持页面。
自定义集成 - 简易单点登录 (SSO) 
使用 Simple SSO,我们可以向评论小部件提供有关用户的信息,这样他们就不必在发表评论时输入用户名或电子邮件地址。
我们可以按如下方式配置 Simple SSO:
Run 
用户将被登录,并将在后台创建一个 SSO 用户。如果从 API 获取该用户,则该用户的 createdFromSimpleSSO 将被设置为 true。
Notes:
- 电子邮件是 Simple SSO 的唯一标识符。
- 使用 Simple SSO 提供电子邮件并不是必需的,但默认情况下他们的评论将显示为 "Unverified"。 如果未提供电子邮件,用户将无法完成完全身份验证。
- NEW 自 2022 年 1 月起:用户名不必在整个 fastcomments.com 上唯一
- 如果提供了电子邮件,且该用户最初不是通过 Secure SSO 创建的,Simple SSO 可以自动创建和更新 SSO 用户。
- 你可以通过
badgeConfig属性为用户指定徽章。badgeIds数组包含要与用户关联的全局徽章 ID。pageBadgeIds数组包含作用于当前页面(urlId)的徽章 ID — 这些徽章仅在分配它们的页面上显示。如果将override设置为true,它将替换现有显示的徽章(全局和页面范围的徽章分别独立覆盖);如果为false,则会在现有徽章上追加。
自定义集成 - 从 Disqus SSO 迁移 
Disqus 与 FastComments Secure SSO 之间最大的区别是 Disqus 使用 SHA1 进行加密,而我们使用 SHA256。
这意味着从 Disqus 迁移很容易 - 将所使用的哈希算法从 SHA1 改为 SHA256 并更新传递给 UI 的属性名称。
自定义集成 - 从 Commento SSO 迁移 
Commento 使用一种截然不同的 SSO 方法 - 他们要求你有一个端点,他们会调用该端点来验证用户。FastComments 则相反 - 只需使用你的密钥对用户的信息进行编码和哈希并传递即可。
使用单点登录保护评论线程 
FastComments SSO (此处详情) 为您的用户提供了一种无需登录其他平台即可发表评论的方式。
然而,仅此并不能保护您的评论线程,因为默认情况下评论数据是公开信息——任何能够查看页面的人都可以看到评论。
通过更改设置,我们可以限制只有管理员或有效的 SSO 用户才能获取评论。
No-Code Setup
当 SSO 设置完成后,我们可以通过创建一个 自定义规则 来防止查看和交互我们的评论线程。
操作时,搜索 SSO,即可找到此选项:
启用后保存自定义规则。
Only Protect a Certain Domain or Page
要仅保护特定的域名或页面,只需相应地配置自定义规则即可。
在自定义 UI 顶部,我们会看到两个输入框,Domain(域名)和 URL ID(页面标识)。
若只保护特定域名,请在 “domain” 字段中输入相应的域名。
若保护特定页面,请在 “URL ID” 字段中输入页面 URL。如果您使用 FastComments 的自定义集成,也可以在此处输入一种 ID 而非 URL。
Security Levels
在要求 SSO 时,您需要决定是使用 Simple SSO 还是 Secure SSO。若选择 Simple SSO,则两者均被允许;若选择 Secure SSO,则内容必须使用使用您 API 密钥哈希后的 Secure SSO 负载获取,才能被查看。
当您选择 “Require SSO To View Comments” 时,安全级别选项将会出现。
Protection Beyond Reading
启用此选项后,页面或域名将只能在用户通过 SSO 登录后才能发表评论。
Gotchas
在您集成 SSO 之前创建的评论的用户,将无法看到这些评论,除非他们通过您的 SSO 集成登录。
允许匿名评论 
By default, FastComments will require an email to comment. It does not have to be a valid email, however until the user clicks a link sent to them, their comment will display an "Unverified Comment" label.
默认情况下,FastComments 在发表评论时会要求提供电子邮件。电子邮件不必是有效的,但在用户点击发送给他们的链接之前,他们的评论会显示“未验证的评论”标签。
However, we can remove the email requirement. The email input field will still show, but it will no longer be required.
但是,我们可以取消电子邮件的必填要求。电子邮件输入字段仍会显示,但不再是必填项。
This can be configured via the widget customization UI:
可以通过小部件自定义 UI 进行配置:
禁用电子邮件输入 
When users comment, and they are not logged in, they will be asked to provide their email.
This will create an "unverified session" for that user, and we will ask them to verify that session via email.
For some sites, or applications, it's desirable not to ask the user for their email when commenting or voting.
Enabling anonymous commenting makes the email input field optional. However, we can disable it completely. First, enable anonymous commenting, and then the option to disable the email input fields will appear.
With this on, the email fields will not show at all in all of our commenting products.
Note that, with this configuration, all comments will be unverified unless the user creates an account and logs into https://fastcomments.com.
You may want to consider 禁用未验证标签.
禁用未验证标签 
默认情况下,FastComments 会为留下的评论显示“未验证评论”标签,针对已留下评论的用户 其浏览器会话未验证。了解更多关于未验证评论的内容,请点击此处。
Run 
此外,您可以在自定义 UI 中使用此功能,而无需编写代码:
回调 
所有评论小部件的库(目前包括 Angular、React、Vue)都支持回调。
回调在配置对象中指定,对每个库的签名相同。
支持的回调包括:
- onInit
- onAuthenticationChange
- onRender
- commentCountUpdated
- onReplySuccess
- onVoteSuccess
- onImageClicked
- onOpenProfile
- onCommentSubmitStart
- onCommentsRendered
可以在TypeScript 定义中找到确切的签名。
以下是使用所有回调的示例:
Run 
手动定义用户的语言环境 
默认情况下,FastComments 会根据用户的系统和浏览器确定的语言环境来渲染评论小部件。
当用户发表评论或登录时,我们会更新他们最近使用的语言环境,并将其用于发送电子邮件等。
这会影响评论小部件为用户呈现的翻译内容。语言环境由用户的语言和地区组成,因此配置语言环境通常会更改向用户显示文本的语言。
Via The UI
这可以通过小部件自定义 UI 定义。请参阅 “语言/地区” 选项:
Via Code
这可以使用所需的语言环境进行覆盖。
Run 
Supported Languages and Locale Codes
You can find the complete list of supported languages and the corresponding locale codes here.
SSO Note
如果您使用 SSO,可能需要在用户对象中传递用户的语言环境,以便电子邮件和其他内容能够为其正确本地化。
页面标题 
当前页面标题会与指定的 urlId 关联,并保存以供审核工具使用。
默认情况下,此标题从 document.title 获取。
如果需要,您可以按如下方式指定自定义页面标题:
Run 
阻止新回复并禁用投票 
通过将 readonly 标志设为 true,可以锁定评论,从而不允许留下新评论或投票。
评论也将无法被编辑或删除。
Run 
这可以在无需代码的情况下,通过小部件自定义页面为整个域或单个页面进行设置:
Update!
自 2022 年 11 月起,管理员和版主可以通过回复区域上方的三点菜单实时锁定或解锁线程。
这将阻止新评论,同时仍然允许投票,并允许用户在需要时删除自己的评论,而 readonly 则不允许这些操作。
这对应于 Page API 中的 isClosed 字段。
评论计数与统计所有嵌套回复 
评论小部件顶部显示的评论计数可以显示所有“顶级”评论,意思是那些 直接回复页面或文章本身的回复,或者它可以是所有嵌套评论的计数。
默认情况下,这是 true - 它是后者的计数 - 所有评论。在旧版本的评论小部件中,默认值是 false。
我们可以通过将 countAll 标志设置为 true 来更改行为,使其成为所有嵌套评论的计数。
Run 
如果我们希望计数仅反映顶级评论,我们将该标志设置为 false。
Run 
目前无法在不修改代码的情况下进行自定义。
启用评论者链接 
默认情况下,FastComments 只会要求用户提供评论内容、用户名和电子邮件。
然而,在某些情况下,您可能希望用户留下指向其个人博客或网站的链接。
我们可以通过将 enableCommenterLinks 标志设置为 true,来启用显示一个额外的输入字段,以填写用户的网站 URL:
Run 
当提供该 URL 时,用户的账户将被更新,且其过去和未来所有评论中的用户名都将链接到该 URL。
这可以在小部件自定义页面上无需编写代码进行自定义:
审核组 
一个由 审核组 页面生成的 id 列表。
当指定后,使用该配置留下的评论将包含相同的一组 moderationGroupIds。
如果某个 Moderator 定义了一个或多个 审核组,他们将
只会在与其分组相关联的 Moderate Comments 页面中看到评论。
Run 
提及群组 ID 
用于 @mentions 自动完成 的 ID 列表。当你希望在用户没有交集群组时防止标记他们时非常有用。
当指定后,输入 @ 字符后,自动完成中只会提供属于其他群组的用户。
Run 
第三方 Cookie 绕过 
对于身份验证,FastComments 依赖浏览器中启用第三方 Cookie。若未启用,用户必须始终留下电子邮件才能发表评论(除非隐藏了电子邮件输入字段),并且他们的评论默认会显示为未验证。
为了解决此问题,您可以启用第三方 Cookie 绕过。
启用此设置后,会出现一个小弹窗,显示用户正在登录的消息。该弹窗会在用户与评论小部件交互时出现,例如当他们留下评论时。
我们可以通过在代码中将 enableThirdPartyCookieBypass 标志设为 true 来实现:
Run 
我们也可以通过小部件自定义 UI 设置此项,位于 Enable Third-Party Cookie Popup 下:
在顶部栏显示徽章 
默认情况下,FastComments 只会在评论线程中的评论上显示用户徽章。
然而,我们可以通过在小部件自定义页面中启用此功能,将用户徽章显示在评论表单上方的姓名旁边:
这将在顶部栏区域将用户的徽章与其姓名并排显示,使他们在撰写评论时的成就和状态更加突出。
请注意,必须在小部件自定义 UI 中启用此功能才能生效。您可以在代码配置中可选地将 showBadgesInTopBar 标志设置为 false,以在服务器级别已开启时仍选择性地禁用它:
Run 
显示在线用户列表 
默认情况下,FastComments 不会在页面上显示用户列表。
您可以在评论小部件旁边渲染当前正在查看页面的用户列表。该列表会实时更新,随着用户加入和离开,并显示他们的姓名、头像和在线指示器。
有三种布局选项:
1- 顶部:在评论上方渲染的水平行重叠头像。2- 左侧:在小部件左侧渲染的带有姓名和在线点的侧边栏。3- 右侧:在小部件右侧渲染的相同侧边栏。
设置 usersListLocation 标志以启用此功能:
Run 
默认情况下,列表仅显示当前在线的用户。若要同时包括过去在页面上发表评论但当前未在观看的用户,请将 usersListIncludeOffline 设置为 true:
Run 
过去的评论者渲染时不带绿色在线点,以便清楚地显示当前在场的用户。
拥有私人资料的用户会显示通用头像和“私人资料”标签,以便在不泄露身份的情况下保持计数准确。
这也可以在无需代码的情况下进行配置。在小部件自定义页面,查看“用户列表位置”选项。当位置设置为除“关闭”之外的任何值时,会在其下方出现“包括过去的评论者”复选框。
过去 500 名实时用户,列表最多延迟 30 秒。