Webflow 上的公开评论不必自己养后端

Webflow 确实有留言功能，只是跟这件事无关

搜这个题目常常会搜歪，因为 Webflow 本身就带着一套留言功能。它住在 Designer 里，服务的是搭站点的人：设计师在某个版块上留一句话，客户回一句，处理完就标成已解决。这些一个字都到不了发布出去的页面，读你博客文章的访客也看不见。

公开评论是另一回事，里面有三件 Webflow 没有解决的事：知道写的人是谁、把写下来的东西留住、让你把不该留的删掉。CMS 存的是你自己写的内容，Forms 收上来的东西只有你读得到。这两样都不构成对话。

先读一段真在跑的讨论串，再去粘代码

在检查别的之前，先检查方案

两半各自的去处

加载器和挂载元素去的地方不一样，把两者搞混是最常见的第一次失败。加载器管全站，位置在 Site settings 的 Custom code 标签页、Footer code 字段，Webflow 会把这一栏输出到每一页收尾的 </body> 之前。Webflow 建议 script 标签放这里，而不是 Head code，免得拖慢加载；非放进 head 不可的外部脚本，它建议加 async 或 defer，所以下面那一行带着 defer。挂载元素看的是位置，它属于一个 Code Embed 元素，拖到版面上讨论串该坐的那一点。

1. 接了自定义域名，预发地址还在，两个都要登记

   每个 Webflow 项目在建好的当天就拿到一个 .webflow.io 地址，之后接上自定义域名也不会把它收回去：讲 Code Embed 的那篇文档正是让你拿这个地址当测试和收意见的预发域名，而且 yourdomain.com 上线之后，它照样供着发布出去的站点。所以你手上其实有两个主机名，而小部件只在控制台列着的主机名上应答。your-project.webflow.io 不是 yourdomain.com 的子域名，登记了正式域名不等于顺手把预发也登记了。把两个挂到同一个 site id 底下，那串值就是下一步加载器要带的东西。每个主机名在方案里各算一个域名，所以自定义域名还没接上的话，先登记预发地址，等上线那天再把正式的加进去。

2. Footer code 里粘一次，往后每一页都带着它

   Site settings、Custom code 标签页、Footer code 字段，然后按 Save changes。Webflow 会把这一栏输出到它发布的每一页，包括你还没搭出来的页面，所以这个标签粘一次就再也不用碰。每个字段能装下 50,000 个字符，一行加载器连边都够不着。

   代码复制

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="zh-cn" defer></script>

3. 在正文下面放一个 Code Embed，把挂载元素粘进去

   打开 Add 面板，在 Collection page 模板的文章正文下面加一个 Code Embed 元素，粘上挂载元素，保存并关掉弹窗。这里不用再放别的：刚才那个加载器会自己找到这个元素，把内容填进去。

   代码复制

   <div data-bootsignal="comments" data-thread-id="page-key"></div>

4. 先发布到预发地址，在那边读讨论串

   Webflow 说自定义代码的效果在 preview 模式里就看得到，这一点对标签本身成立，可小部件还多加一个条件：它拿页面的主机名去比对你登记的域名，而 Designer 的 preview 地址属于 Webflow，不属于你。发布到你的 .webflow.io 地址，用一个普通浏览器标签页打开它。画布上那个装着 script 标签的 Code Embed 会显示一个占位方块，那是预料之中的样子，不代表哪里坏了。

一份模板，每篇文章一串讨论

data-thread-id="page-key" 照抄不改，站上每篇文章就共用同一段对话，这通常不是谁想要的结果。这个属性只是一把钥匙，把它绑到每篇文章各不相同的东西上，分流自己就发生了。

在 Collection page 的 Code Embed 编辑框里，Webflow 允许你把 CMS 字段插进代码。光标放到 data-thread-id 的两个引号中间，插入文章的 Slug 字段。Webflow 会在发布时换成真正的 slug，所以改一次模板，集合里每篇文章就各有各的讨论串。

小部件带着什么一起来

• 嵌套回复，讨论会长成一棵树，而不是摊成一堆各说各话的纸条。
• Google 登录，你域名上每个 BootSignal 小部件共用，刚才为了给文章打分登录过的读者，要写评论时已经是登录状态。
• 不用再开一组密码，也不用记，因为整条路上只有 Google 账号这一种登录。
• 托管的存储外面包着一份按域名给的白名单，小部件只在你登记的域名上应答，别处复制一份你的页面也叫不动它。
• 审核在控制台里做：删掉一条评论，封掉写它的人。
• 界面文字备了韩语、英语和日语，用加载器上的 data-lang 切换。

Webflow 站点上有评论，走得通的路有三条

要是你是从一套现成的评论系统搬过来，而不是从零开始，那么比功能表更该问的是搬迁那几件事，Disqus 替代方案那一页把它们走了一遍。

这笔钱和 Webflow 那笔放在一起看

Webflow 的 Site plan 按站点收费。BootSignal 按注册域名收费，每月 $20 或每年 $200，小部件全都包含在内，流量不另算钱。文章火了，账单不动；以后在同一个 Webflow 项目上再加倒计时或者阅读进度条，账单也不动。会让它动的是主机名：预发和正式是两个注册域名，控制台可以一个一个往上加。

第二个小部件不用再动 Site settings

目录里其余的东西全都搭刚才粘好的那个 script 标签。有两个放在 Webflow 博客文章上特别划算：

先看主机名，再看那两个 Save 按钮

1. 地址栏里的那个地址，必须是你登记过的主机名之一。your-project.webflow.io 和 yourdomain.com 是两条各自独立的记录，Designer 的 preview 网址两者都不是，所以 preview 里空着、发布出来的页面上有东西，那说明它在正常工作。
2. Designer 画布上出现占位方块，对任何装着 script 标签的 Code Embed 来说都正常。要判断装没装好，去看发布出来的网址。
3. 在发布出来的页面上打开浏览器控制台。没登记过的主机名会在那里说出来，不会闷声失败，而预发正是大家最常漏掉的那一个。
4. 核对加载器里的 site id 和控制台上的是不是一致，包括复制粘贴时多出来的错字。
5. 核对那段标记落在 Code Embed 里，而不是落进 rich text 区块；后者会把标签当成看得见的文字印出来，不会把它跑起来。
6. 核对 Site settings 存过了。加载器和嵌入元素在两个不同的界面上，存了一边不等于存了另一边。