为 Super.so 网站添加实时讨论
FastComments Collab Chat 将 Super.so 网站提升到一个新的层次，增加了实时内联讨论。 用户可以协作地高亮并评论文本片段，一起 - 实时！
下面我们将介绍安装步骤，整个过程只需几分钟。
步骤 1：打开设置 
首先我们需要打开代码编辑器。如果你想将 FastComments 添加到所有页面，只需在左下角选择 Code：
打开代码设置
如果你想将其添加到特定页面，请在该页面的设置中选择 Edit Custom Code。
现在让我们选择 Body 选项卡。这一步非常重要！ 将代码片段安装在 Head 中是不起作用的。
选择 Body
现在你可以进行第 2 步了。
步骤 2：添加预制代码
在下一步中，你需要复制下面预先制作好的小部件代码。
只要你已登录 FastComments.com，下面的代码片段就会自动包含你的账户信息。让我们复制它：
Super.so FastComments 协作聊天代码
Copy 
1
2<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
3<script>
4 (function () {
5 let currentPathname = window.location.pathname;
6 let currentWidget = null;
7 let currentTopBar = null;
8
9 function load() {
10 if (!window.FastCommentsCollabChat) {
11 console.log('...no script, trying again...');
12 return setTimeout(load, 100);
13 }
14
15 const target = document.querySelector('.super-content');
16 if (!target || !target.innerHTML || target.innerHTML.length < 100) {
17 console.log('...no content, trying again...');
18 return setTimeout(load, 100);
19 }
20
21 // 清理已存在的实例
22 if (target.fastCommentsInstance) {
23 target.fastCommentsInstance.destroy();
24 }
25
26 // 清理已存在的顶部栏（如果有）
27 if (currentTopBar && currentTopBar.parentNode) {
28 currentTopBar.parentNode.removeChild(currentTopBar);
29 }
30
31 // 创建新的顶部栏
32 const topBarTarget = document.createElement('div');
33 target.parentNode.insertBefore(topBarTarget, target);
34 topBarTarget.style.maxWidth = 'var(--layout-max-width)';
35 topBarTarget.style.margin = '0 auto';
36 currentTopBar = topBarTarget;
37 currentWidget = target;
38
39 // 初始化 FastComments 协作聊天
40 target.fastCommentsInstance = FastCommentsCollabChat(target, {
41 tenantId: "demo",
42 topBarTarget: topBarTarget
43 });
44
45 // 更新当前路径
46 currentPathname = window.location.pathname;
47 }
48
49 // 初始加载
50 load();
51
52 // 每 500ms 检查一次变化
53 setInterval(() => {
54 // 如果路径变化则重新加载
55 if (window.location.pathname !== currentPathname) {
56 console.log('Pathname changed, reloading...');
57 load();
58 return;
59 }
60
61 // 如果小部件被移除则重新加载
62 if (currentWidget && !currentWidget.parentNode) {
63 console.log('Widget removed, reloading...');
64 load();
65 return;
66 }
67
68 // 如果容器被清空则重新加载
69 const target = document.querySelector('.super-content');
70 if (target && target.innerHTML.length < 100) {
71 console.log('Container emptied, reloading...');
72 load();
73 }
74 }, 500);
75 })();
76</script>
77
现在将其粘贴到 Body 区域：
粘贴的代码
如果你在粘贴代码后看到“这是一条演示消息”：
- 确保你已登录你的 fastcomments.com 账户。
- 确保你已启用第三方 Cookie。
- 然后刷新此页面并再次复制代码片段。此时
tenantId应已填充为你租户的标识符。
另请参阅：常规评论小部件
在你的 Super.so Notion 文章中添加实时评论小部件
除了 Collab Chat，你还可以在 Notion 文章的底部添加传统的评论小部件。这样读者可以发表评论并就整篇文章进行讨论。
安装步骤
复制以下代码并将其粘贴到 Super.so 站点设置的 Body 部分：
Super.so FastComments 实时评论小部件
Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3<script>
4 (function () {
5 let currentPathname = window.location.pathname;
6 let currentWidget = null;
7
8 function load() {
9 if (!window.FastCommentsUI) {
10 console.log('...no script, trying again...');
11 return setTimeout(load, 100);
12 }
13
14 const contentArea = document.querySelector('.notion-root');
15 if (!contentArea || !contentArea.innerHTML || contentArea.innerHTML.length < 100) {
16 console.log('...no content, trying again...');
17 return setTimeout(load, 100);
18 }
19
20 // 清理现有实例
21 if (contentArea.fastCommentsInstance) {
22 contentArea.fastCommentsInstance.destroy();
23 }
24
25 // 创建新的目标容器
26 const target = document.createElement('div');
27 contentArea.append(target);
28 currentWidget = target;
29
30 // 初始化 FastComments
31 contentArea.fastCommentsInstance = FastCommentsUI(target, {
32 tenantId: "demo",
33 urlId: window.location.pathname
34 });
35
36 // 更新当前路径名
37 currentPathname = window.location.pathname;
38 }
39
40 // 初始加载
41 load();
42
43 // 每 500 毫秒检查一次是否有更改
44 setInterval(() => {
45 // 如果路径名已更改则重新加载
46 if (window.location.pathname !== currentPathname) {
47 console.log('Pathname changed, reloading...');
48 load();
49 return;
50 }
51
52 // 如果小部件被移除则重新加载
53 if (currentWidget && !currentWidget.parentNode) {
54 console.log('Widget removed, reloading...');
55 load();
56 return;
57 }
58
59 // 如果容器被清空则重新加载
60 const contentArea = document.querySelector('.notion-root');
61 if (contentArea && contentArea.innerHTML.length < 100) {
62 console.log('Container emptied, reloading...');
63 load();
64 }
65 }, 500);
66 })();
67</script>
68
重要说明
- 评论小部件将显示在你的 Notion 文章底部
- 每个页面根据 URL 路径获得自己的唯一评论线程
- 请确保将
"demo"替换为你 FastComments 帐户中的实际 tenant ID - 该小部件会自动处理 Super.so 的动态页面加载
成功
成功！现在您应该可以看到已安装的 FastComments。
这就是它应该呈现的样子 - 您应该能够选择一些文本来讨论它。如果没有，或者您想更改其外观，请联系支持。
开始讨论
恭喜您已使用 Super 成功设置 FastComments！如果您遇到 Domain Error，或者想了解如何自定义评论区域，请继续阅读！
域名错误
您可能会遇到如下授权错误：
域配置缺失
这是因为 FastComments 不知道应该允许您的帐户在该域上使用。
在这种情况下，解决方法很简单。您只需将您的站点添加到您的 FastComments.com 帐户中即可。
自定义
FastComments 旨在可定制以匹配您的站点。
如果您想添加自定义样式或调整配置，请查看我们的自定义与配置文档了解具体做法。