Hexo+Disqus国内无法访问解决方案

发表于 | 分类于 | |

为什么选择disqus，相信能看到这篇文章的，基本都心知肚明了，这里就不赘述了。

Disqus可以说最大的缺点就是国内被墙，本文基于fooleap的disqus-php-api，参照smk17的博文 ，在此基础上做了一些更新修正（github链接），实现与hexo博客的集成，解决disqus国内无法访问的问题。

原理可以参考fooleap的博文，科学使用Disqus.

准备条件

vps服务器+nginx+php环境。

如果你搭建hexo博客的方式类似我的另一篇博文 https://www.hellolvs.cn/hexo/ ，可能你已经有了vps和nginx环境。但是可能缺乏php环境，当然可能你用的其他方式搭建有了php环境那就更省事。

没有php环境也没关系，安装就好了。网上很多LNMP环境搭建教程，都很简单，我们不需要M（mysql），只安php就好，安装完需要在网站的nginx配置中（我的目录/etc/nginx/conf.d/hexo.conf，根据自己情况，最后文件名可能不同）加一些php配置。这里就不赘述了，给一下我的hexo.conf中加的php相关配置。

1
2
3
4
5
6
7
location ~ \.php$ {
    root /home/lvs/www;
    fastcgi_pass 127.0.0.1:9000;
    fastcgi_index index.php;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    include fastcgi_params;
}

root一项为自己的网站根目录。

安装配置好后别忘了启动php-fpm：

1
sudo service php-fpm start

使用sudo service php-fpm status命令查看服务运行状态。

注意 ：可能你搭建完php和disqus之后访问会出现file not found（按F12查看控制台输出）。那是因为你没有修改php与nginx的用户一致。

使用下面命令看一下你的nginx用户（其中的usr一行）。

1
cat /etc/nginx/nginx.conf

然后配置php-fpm的运行用户：

php-fpm的配置文件位置， /etc/php-fpm.d/www.conf，找到user=apache，把=后面改成nginx的用户，再下面还有一行group=apache，也改成你nginx的用户组。

部署disqus-php-api

下载disqus-php-api

可以选择原作者fooleap的disqus-php-api；

也可以选择我fork之后修改的disqus-php-api，主要更新两点：

1）修复同一篇博文不同url出现重复创建Thread的问题，也就是同一篇博文如果访问的url不一样评论区会不一样，比如本篇博文可能会有 https://www.hellolvs.cn/disqus/ 和 https://www.hellolvs.cn/disqus/index.html 两个URL，甚至更多。

2）原作者在判断能否访问原生disqus时通过获取一个json来判断，获取成功则加载原生disqus评论框embed.js。而经测试，可能会出现可以成功获取那个json但是却不能加载embed.js的情况，导致评论加载失败（会显示评论一直加载中）。博主改为直接获取embed.js来判断能否访问，该文件大小55k，那个json为3.8k，虽然稍大了一些，但没有本质影响，还是以解决问题为主。

OK，可以先在本地使用git clone下来：

1
git clone git@github.com:hellolvs/disqus-php-api.git

方便起见，把目录disqus-php-api重命名为disqus。

修改api目录下的config.php

1
2
3
4
5
6
define('DISQUS_USERNAME', '');
define('DISQUS_EMAIL', '');
define('DISQUS_PASSWORD', '');
define('DISQUS_WEBSITE', '');
define('DISQUS_SHORTNAME', '');
define('DISQUS_APPROVED', true);

以上几项含义：

  • DISQUS_USERNAME Disqus 用户名
  • DISQUS_EMAIL Disqus 注册邮箱，重要
  • DISQUS_PASSWORD Disqus 密码，重要
  • DISQUS_WEBSITE 网站域名，如：’https://www.hellolvs.cn'
  • DISQUS_SHORTNAME 网站在 Disqus 对应的 Shortname
  • DISQUS_APPROVED 评论是否免审核，true 即跳过评论预审核，false 则按后台设置

还有一项访客头像（匿名评论），可以自定义：

1
define('GRAVATAR_DEFAULT', 'https://a.disquscdn.com/images/noavatar92.png');

上传到vps服务器

把整个disqus目录（实际上只需要其中的api目录和dist目录）上传到vps服务器的站点根目录。

这里可以使用ftp工具，也可以直接用scp命令：

1
scp -r /home/lvs/disqus/ lvs@www.hellolvs.cn://home/lvs/www/

