企业官网建设流程全解析

Mediator 评论系统怎么选：Disqus 与自建的 2 条路线 + 1 张决策表

【免费下载链接】blocklyThe web-based visual programming editor.项目地址: https://gitcode.com/gh_mirrors/bloc/blockly

Mediator 的排版很干净，副作用是读者看完就走，没法在你的博客里留下痕迹。给 Mediator 加评论系统只有两条路：接 Disqus，或自建。

01｜动手前先看清两条路

接 Disqus 是第三方托管路线。评论区、账号、数据都放在 Disqus 的服务器上，Mediator 的文章模板里已经预埋了嵌入代码，你只需要打开一个配置项。适合不想写代码、依赖成熟反垃圾能力、希望评论区当天就跑起来的作者。

自建评论区块是本地化路线。数据落在自己的仓库或服务里，样式、交互、存储格式全部自己定，页面还少加载一个第三方脚本。代价是表单、提交逻辑、存储和防垃圾都要自己实现。适合本身就是开发者、对隐私和风格一致性有要求的作者。

两条路不冲突。先按上面的标准选一条主路，剩下的都是执行问题。

Mediator 评论系统的主题整体界面

02｜路线一：五分钟接入 Disqus

配置在哪

打开 _config.yml，找到约第 31 行的disqus:配置。它默认被注释，值是个占位符。取消注释，填入你在 Disqus 后台创建的站点短名称：

disqus: your-site-shortname

集成代码在哪

评论区的实际代码在 _layouts/post.html 约第 91-105 行，整块包在{% if site.disqus %}里。它负责插入disqus_thread容器，并异步加载以短名称命名的embed.js脚本。配置为空时这段代码整体跳过，页面上不会出现评论区。

适合与不适合

适合：希望评论区当天就能跑起来，登录、回复、通知都要现成的，不介意读者评论存在第三方服务器上。

不适合：对首屏速度有硬要求、不想让页面加载第三方脚本、或无法接受免费版展示广告的场景。

好处是审核后台、反垃圾、社交登录都开箱即得，基本不用维护。代价是页面多了一个异步脚本，首屏可能慢 1-2 秒，评论数据不在自己手里。

Mediator 评论系统接入 Disqus 后的评论区效果

03｜路线二：自建评论区块

三个后端方向

• GitHub Issues 当后端：一篇文章对应一个 Issue，评论即 issue 列表，新评论通过 API 提交。不需要额外服务器，但要处理仓库写权限，不适合高评论量。
• 静态文件存储：把评论序列化成 JSON 提交进仓库，构建时读取渲染。实现最简单、数据完全透明，写入环节要配 CI 或手动提交。
• 轻量第三方 API：接入现成的评论 API 服务，前端只写取数和渲染。少写存储逻辑，但数据仍有一部分在对方那边。

自建评论表单组件

在_includes/下新建comments.html，放一个最小表单：昵称、邮箱、正文三个字段。

<form id="comment-form"> <input name="name" placeholder="昵称" required> <input type="email" name="email" placeholder="邮箱" required> <textarea name="comment" placeholder="留言" required></textarea> <button type="submit">提交</button> </form>

然后在文章布局的正文之后引入。_layouts/post.html 约第 67 行后加一行：

{% include comments.html %}

样式定制要点

css/main.sass 约第 600-603 行已有 Disqus 区域的样式，自建的样式放在旁边加即可：容器加内边距和浅色背景，输入框撑满宽度、统一圆角，提交按钮对齐主题主色。改完在桌面和移动端各预览一遍。

Mediator 评论系统的自建评论区块效果

04｜一张表做决定

05｜部署避坑 ⚠️

坑一：配置了 Disqus，页面却没有评论区

• 现象：disqus:填好了短名称，重启 serve 后文章页依旧没有评论区。
• 原因：缩进错了，这个键落到了别的键下面，site.disqus实际是空值，post.html 里那个 if 块整体被跳过。
• 解法：用grep -n disqus _config.yml检查，确认它是顶层键、行首没有#、没有缩进，再重启。

坑二：首页也出现了评论区

• 现象：不仅文章页，首页和归档页底部也挂上了评论区。
• 原因：include 写进了公共布局，而不是只写在文章布局里。
• 解法：include 只放在_layouts/post.html，并让评论区只在有文章内容的页面渲染。

坑三：自建表单一提交就刷新或 404

• 现象：点提交后 URL 被拼上一串参数，或直接 404，评论没有落库。
• 原因：表单没设 action，或 JS 没阻止默认提交，浏览器按原生行为走了。
• 解法：action 显式指向提交端点，submit 事件里e.preventDefault()，改用 fetch 手动发送。

坑四：本地预览时嵌入脚本 404

• 现象：页面渲染正常，控制台却报嵌入脚本加载失败。
• 原因：嵌入脚本用//开头的协议相对地址注入，file://环境下无法解析。
• 解法：一律通过 jekyll serve 的 http 地址预览，不要直接打开静态文件。

06｜动手清单 📋

• 确认 _config.yml 中disqus:是顶层、未注释的键，且已填真实短名称
• 文章页刷新后出现评论区，首页与归档页没有
• 自建路线：_includes/comments.html建好，表单三字段齐全，提交逻辑已接上
• 评论区样式已加进 css/main.sass，桌面与移动端各预览一遍

先接 Disqus 把评论区跑起来，等评论量和风格都稳定了，再评估要不要迁到自建。

【免费下载链接】blocklyThe web-based visual programming editor.项目地址: https://gitcode.com/gh_mirrors/bloc/blockly