由于 Ghost 不自带评论系统，所以如果想在文章中添加评论区的话，就必须使用第三方的评论系统，其中最合适的就是 Disqus。 但因为众所周知的原因，在世界上的某些地区是无法使用 Disqus 这样的 404 评论系统的。

DisqusJS 的出现，可以一定程度上缓解这个问题。

DisqusJS 是一个基于 Disqus API 和 React 开发的 Embed 插件。DisqusJS 通过 Disqus API 渲染只读的评论列表，搭配反向代理可以实现在网络审查地区加载 Disqus 评论列表；支持自动检测访客是否能够访问 Disqus、并自动选择加载原生 Disqus（评论完整模式）或 DisqusJS 提供的评论基础模式。

此前本站就在用 DisqusJS 1.3 作为评论支持，趁着这次升级版本记录一下操作。

Tips：本文基于 DisqusJS 的新版本 3.0 进行操作。

添加头文件

在Code Injection中的Site Header添加 DisqusJS 的头文件即可

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/disqusjs@3.0/dist/browser/styles/disqusjs.css">
<script src="https://cdn.jsdelivr.net/npm/disqusjs@3.0/dist/browser/disqusjs.es2015.umd.min.js"></script>

修改主题

下载主题源码，在需要展示评论的地方创建一个 DisqusJS 容器，并添加配置：

配置如何获取，请参考官方文档 https://ghost.org/integrations/disqus/

<div id="disqusjs"></div>
<script>
const disqusjs = new DisqusJS({
    shortname: '你的 Disqus Forum 的 shortname',
    siteName: '你站点的名称',
    identifier: 'ghost-{{comment_id}}',
    url: '{{url absolute="true"}}',
    title: '',
    api: 'https://替换为你的反代域名/disqus/api/',
    apikey: 'DisqusJS 向 API 发起请求时使用的 API Key',
    admin: '你的站点的 Disqus Moderator 的用户名',
    adminLabel: '你想显示在 Disqus Moderator Badge 中的文字'
});
</script>

配置 Disqus Application

在 Disqus API Application 处注册一个 Application。

点击新创建的 Application，获取你的 API Key（公钥）。

在 Application 的 Settings 页面设置你使用 DisqusJS 时的域名。Disqus API 会检查 API 请求的 Referrer 和 Origin。

配置 DisqusJS 参数

shortname {string}

siteName {string}

identifier {string}

  • 当前页面的 identifier，用来区分不同页面
  • 建议，默认值为 document.location.origin + document.location.pathname + document.location.search

url {string}

  • 当前页面的 URL，Disqus 的爬虫会爬取该 URL 获取页面相关信息
  • 建议，默认值为 document.location.origin + document.location.pathname + document.location.search

title {string}

  • 当前页面的标题，如果没有设置默认为当前页面的标题。当页面标题中有其他信息（比如站点名称）而不想在 Disqus 中展示时，可以设置此项。
  • 非必须，默认值为 document.title

api {string}

  • DisqusJS 请求的 API Endpoint，通常情况下你应该配置一个 Disqus API 的反代并填入反代的地址。你也可以直接使用 DISQUS 官方 API 的 Endpoint https://disqus.com/api/，或是使用我搭建的 Disqus API 反代 Endpoint https://disqus.skk.moe/disqus/。如有必要可以阅读关于搭建反代的 相关内容
  • 建议，默认值为 https://disqus.skk.moe/disqus/

apikey {string | string[]}

  • DisqusJS 向 API 发起请求时使用的 API Key，你应该在配置 Disqus Application 时获取了 API Key
  • DisqusJS 支持填入一个 包含多个 API Key 的数组，每次请求时会随机使用其中一个；如果你只填入一个 API Key，可以填入 string 或 Array。
  • 必填，无默认值

nesting {number}

  • 最大评论嵌套数；超过嵌套层数的评论，会不论从属关系显示在同一层级下
  • 非必须，默认值为 4

nocomment {string}

  • 没有评论时的提示语（对应 Disqus Admin - Settings - Community - Comment Count Link - Zero comments）
  • 非必须，默认值为 这里冷冷清清的，一条评论都没有

以下配置和 Disqus Moderator Badge 相关，缺少一个都不会显示 Badge admin {string}

adminLabel {string}

渲染评论

最后，让 DisqusJS 实例将评论组件渲染到页面上：

disqusjs.render(document.getElementById('disqusjs'));
// 你也可以传入一个 CSS 选择器
// disqusjs.render('#disqusjs');

在 Casper 主题中，完成之后的post.hbs评论部分长这样：

        <section class="article-comments gh-canvas">

            <!-- DisqusJS 评论区-->
            <div id="disqusjs"></div>
            <script>
                const disqusjs = new DisqusJS({
                    shortname: 'xxxxxxxx',
                    siteName: 'xxxxxxxx',
                    identifier: 'ghost-{{comment_id}}',
                    url: '{{url absolute="true"}}',
                    title: '',
                    api: 'https://domain.com/disqus/api/',
                    apikey: 'xxxxxxxx',
                    admin: 'xxxxxxxx',
                    adminLabel: 'xxxxxxxx'
                });

                disqusjs.render(document.getElementById('disqusjs'));
            </script>

        </section>

修改完成后重新打包为 zip，上传到 Ghost 更新主题即可。

反向代理

在站点配置中添加：

server {
  ...
  # for hexo-theme-next disqusjs.
  location /disqus/api/ {
    proxy_redirect off;
    proxy_pass https://disqus.com/api/;
  }
  ...
}

完成后重启 nginx 服务：

service nginx reload

打开 https://domain.com/disqus/api/3.0/threads/list.json （domain.com是你 nginx 配的域名）验证一下，是否配置成功：返回如下内容即可。

{"code":5,"response":"Invalid API key"}

参考文献

https://github.com/SukkaW/DisqusJS https://yrom.net/blog/2018/10/18/Use-DisqusJS-for-comment/ https://ghost.org/integrations/disqus/

版权声明

知识共享许可协议

本文由 Jacob 采用 知识共享署名 - 非商业性使用 - 相同方式共享 4.0 国际许可协议 进行许可，首发于 weixiang.github.io 。