Hexo的Disqus评论被墙的解决方案

在Hexo中使用disqus评论系统不是难事，Next主题中已经有集成的部分，只要将enable修改为true，加上相应的shortname就可以使用，但是因为国内的监管制度而导致Disqus无法访问。

为什么使用Disqus?

目前有的第三方评论工具，就我知道的有畅言、gitment、来必力。畅言需要备案，gitment用于GitHub Issues，因此必须有Git账号。其实最主要的担心是持续使用的问题，因此在这里选择使用Disqus。

那么问题来了，因为disqus不受控制，所以被墙挡在门外了，这个时候使用Disqus就必须翻墙了，刚开始安慰自己这是提高评论门槛，知道我看到了Git上的一个项目 disqus-php-api ，可以利用境外VPS转发Disqus请求。

disqus-php-api的配置

境外VPS这里我选择使用Vultr，推广链接：https://www.vultr.com/?ref=7158163

系统环境：CentOS 7
安装环境：lnmp，git

Clone `disqus-php-api`

进入网站根目录，拷贝网站源码。

1	git clone https://github.com/fooleap/disqus-php-api disqus

修改api目录下的config.php：

define('DISQUS_PUBKEY', 'E8Uh5l5fHZ6gD8U3KycjAIAk46f68Zw7C6eW8WSjZvCLXebZ7p0r1yrYDrLilk2F');
define('DISQUS_USERNAME', 'your-username');
define('DISQUS_EMAIL', '[email protected]');
define('DISQUS_PASSWORD', 'your-disqus-password');
define('DISQUS_WEBSITE', 'your-website');
define('DISQUS_SHORTNAME', 'your-disqus-shortname');
define('DISQUS_APPROVED', true);

DISQUS_PUBKEY：Disqus公钥，无需修改。
DISQUS_USERNAME：Disqus注册用户名
DISQUS_EMAIL：Disqus注册邮箱
DISQUS_PASSWORD：Disqus密码
DISQUS_WEBSITE：网站域名（这里的域名是Hexo站点的域名，切记）,如：https://fiveplus.github.io
DISQUS_SHORTNAME：网站在 Disqus 对应的 Shortname
DISQUS_APPROVED：评论是否免审核，true 即跳过评论预审核，false 则按后台设置。

Next集成disqus-php-api

在主题配置文件_config.yml中添加disqus-php-api参数：

# Disqus
disqus:
  enable: false
  shortname: your-short-name
  count: false

# Disqus APi
disqusapi:
  enable: true
  forum: 'your-forum'
  site: 'your-site'
  api: 'https://yoursite.com/disqus/api'
  mode: 2
  badge: '博主'
  timeout: 3000

forum: Disqus的shortname
site: 网站域名（Hexo博客域名）
api: PHP代码部署地址的api路径
mode:
- 1 检测能否访问 Disqus，若能则加载 Disqus 原生评论框，超时则加载简易评论框。
- 2 仅加载简易评论框。
- 3 同时加载两种评论框，先显示简易评论框，Disqus 加载完成则切换至 Disqus 评论框。
badge: 管理员徽章文本
timeout: 当mode为1时的超时时间

添加disqus-api模块

进入目录：<Hexo_floder>/themes/next/layout/_third-party/comments/，新建文件disqusapi.swig，内容如下：

{% if theme.disqusapi.enable %}
    <link rel="stylesheet" href="<Disqus WebSize>/disqus/dist/iDisqus.min.css" />
    <script src="<Disqus WebSize>/disqus/dist/iDisqus.min.js"></script>
    <script>
        var emojiList = [{
            code:'smile',
            title:'笑脸',
            unicode:'1f604'
        },{
            code:'mask',
            title:'生病',
            unicode:'1f637'
        },{
            code:'joy',
            title:'破涕为笑',
            unicode:'1f602'
        },{
            code:'stuck_out_tongue_closed_eyes',
            title:'吐舌',
            unicode:'1f61d'
        },{
            code:'flushed',
            title:'脸红',
            unicode:'1f633'
        },{
            code:'scream',
            title:'恐惧',
            unicode:'1f631'
        },{
            code:'pensive',
            title:'失望',
            unicode:'1f614'
        },{
            code:'unamused',
            title:'无语',
            unicode:'1f612'
        },{
            code:'grin',
            title:'露齿笑',
            unicode:'1f601'
        },{
            code:'heart_eyes',
            title:'色',
            unicode:'1f60d'
        },{
            code:'sweat',
            title:'汗',
            unicode:'1f613'
        },{
            code:'smirk',
            title:'得意',
            unicode:'1f60f'
        }];
        var disq = new iDisqus('comments', {
            forum: '{{ theme.disqusapi.forum }}',
            site: '{{ theme.disqusapi.site }}',
            api: '{{ theme.disqusapi.api }}',
            mode: {{ theme.disqusapi.mode }},
            badge: '{{ theme.disqusapi.badge }}',
            timeout: {{ theme.disqusapi.timeout }},
            init: true,
            emoji_list: emojiList
        });
        disq.count();
    </script>
{% endif %}

跨域问题

如果你的Hexo是使用GitHub部署的，和上面的disqus-php-api不在一起，那么会出现跨域问题。

将init.php中设置Access-Control-Allow-Origin部分：

namespace Emojione;
require_once('config.php');
require_once('emojione/autoload.php');
header('Content-type:text/json');
$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';
if(preg_match('(localhost|127\.0\.0\.1|'.DISQUS_WEBSITE.')', $origin)){
    header('Access-Control-Allow-Origin: '.$origin);
}
$client = new Client(new Ruleset());

删除Access-Control-Allow-Origin 的代码，替换以下的代码：

(其中，变量 allow_origin 是你要允许可以调用你后端的域名网址，也可以设置为*允许所有)

namespace Emojione;
require_once('config.php');
require_once('emojione/autoload.php');
header('Content-type:text/json');
//跨域访问的时候才会存在此字段
$origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';

$allow_origin = array(
    'https://fiveplus.github.io'
);

if(in_array($origin, $allow_origin)){
    header('Access-Control-Allow-Origin:'.$origin);
}
$client = new Client(new Ruleset());

我在实际使用过程中，因为部署在GitHub，使用以上方式失败了，因此允许全域名访问。

namespace Emojione;
require_once('config.php');
require_once('emojione/autoload.php');
header('Content-type:text/json');
//跨域访问的时候才会存在此字段
$origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';

header('Access-Control-Allow-Origin: *');

$client = new Client(new Ruleset());

结束

本文参考了其他博友的资料，因为某些地方描述不够，导致出了一些问题，在这里补充重写一下。

本文出处：https://www.jianshu.com/p/2671b28b79e5