Disqus科学使用方式

前言

由于某些原因Disqus这个很多博客使用的评论系统没法在大陆使用了。本文记录一下本博客对Disqus的改造过程，以供参考。说一下本博客的情况：基于Hugo静态博客生成器、使用Hugo Even主题。网上有很多教程一般都需要有一个自己的VPS来运行转发程序，但是我发现使用Heroku来跑这个转发程序效果还不错。总体架构：

此处利用了一个PHP程序来转发Disqus API请求 https://github.com/fooleap/disqus-php-api。首先JS检测用户网络是否能够访问Disqus，如果能就直接访问原版Disqus。如果不能则请求自己的服务器通过PHP程序转发Disqus API请求，并显示自制的Disqus评论框。

一、Disqus

使用 API 实现匿名评论功能，需在 Disqus 后台网站设置，设置相关选项。 * 开启匿名评论，Guest Commenting 项中勾选 Allow guests to comment。 * 若需评论免审，Pre-moderation 项选中 None。

必须在 Disqus API 申请注册一个 App，取得相关的公钥（API Key）、私钥（API Secret），并填写于后端的配置文件 config.php 中。

App 设置方面，回调链接请填写 login.php 文件的绝对地址，可根据自己情况填写。

二、Heroku

首先在Heroku注册账号，可以直接通过Github登录；
新建一个App，填写App名字，选择位置如下图：
2018121215446058857644.png
选择Deploy部署，可以通过Heroku CLI部署或者通过关联Github Repo部署，很方便。但是这里不建议通过Github部署，因为PHP文件里有些敏感信息，所以建议通过Heroku CLI部署。Heroku CLI安装过程省略，官网上有。
```
$ heroku login                      //调起浏览器登录Heroku账号
$ heroku git:clone -a disqusproxy   //克隆Heroku的Git仓库，将disqusproxy替换为你自己的App名字
$ cd disqusproxy
```
将PHP程序下载下来，将api文件夹内的文件都放到这个文件夹内，修改config.php文件，将上面获取的API Key、API Secret填入配置文件中，在根据配置文件提示填入你的Disqus账号信息。另外由于Gravatar在国内也不太稳定可以将配置文件下面的Gravatar CDN修改为//gravatar.loli.net/avatar/，配置文件如下图：

20181212154460966999228.png

修改完后使用Git推送到heroku
```
$ git add .     
$ git commit -am "make it better"
$ git push heroku master            //Git工作流，推送到Heroku的Git仓库
```
可以测试访问https://{app name}.herokuapp.com/login.php判断是否安装成功。

三、前端

将PHP程序Repo里的iDisqus.min.css和iDisqus.min.js文件下载下来放入static文件夹内。
由于本博客采用的主题有Disqus功能，所以要先把以前的Div元素和涉及Disqus的代码清除。
引入CSS
```
<link rel="stylesheet" href="path/to/iDisqus.min.css" />
```
注：由于本博客采用的是Even主题，所以以下针对前端的修改在themes/even/layouts/partials/comments.html中，不同主题请自行修改。
创建容器
```
<div id="comment"></div>
```

引入JS

<script src="path/to/iDisqus.min.js"></script>

创建实例
```
var disq = new iDisqus('comment', {
        forum: 'kyxiong',
        api: 'https://dqproxy.herokuapp.com/',
        site: 'https://kaiyai.com',
        mode: 1,
        timeout: 3000,
        init: true
      });
```
如下图：

20181212154461004878666.png

参数解释：
- forum: disqus中forum的shortname
- api: 上文中PHP转发程序的地址
- site: 欲开启Disqus科学评论的网站地址
- mode: 模式：
  - 1: 检测能否访问 Disqus，若能则加载 Disqus 原生评论框，超时则加载简易评论框
  - 2: 仅加载简易评论框
  - 3: 同时加载两种评论框，先显示简易评论框，Disqus 加载完成则切换至 Disqus 评论框
- timeout: 超时时间设置，检测用户网络，如果连接原生Disqus超过这个时间则开启本转发程序转发Disqus API请求。单位毫秒。
- init: 是否自动初始化

四、大功告成！

使用Hugo生成静态网站预览，记得本地预览默认是关闭Disqus的，要注释掉comments中的代码

if (window.location.hostname === 'localhost') return;

放到生产环境后记得再注释回来哟。

Contents

前言

一、Disqus

二、Heroku

三、前端

四、大功告成！