Add Live Discussions to Super.So Sites
FastComments Collab Chat 将 Super.so 网站提升到一个新的层次，增加了实时内联讨论。 用户可以协作地高亮并评论文本片段，一起 - 实时！
下面我们将介绍安装步骤，整个过程只需几分钟。
第 1 步：打开设置 
首先我们需要打开代码编辑器。如果您想将 FastComments 添加到所有页面，只需在左下角选择 Code：
打开代码设置
If you want to add it to a specific page, then select Edit Custom Code in that page's settings.
现在让我们选择 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
Now paste in the Body area:
已粘贴的代码
If you see a "这是演示消息" after pasting the code:
- Ensure you're logged into your fastcomments.com account.
- Ensure you have 3rd party cookies enabled.
- Then refresh this page and copy the code snippet again. It should have
tenantIdpopulated with your tenant's identifier.
另请参见：常规评论小部件
在你的 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 帐户中即可。