
语言 🇨🇳 简体中文
基础
外观与样式
实时评论
分页与排序
回复框
单点登录 (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 
我们在本文档中经常会提到 小部件自定义界面。
该界面可用于在不使用代码的情况下对评论小部件进行许多更改。
在创建自定义规则时,我们通常希望它应用于网站的所有页面。但是,在某些情况下,我们希望对特定页面的评论小部件进行自定义,例如应用自定义样式,或使该页面的评论匿名。你也可以例如让某些页面的实时评论立即显示,而在其他页面将其隐藏在通知按钮下。
这些都可以通过该页面上的 URL ID 输入字段实现,该字段看起来如下:
该字段中的值应与传入评论小部件的 urlId 参数匹配。如果你希望自定义规则对 urlId 不敏感,请将此字段留空或输入 *。
自 2023 年起,小部件自定义中的 URL ID 字段现在也接受模式!例如,你可以使用 */blog/* 为你的博客添加特定样式,使用 */store/* 为你的商店添加特定样式,同时仍使用相同的域名。
注意事项
- 如果你的页面有哈希参数(像 example.com#page-1) - 默认情况下,这将成为 URL ID 的一部分。
- 在迁移期间,例如从 WordPress 到 Gatsby,你可能需要在初始迁移之后迁移 URL ID 的评论值。为此,请联系我们。
在不同页面呈现相同评论 
由于 urlId 参数允许我们定义评论所绑定的页面或 id,我们只需在这些页面上将 urlId 设置为相同的值。
Run 
自定义样式 
FastComments 旨在支持自定义。评论组件本身出于安全原因运行在 iframe 中,因此要应用 自定义样式,必须遵循以下两种方法之一。
第一种,也是最简单且我们推荐的方法,是使用 小部件自定义页面。
在小部件自定义页面,查看“显示高级选项”部分,其下有一个标为“自定义 CSS”的区域:
这种方法有一些好处:
- 输入的 CSS 在发送给用户之前会被压缩,而且在编辑界面中的格式保持一致。
- 您可以获得小部件自定义界面的所有优点,例如可以为不同网站轻松地对评论组件进行不同的自定义。
- 当我们对评论组件做出更改时,您的自定义样式将作为我们发布流程的一部分得到测试。
第二种方法是在小部件配置中指定 customCSS 参数,如下:
Run 
但是,这有一些限制:
- 由于请求头的大小限制,可传递的自定义 CSS 有一定限制,超过该限制我们的服务器将拒绝请求。
- 您必须在自己的基础设施和构建系统中管理自定义 CSS。这也可能是一个优点而非缺点。
- 在这种用例中,发送自定义 CSS 会产生额外的网络开销,因为它需要先发送到我们的服务器,然后再在 iframe 内容中返回,会被发送两次。不过对于大多数负载大小而言,这并不明显。
- 常见的优化是对 CSS 进行压缩以减少网络传输大小,但使用此方法时您需要自行处理该操作。
- 当我们进行更改时,您的自定义 CSS 将不会被测试。
External CSS Files
您可以通过使用 @import 告诉小部件获取外部文件!
建议将 @import 放在自定义规则中。这样,如果我们需要对评论组件进行更改,我们可以使用我们的自动化
工具来验证您的设置。因此例如,您可以在小部件自定义 UI 中创建一个自定义规则,单击 Advanced,并在 Custom CSS 中输入:
@import url(https://example.com/styles.css);In Code - Not Recommended
您也可以通过 customCSS 属性加载外部 CSS 文件:
Run 
但是,请记住,如果您这样做,我们将无法对您的 CSS 进行测试。
User Profile Modal Styling
用户资料模态也可以使用自定义 CSS 进行样式化。然而,为确保自定义样式应用于用户资料,所有 CSS 选择器必须以 .user-profile 为前缀。没有此前缀,用户资料模态的自定义样式将被忽略。
例如:
Run 
Backwards Compatibility
在 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 评论时,我们会尝试从 http://gravatar.com/ 获取他们的头像。
但是,如果我们找不到头像,或者用户从未在其帐户中设置头像,我们将渲染一个静态默认头像图片。
要指定您自己的静态头像图片,可以使用 defaultAvatarSrc 设置。
Run 
也可以不写代码完成。在小部件自定义页面,参见 "Default Avatar" 部分。
请注意,为特定用户定义头像(例如使用 SSO)在单独的章节中进行了说明。
禁用头像 
头像可以从评论小部件中完全移除,即使用户已经设置了自己的头像。
Run 
这可以在小部件自定义页面上无需代码地进行自定义:
禁用所有默认样式 
对于较大型的自定义样式项目,通常希望从头开始,不使用任何默认样式。
可以通过将 noStyles 参数设置为 true 来移除所有默认样式,方法如下:
Run 
也可以在小部件自定义页面的“高级选项”下,无需编写代码即可进行此项设置:
从评论链接到页面 
发送通知邮件,或在像审核页面这样的用户界面中呈现评论时,能够将链接 从评论指向其所在页面会很有帮助。
如果 URL ID 不总是一个 ID,那么我们必须在别处存储 URL。这就是 "url" 属性的用途,定义如下。
Run 
一个常见用例是将评论线程绑定到一个标识符(例如文章),然后链接回特定页面,例如:
Run 
URL 不会去除常见的营销参数。默认情况下,当前页面的 URL 即为随评论存储的 URL。
默认折叠回复 
默认情况下,会显示对顶级评论的回复。
可以配置为用户必须点击顶级评论上的 "显示回复" 才能查看子评论。
Run 
可以在小部件自定义页面上无需编写代码进行此项自定义:
该设置不会影响初始加载的顶级评论数量。如果你有一个顶级评论和 29 个子评论,在启用此设置时你将:
- 看到顶级评论。
- 在该评论下看到 "显示回复 (29)"。
如果你希望在启用此选项的同时显示所有顶级评论,请将 起始页面设为 -1。
启用所见即所得 
默认情况下,FastComments 的格式化功能是通过在你的文本周围添加可见的锚点标签,比如 <b></b> 来实现的。点击工具栏
或使用快捷键会为你完成此操作。不过,有些社区可能希望选择在不使用锚点标签的情况下进行格式化。这被称为启用
WYSIWYG(所见即所得)编辑器。该编辑器的外观与默认编辑器完全相同,只是会加载一些
额外的代码,使用户能够在不使用可见锚点标签的情况下对他们的文本进行加粗、下划线等格式化。
Run 
这也可以不通过代码完成。在小部件自定义页面中,查看 "Enable Advanced Formatting" 选项。
禁用工具栏 
默认情况下,FastComments 会在撰写评论时显示一个工具栏,以便为装饰文本和上传 图像提供快捷方式。
该工具栏可以通过代码或在自定义 UI 中禁用。
Run 
这也可以在不编写代码的情况下完成。在小部件自定义页面中,查看 "禁用回复工具栏" 选项。
禁用屏蔽功能 
默认情况下,FastComments 允许用户屏蔽其他用户。屏蔽用户会导致他们的评论被屏蔽、阻止用户之间的通知等。
可能希望禁用此功能。可以按如下方式进行:
Run 
也可以通过小部件自定义界面在不编写代码的情况下完成此操作,这还能启用适当的服务器端验证:
确定要渲染的页面 
在获取和渲染评论时,评论组件需要知道从哪一页开始。默认情况下,它从 第一页开始,只渲染该页。
如果需要,可以将要渲染的确切页码作为设置 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 
此项可在小部件自定义页面的“高级选项”中无需编写代码即可自定义。您需要先启用“绝对日期”,才能在界面中看到此选项。
添加标题文本 
一些文本,例如页眉或消息,可以呈现在评论计数下方但登录状态文本上方。
我们称之为页眉,默认情况下它是隐藏的。
Run 
无需编写代码即可在小部件自定义页面的“高级选项”下进行此自定义:
将链接呈现为文本 
默认情况下,FastComments 会像这样渲染链接: https://exmaple.com - 链接 URL 会变成一个可点击的 HTML 锚点标签。
有些站点可能希望禁用此功能,例如为了阻止诈骗者。我们通过将 Comment HTML Rendering Option 设置为 Links as Text 来提供此选项。
这可以在小部件自定义页面上无须编写代码即可为整个域或某个页面进行自定义:
通过按钮切换评论 
默认情况下,FastComments 会同时呈现评论输入框和评论线程。为了节省垂直空间, 它还会在小部件被交互之前隐藏任何其他必填字段。
但是,评论小部件可以被隐藏在一个按钮后面,例如:
The button uses different translated text based on whether the comments are currently shown or not. If the comments are hidden, it uses translations.SHOW_COMMENTS_BUTTON_TEXT. If the
comments are shown, it uses translations.HIDE_COMMENTS_BUTTON_TEXT. The translations can contain the text [count] which will
be replaced by the localized count.
Run 
此功能旨在替代 hideCommentsUnderCountTextFormat 配置。
评论数会随评论线程实时更新。 如果没有评论,则不显示该按钮。
可以通过创建自定义规则并启用“点击显示评论”来在无需编码的情况下启用此功能:
自定义评论计数文本 
评论小部件顶部显示的评论计数可以自定义。
这可以替换为任何字符串,值 [count] 将被替换为计数值,并为用户本地化。
Run 
无需编码即可在小部件自定义页面上进行此项自定义:
禁用图片重定向 
默认情况下,FastComments 允许用户上传图片。 当用户点击该图片时,FastComments 默认会, 在新标签页中打开该图片以全尺寸显示。将此标志设为 true 会禁用此行为:
Run 
如果您不打算自己捕获图片点击事件(参见 onImageClicked),我们建议同时使用一些样式来去除图片看起来可点击的效果。
禁用通知铃铛 
默认情况下,FastComments 会在评论区域的右上角显示通知铃铛。
该铃铛会变为红色并显示用户收到的通知数量。以下是一些示例通知:
- 用户回复了你。
- 用户在你评论过的线程中回复了。
- 用户为你的评论点赞。
- 用户回复了你订阅的页面。
通知铃铛还提供了订阅整个页面的机制。
然而,我们可以完全禁用通知铃铛:
Run 
这也可以在不使用代码的情况下完成。在小部件自定义页面中,请参阅“Disable Notification Bell”部分。
禁用个人资料 
默认情况下,当您点击用户的头像时,FastComments 会显示该用户的个人资料。
但是,我们可以禁用此功能:
Run 
这也可以在不编写代码的情况下完成。在小部件自定义页面中,参见 "Disable Profiles" 部分。
禁用成功提示信息 
默认情况下,FastComments 在发表评论后会显示一个成功消息。可以按如下方式禁用:
Run 
也可以不用代码完成。在小部件自定义页面中:
更改 GIF 的内容评级 
默认情况下,FastComments 评论小部件会将 gif rating 设置为 pg。
可用的选项有 g、pg、pg-13 和 r。
可以在代码中或通过 UI 进行设置。我们可以在代码中这样做:
Run 
在 UI 中,只要未勾选 Disable Image Uploads?,您就可以在 Gif Picker Rating 下找到此设置。
更改投票样式 
默认情况下,FastComments 会将投票选项呈现为向上和向下的箭头,允许用户对评论进行赞成或反对投票。
但是,可以更改投票工具栏的样式。当前的选项是默认的向上/向下按钮,或者使用心形投票机制。
我们如下使用 voteStyle 标志:
Run 
我们强烈建议您无需编写代码即可完成此操作,因为这还会启用服务器端验证。在小部件自定义页面中,请参阅“投票样式”部分。
也可以禁用投票,请参阅样式选项上方的 Disable Voting。
突出显示新评论 
FastComments 提供多种方式来突出显示新评论。
首先且最重要的是,默认情况下,会触发应用内通知的评论(回复、同一线程中的回复,或你订阅的页面
上的评论),会自动突出显示,用户头像会略微发光。颜色可以通过 CSS
使用 is-unread 类进行自定义。
在过去 24 小时内发布的评论会应用 24hr 类,可用于样式化。
最后,任何在用户会话中出现的新实时评论会通过动画高亮显示数秒。这是通过
is-live CSS 类实现的,也可以自定义。
页面大小 
默认情况下,FastComments 的页面大小为 30。这包括线程中的回复。
页面大小可以在 小部件配置界面 中自定义,大小范围从 10 到 200 不等。
请注意,修改页面大小需要重新计算您帐户中的所有评论线程。 这可能需要几分钟时间。
这无法在客户端小部件中配置,因为页面在服务器端计算。
下面显示了示例配置:
页面大小可以通过创建不同的自定义规则来全局、按域名或按页面进行定制。
这将影响您可能用于通过我们的平台显示评论的所有客户端、集成和框架。
电子邮件模板 
FastComments 发送给您的客户的电子邮件可以自定义。模板、逻辑、 和翻译都可以更改。文本可以按语言/区域定制,样式 甚至可以按域名更改。 在此了解有关自定义电子邮件模板的更多信息。
用户名格式 
默认情况下,FastComments 会显示用户输入的姓名,或通过 SSO 传递给我们的姓名。
但是,可能希望以不同的方式掩盖或显示用户的姓名。例如,如果用户的姓名是 Allen Rex,您可能只想显示 "Allen R."。
这可以在 Widget Customization UI 中无需编码完成,位于名为 Commenter Name Format 的设置下:
可用的格式有:
- Capitalize (display example user as Example User)
- Last Initial (display Example User as Example U.)
- All Initials (display Example User as E. U.)
- Show "Anonymous"
更改此设置会立即生效。用户在评论区域顶部(对他们自己)仍然会看到完整的用户名,但他们的评论将显示修改后的用户名。
用户名会在服务器端被掩码以保护用户。
禁用图片上传 
默认情况下 FastComments 允许上传图片。可以通过将 noImageUploads 标志设置为 true 来禁用此功能。
Run 
此设置可在小部件自定义页面上无需编写代码即可配置:
启用搜索框 
默认情况下,评论小部件中不会显示搜索框。
但是,我们可以通过将 enableSearch 标志设置为 true 来启用它:
Run 
这也可以在不编写代码的情况下完成。在小部件自定义页面中,查看 “启用搜索框” 选项。
启用剧透功能 
我们可以通过将 enableSpoilers 标志设置为 true 来启用剧透支持:
Run 
这也可以不通过代码完成。在小部件自定义页面,请查看 "启用剧透" 选项。
当文本被高亮并点击现在可见的 SPOILER 按钮时,文本将被遮盖,直到用户将鼠标移到其上。对于暗色模式,我们采用相同的做法,但使用不同的
颜色以更好地匹配暗色模式。
这也与所见即所得编辑器兼容。
启用评论查看计数 
默认情况下,FastComments 不会跟踪谁查看了每条评论,也不会提供任何相关统计数据。
但是,我们可以启用此功能,系统将在每个用户滚动到评论时开始进行跟踪。
发生这种情况时,每条评论旁边显示的眼睛图标旁的计数将会增加。计数会实时更新,并根据用户的区域设置以缩写形式显示。
我们可以通过将 enableViewCounts 标志设置为 true 来启用此功能:
Run 
这可以在小部件自定义页面上无需编码即可自定义:
我们会跟踪查看评论的用户 ID*,因此如果你再次查看该评论,计数不会增加。如果在两年后再次查看,计数将会再次增加。
- *注:或匿名会话 ID,或用户的 IP(哈希值)。
立即显示实时评论 
默认情况下,实时评论是启用的。这意味着如果有任何评论被添加、删除、编辑或置顶,这些更改应同时显示 给查看该评论线程的所有用户。
但是,默认情况下,这些新评论将显示在一个动态出现的按钮下,按钮文本类似于 "Show 2 New Comments"。
如果新评论是直接回复页面,按钮会显示在评论线程的顶部。如果它们是回复某条特定评论, 按钮会显示在该评论下方。
这样做是为了防止页面大小不断变化,可能在用户尝试抓住滚动条时造成挫败感。
对于某些用例,例如实时竞价或在线活动,这并不是期望的行为 - 您可能希望评论小部件更像一个 "chat" 框,新评论可以 "show right away"。
因此,用于启用该功能的标志名称为: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 将按“最相关”的排序方向对评论进行排序。
“最相关”排序会同时考虑评论的发布时间和投票数来进行排序。
然后用户可以在评论小部件界面中将排序方向更改为“最旧优先”或“最新优先”。
但是,我们可以将默认值更改为这三者中的任何一个。例如,如果您想先显示最旧的评论:
Run 
我们将 defaultSortDirection 的值设置为 "OF",以将方向设置为 "OF"。
对于“最新优先”的排序方向,我们可以执行以下操作:
Run 
defaultSortDirection 的有效值为:
- MR: "Most Recent"
- NF: "Newest First"
- OF: "Oldest First"
这也可以在不编写代码的情况下完成。在小部件自定义页面中,参见“默认排序方向”部分。
请注意,每个页面中针对每种排序方向的评论都是预先计算的,因此所有排序方向的性能相同。
一次呈现所有评论 - 禁用分页 
要禁用分页,并一次性渲染所有评论,请将 startingPage 设置为 -1。
Run 
将回复框移动到评论之后 
默认情况下,评论输入区域位于评论线程的前面。但是,通过将此配置参数 设置为 true,我们可以将其移动到后面。
Run 
可以在小部件自定义页面上无需编写代码进行自定义:
限制评论长度 
评论输入字段允许输入的最大字符数可以通过 maxCommentCharacterLength 参数进行限制。
默认值为 2000。
像图片 URL 之类的内容不计入长度计算。
Run 
这可以在无需编码的情况下在小部件自定义页面上进行自定义:
禁用多行评论 
默认情况下,FastComments 允许用户输入任意行数的评论,直到达到默认的字符限制。
然而,可能希望将用户限制为只输入单行文本。一些示例用例包括在线竞价,或实时聊天,FastComments 可用于这些场景。
我们通过以下方式启用 useSingleLineCommentInput 标志:
Run 
也可以无需编写代码来实现。在小部件自定义页面中,参见“启用单行评论输入”部分。
注意,每个页面上针对每种排序方向的评论都是预先计算的,因此所有排序方向具有相同的性能。
阻止新增顶层评论 
将 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.
单点登录(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 并不需要任何框架/库——使用原生的 crypto 包即可。
使用 FastComments SSO 无需编写任何新的 API 端点。只需使用您的密钥对用户信息进行加密,然后将负载传递给评论组件。
Get Your API Secret Key
您的 API Secret 可以从 此页面 获取。您也可以通过进入 My Account,点击 API/SSO 磁贴,然后点击 “Get API Secret Key” 来找到此页面。
Comment Widget Parameters
评论组件的高级 API 文档可在 此处 找到。
下面我们详细说明这些参数的含义。
评论组件接受一个配置对象——如果您使用 FastComments,通常已经传入用于标识客户的 tenantId。
要启用 SSO,传入一个新的 "sso" 对象,该对象必须包含以下参数。这些值应在服务器端生成。
- userDataJSONBase64: 用户的 JSON 格式数据,然后进行 Base64 编码。
- verificationHash: 由 UNIX_TIME_MILLIS + userDataJSONBase64 创建的 HMAC-SHA256 哈希值。
- timestamp: Epoch 时间戳,单位为 毫秒。不能是未来的时间,也不能早于两天以前。
- loginURL: 评论组件可用于展示的登录 URL。
- logoutURL: 评论组件可用于展示的登出 URL。
- loginCallback: 如果提供了该函数(而非 login URL),评论组件在点击登录按钮时会调用此函数。
- logoutCallback: 如果提供了该函数(而非 logout URL),评论组件在点击登出按钮时会调用此函数。

用户对象

Moderators and Administrators
对于管理员和版主,请在 SSOUser 对象中传入相应的 isAdmin 或 isModerator 标志。
Notifications
要启用或禁用通知,请将 optedInNotifications 的值分别设置为 true 或 false。当用户首次在 SSO 负载中带有此值加载页面时,他们的通知设置将被更新。
另外,如果您希望用户针对他们订阅的页面上的活动收到邮件通知(而不仅仅是应用内通知),请将 optedInSubscriptionNotifications 设置为 true。
VIP Users & Special Labels
您可以使用可选字段 "displayLabel" 在用户姓名旁显示特殊标签。
Unauthenticated users
要表示未认证用户,只需不填充 userDataJSONBase64、verificationHash 或 timestamp,并提供一个 loginURL。
这些用户将无法发表评论,而是会看到登录提示(消息、链接或按钮,取决于配置)。
Direct Examples for Serializing and Hashing User Data
更多细节示例见 这里(js)、这里(java)和 这里(php)。
我们理解任何集成都可能是复杂且困难的过程。如有疑问,请随时联系您的客户代表或使用 支持页面。
自定义集成 - 简易单点登录(SSO) 
使用 Simple SSO,我们可以向评论小部件提供用户信息,这样他们在发表评论时无需输入用户名或电子邮件。
我们可以按如下方式配置 Simple SSO:
Run 
用户将会登录,并在后台创建一个 SSO 用户。如果从 API 获取,该用户的 createdFromSimpleSSO 将被设置为 true。
Notes:
- 电子邮件是 Simple SSO 的唯一标识符。
- 向 Simple SSO 提供电子邮件不是必需的,但默认情况下,他们的评论将显示为 “未验证”。 如果未提供电子邮件,则用户无法完全通过身份验证。
- 新 自 2022 年 1 月起:用户名在整个 fastcomments.com 上不必唯一
- 如果提供了电子邮件,且该用户最初不是通过 Secure SSO 创建的,Simple SSO 可以自动创建和更新 SSO 用户。
- 您可以使用
badgeConfig属性为用户指定徽章。badgeIds数组包含要与用户关联的徽章 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
要仅保护某个域或页面,我们只需配置自定义规则即可。
在自定义界面的顶部,我们会找到两个输入,域(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 集成登录。
防止匿名评论过期 
禁用电子邮件输入 
当用户发表评论且未登录时,会要求他们提供电子邮件。
这将为该用户创建一个“未验证会话”,我们会通过电子邮件要求他们验证该会话。
对于某些网站或应用,在评论或投票时不要求用户提供电子邮件可能更合适。
启用匿名评论会使电子邮件输入字段为可选。但是,我们也可以完全禁用它。首先启用 匿名评论,然后将出现禁用电子邮件输入字段的选项。
开启此项后,我们所有评论产品中的电子邮件字段将完全不显示。
请注意,在此配置下,除非用户创建账户并登录 https://fastcomments.com,否则所有评论都将处于未验证状态。
您可能想考虑禁用未验证标签.
禁用未验证标签 
默认情况下,FastComments 会为那些 具有未验证浏览器会话的用户留下的评论显示“未验证的评论”标签。有关未验证评论的更多信息,请在此处查看。
Run 
此外,此功能也可以在自定义 UI 中使用,无需编写代码:
回调 
所有用于评论小部件的库(当前为 Angular、React、Vue)都支持回调。
这些回调在配置对象中指定,并且每个库的签名相同。
支持的回调有:
- onInit
- onAuthenticationChange
- onRender
- commentCountUpdated
- onReplySuccess
- onVoteSuccess
- onImageClicked
- onOpenProfile
- onCommentSubmitStart
- onCommentsRendered
确切的签名可以在 TypeScript definitions 中找到。
下面是一个使用了所有回调的示例:
Run 
手动定义用户的区域设置 
默认情况下,FastComments 会根据用户系统和浏览器确定的区域设置来渲染评论组件。
当用户发表评论或登录时,我们会更新他们最后使用的区域设置,并在发送电子邮件时使用该设置。
这会影响评论组件如何为用户进行翻译。区域设置由用户的语言和地区组成,因此配置区域设置通常会改变向用户显示文本所使用的语言。
通过 UI
可以通过组件自定义界面定义此项。参见 "语言 / 区域" 选项:
通过代码
可以通过所需的区域设置覆盖此项。
Run 
支持的语言和区域代码
SSO 说明
如果您使用 SSO,您可能需要在用户对象中传递用户的区域设置,以便电子邮件和其他内容能够为他们正确地本地化。
页面标题 
当前页面标题会与指定的 urlId 关联,并保存以供审核工具使用。
默认情况下,此标题从 document.title 获取。
如果需要,您可以按如下方式指定自定义页面标题:
Run 
阻止新回复并禁用投票 
可以通过将 readonly 标志设置为 true 来锁定评论,从而无法留下新的评论或投票。
评论也将无法被编辑或删除。
Run 
这可以在小部件自定义页面上,为整个域或某个页面在无需编码的情况下进行自定义:
更新!
自 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 仅在评论线程中的用户评论上显示用户徽章。
但是,我们可以在小部件自定义页面启用此功能,在评论表单上方用户姓名旁显示用户徽章:
这将在顶部栏区域于用户名旁显示该用户的徽章,使他们在撰写评论时的成就和身份更加突出。
请注意,该功能必须在小部件自定义界面中启用才能生效。您也可以在代码配置中将 showBadgesInTopBar 标志设置为 false,以便在服务器级别启用时选择性地将其禁用:
Run 