注意其中的本地目录和用户、服务器、站点根目录都改为自己的。

注意：

可能你的hexo在发布博客时，会把站点根目录清空再把博客拷贝过去，导致每次发布博客，都会把disqus目录给清理了，这样就很麻烦，这里我们稍微修改下hexo的git仓库配置就可以解决。

先看一下你的服务器上git仓库配置，根据你当时搭建hexo的情况，git仓库可能被命名为hexo.git，这需要你自己确认一下。以我的hexo搭建教程 https://www.hellolvs.cn/hexo/ 为例，在hexo.git下找到git仓库配置文件：

1
cat ~/hexo.git/hooks/post-receive

里面内容可能如下：

1
2
3
4
5
6
7
8
#!/bin/bash
GIT_REPO=/home/hexo/hexo.git
TMP_GIT_CLONE=/tmp/HexoBlog
PUBLIC_WWW=/home/hexo/www
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

其中rm -rf ${PUBLIC_WWW}/*命令就是把站点根目录清了，我们把这一行修改：

1
2
3
4
5
6
7
8
#!/bin/bash
GIT_REPO=/home/hexo/hexo.git
TMP_GIT_CLONE=/tmp/HexoBlog
PUBLIC_WWW=/home/hexo/www
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
find $PUBLIC_WWW/* -maxdepth 0 | grep -v disqus | xargs rm -rf
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

其中find $PUBLIC_WWW/* -maxdepth 0 | grep -v disqus | xargs rm -rf命令就是把站点根目录下除disqus目录删掉……OK，这样就不用每次发布再去上传disqus目录了。

disqus集成到hexo中

修改主题配置_config.yml

这里以next主题为例，其他主题类似，找到相应目录使用相应代码形式即可。

在主题配置文件_config.yml中添加disqus api相关参数，next主题相应文件路径：

1
your-blog-path/themes/next/_config.yml

找到Disqus配置的地方，注释掉原disqus配置，添加disqus api配置，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Disqus
# disqus:
#   enable: false
#   shortname: hellolvs
#   count: true

# Disqus APi
disqusapi:
  enable: true
  forum: 'hellolvs'
  site: 'https://www.hellolvs.cn'
  api: 'https://www.hellolvs.cn/disqus/api'
  mode: 3
  badge: '博主'
  timeout: 3000

disqusapi各项含义：

  • forum：网站在 Disqus 对应的 Shortname
  • site：网站域名
  • api：PHP代码api目录部署的网址
  • mode：
    • 1 检测能否访问 Disqus，若能则加载 Disqus 原生评论框，超时则加载简易评论框
    • 2 仅加载简易评论框
    • 3 同时加载两种评论框，先显示简易评论框，Disqus 加载完成则切换至 Disqus 评论框
  • badge：管理员标识文本，默认‘管理员’
  • timeout：加载原生disqus的超时时间，包括mode 1和mode 3

博主使用的mode 3，因为mode 1如果访问不了原生disqus，在超时前会一直转圈，用户体验不好，而mode 3则无论如何会先加载简易评论框显示评论，如果可以访问disqus也会切换至 Disqus 评论框，可以说兼顾两种情况。

添加disqusapi评论模块

以next主题为例：

找到主题中的评论模块目录：

1
your-site/themes/next/layout/_third-party/comments/

在其中新建名为disqusapi.swig文件，内容为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% if theme.disqusapi.enable %}
    <link rel="stylesheet" href="/disqus/dist/iDisqus.min.css" />
    <script src="/disqus/dist/iDisqus.min.js"></script>
    <script>
        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,
            identifier: '{{ page.path }}'
        });
        disq.count();
    </script>
{% endif %}

其中identifie一项就相当于我们获取文章评论的唯一token，page.path为hexo的全局变量，同一篇文章即使url不同其page.path是相同的，这样就不会出现同一篇文章有多个评论区。

引入该模块

在同一目录下的 index.swig 中添加：

1
{% include 'disqusapi.swig' %}

现在，重新发布博客就可以看到disqus评论了。

无法访问原生disqus时，如果你的博文未使用过disqus，会出现创建thread（可以配置自动创建，但是作者不建议，防止产生垃圾thread），点击创建即可。也可以翻墙访问文章，评论就出现了(原生disqus会自动创建Thread）。

坚持原创技术分享，您的支持将鼓励我继续创作！
分享到：