使用 FastComments，我们可以在同一页面上放置任意数量的评论小部件。我们可以将它们全部设置为相同的 线程，它们会保持同步，或者我们可以同时让它们成为不同的线程。我们可以按需添加、移除， 并更改评论线程。
动态添加和替换评论线程 
这都是通过配置 urlId 和相关参数并在小部件实例上调用 update() 来将其替换为不同的线程完成的。
下面是一个交互示例（在左上角点击运行），允许你按需添加和切换评论线程。
我们也可以通过调用 instance.destroy 而不是 update 来移除它们。
添加与切换评论线程
Copy 
Run 
Run 1
2 <script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3
4 <div id="fastcomments-widgets"></div>
5 <div class="demo-form">
6 <section>
7 <h3>Add or Swap a Product/Comment Thread</h3>
8 <label>
9 Product Name
10 <input type="text" name="name" />
11 </label>
12 <label>
13 Product ID
14 <input type="text" name="id" />
15 </label>
16 <label>
17 Product URL
18 <input type="url" name="url" />
19 </label>
20 <label>
21 Replaces Product (id)
22 <input type="text" name="replaces_id" />
23 </label>
24 <button type="button">Add/Swap</button>
25 </section>
26 </div>
27 <script>
28 (function () {
29 const target = document.getElementById('fastcomments-widgets');
30 const tenantId = "demo"; // 在此处填写你的租户 ID
31
32 function setHeading(heading, {name, productID}) {
33 heading.innerHTML = `${name} (${productID})`;
34 }
35
36 function addWidget({name, productID, productURL}) {
37 const outer = document.createElement('div');
38 const heading = document.createElement('h5');
39 setHeading(heading, {name, productID});
40 const inner = document.createElement('div');
41 inner.append(heading);
42 outer.append(inner);
43 const widgetTarget = document.createElement('div');
44 outer.append(widgetTarget);
45 target.append(outer);
46 window.FastCommentsUI(widgetTarget, {
47 "tenantId": tenantId,
48 "pageTitle": name, // 用于通知邮件和审核仪表板
49 "url": productURL, // 用于通知邮件和审核仪表板
50 "urlId": productID,
51 "showLiveRightAway": true
52 });
53 }
54
55 function switchProduct(oldId, {name, productID, productURL}) {
56 for (const instanceWrapped of fcUIInstances) {
57 if (instanceWrapped.targetElement) {
58 const config = instanceWrapped.config;
59 if (config.urlId === oldId) {
60 const heading = instanceWrapped.targetElement.parentNode.querySelector('h5');
61 setHeading(heading, {name, productID});
62 config.pageTitle = name;
63 config.urlId = productID;
64 config.url = productURL;
65 instanceWrapped.instance.update(config);
66 return;
67 }
68 }
69 }
70 alert(`Product ${oldId} not found to replace!`);
71 }
72
73 // 添加一些小部件
74 addWidget({name: "Product A", productID: 'product-id-a', productURL: 'https://example.com/a'});
75 addWidget({name: "Product B", productID: 'product-id-b', productURL: 'https://example.com/b'});
76
77 const form = document.querySelector('.demo-form');
78 form.querySelector('button').addEventListener('click', function() {
79 const name = form.querySelector('input[name=name]').value;
80 const productID = form.querySelector('input[name=id]').value;
81 const productURL = form.querySelector('input[name=url]').value;
82 const replaces_id = form.querySelector('input[name=replaces_id]').value;
83
84 if (replaces_id) {
85 switchProduct(replaces_id, {
86 name,
87 productID,
88 productURL,
89 });
90 } else {
91 addWidget({name, productID, productURL});
92 }
93 });
94 })();
95 </script>
96 <style>
97 #fastcomments-widgets {
98 display: flex;
99 }
100 #fastcomments-widgets > div {
101 width: 100%;
102 }
103
104 .demo-form section label {
105 display: block;
106 margin-bottom: 20px;
107 }
108 </style>
109
这类似于分页的工作方式。
对于 React 和相关库，我们可以简单地 update 配置，库（React、Angular、Vue）会为我们处理刷新小部件的工作。对于 VanillaJS，我们必须像上面所示那样自己管理。
如果有任何问题，请随时在下方提问，我们会尽力帮助！