通过 DisqusJS 添加 Disqus 评论系统

发表于 分类于

在博客访问者无法直连 Disqus 时，有个 DisqusJS 的劣化替代方案可供博主使用。方案内置在 Hexo Next 主题中，在正确配置第三方反向代理后，博客可向游客展示评论，但游客无法参与讨论。

这种方案的效果如本文底部评论区所示。该方案需要在三个地方进行配置，分别是 Disqus 服务提供方（需科学上网）、代理端（本文为 Cloudflare 云函数），以及 Hexo Next 配置文件（本地），没有先后顺序。

Disqus

先 注册 Disqus 账号。注册后，点击首页的『GET STARTED』，并选择『I want to install Disqus on my site』选项。

下一页，只有 Shortname 会在后续的配置中用到，其余随便选。
下一页，付费页面下拉选择 Basic 免费计划。
下一页，出现 Installation 界面就可以关闭了，因为 Hexo Next 已经内置，不需要手动安装。左侧菜单其它的审核策略等选项都可以后续有需要再设置。

然后 注册 Disqus API 应用。
第一页，都随便填，Label 填个自己能看懂的名字，方便后续管理。网址格式要正确。填完以后点『Register my application』
下一页，Settings 下的 Domains 填上博客网址，不用加 http/https 协议前缀。Disqus 后续会用来匹配 referer。填完后点『Save Changes』
保存以后切换到『Details』页面，把 Public Key 的一长串字符复制下来，后续会用到。

Cloudflare

假设你已经有了 Cloudflare 账号，并且有一个由 Cloudflare 管理的域名。

登录 Cloudflare 云函数平台，Login。
下一页，点击右上角『Create a Worker』，下一页点击『创建 Worker』，下一页起个名 worker name 后续管理要用，点右下角部署。
下一页，『配置 Worker』。
下一页，右上角『快速编辑』，复制下面代码，粘贴后点右上角『保存并部署』。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
addEventListener('fetch', event => {
  event.respondWith(proxy(event));
});

async function proxy(event) {
  const getReqHeader = (key) => event.request.headers.get(key);

  let url = new URL(event.request.url);
  url.hostname = "disqus.com";

  let parameter = {
    headers: {
      'Host': 'disqus.com',
      'User-Agent': getReqHeader("User-Agent"),
      'Accept': getReqHeader("Accept"),
      'Accept-Language': getReqHeader("Accept-Language"),
      'Accept-Encoding': getReqHeader("Accept-Encoding"),
      'Connection': 'keep-alive',
      'Cache-Control': 'max-age=0'
    }
  };

  if (event.request.headers.has("Referer")) {
    parameter.headers.Referer = getReqHeader("Referer");
  }

  if (event.request.headers.has("Origin")) {
    parameter.headers.Origin = getReqHeader("Origin");
  }

  return fetch(new Request(url, event.request), parameter);
}
// 代码来自 [idawnlight](https://github.com/idawnlight/disqusjs-proxy-cloudflare-workers)

下一页，点击仪表上 『Custom Domains』下面 『0』右边的『查看』，随后点击右上角『添加自定义域』。
建议填入 disqus.<你自己拥有的域名>，点击『保存』。这是 cloudflare worker domain，后续会用到。
如果你没有自定义域名，也可以用默认的。默认的在仪表上『预览』位置处，格式为 <workername>.<你的cloudflare 帐号名>.worker.dev。

点击『添加自定义域』，Cloudflare 的配置完成。需要等几分钟生效。期间可以先配置 Hexo Next。

Hexo Next

编辑 _config.next.yml 文件，找到 comments disqus disqusjs 三个配置项，修改内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
comments:
    style: tabs
    active: disqusjs    # 这里用 disqusjs 代替了 disqus
    storage: true
    lazyload: false
    nav:
        disqusjs:       # 这里用 disqusjs 代替了 disqus
          text: Load DisqusJS
          order: -1
# Disqus
disqus:
    enable: false       # 这里改为 false，关闭原始的 Disqus
    shortname: 
    count: true
# DisqusJS
disqusjs:
    enable: true        # 这里改为 true，启用 DisqusJS
    api:  https://<cloudflare worker domain>/api/   # 这里填 Cloudflare 云函数的域名，注意还要加上 /api/ 后缀
    apikey:  <API key>                              # 这里填 Disqus 提供的 public key
    shortname: <shortname>                          # 这里填 Disqus 注册时的 shortname

验证

本地，或编译后在服务器端打开页面，都可以看到评论区。自行留言后断开科学上网，刷新页面看有没有更新即可。或者用 Cloudflare 的云函数计数是否增加也可以。