disqus评论系统被墙后设置代理实现墙内访问

小鸡
阅读1012 喜欢5 教程 更新2019-4-29

缘起:前天把博客的评论搬到disqus后,电脑端一直访问正常,但是手机端一直显示不出评论,我以为是什么其他的原因,后来仔细一想,是我电脑端一直有开代理,可以访问外网,所以没问题。。。哎把这事给忘了,看来disqus是被墙的死死的了。网站找了一圈看有没有办法。

还好有大佬造好了轮子:disqusapi
不过总感觉大佬的教程还有一些网上其他的教程讲的不是很详细,踩了些坑后决定再写篇教程

首先最开始要说的是,这个代理的设置需要你有一台境外vps,如果你没有,或则不想花点小钱的话就不用看了,可以使用valine评论系统代替,我觉得也挺不错的。

如果还没有境外服务器,想买一台的话,推荐vultr厂商的服务器,因为他们最近在搞活动,新用户充值10美元送50美元,开一台低配服务器大概可以用一年。当然你有了服务器不只是可以做这个代理了,也可以做日常科学上网用,参考我这篇文章快速搭建ssr服务端

vultr官网注册

如果你有境外服务器并且已经有网站搭在上面,可以跳过到源码下载那一步

disqus-php-api后端的配置

买好服务器后,便可以开始搭建disqus-php-api代理了

环境要求

  • 系统环境:CentOS 7
  • 安装环境:lnmp,git

这里推荐使用宝塔Linux界面,因为期间会安装其他的软件,用宝塔操作比较简单。

宝塔安装命令

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh

安装期间遇到问题可以看官网 宝塔安装教程

安装完之后,浏览器打开面板

第一次打开会让你选择安装哪个web环境,选择lnmp就好了。

建立api的站点

环境安装好之后,建立新的站点,点击左边栏的网站->添加站点

将你的api域名解析到这里,我不知不用域名直接用ip行不行,没试过

下载源码

然后进入服务器终端,在新建的站点目录下下载大佬的源码

cd  /www/wwwroot/你的域名
git clone https://github.com/fooleap/disqus-php-api disqus
cd disqus

disqus目录下有个api目录,进入api目录修改里面的config.php文件,你可以在宝塔面板上操作,也可以在终端使用vim修改,都行。在宝塔面板上修改的话,点击网站目录即可进入。

具体怎么修改,文件里面会有注释说明。这里简洁说一下

//修改api目录下的config.php:
define(DISQUS_PUBKEY, E8Uh5l5fHZ6gD8U3KycjAIAk46f68Zw7C6eW8WSjZvCLXebZ7p0r1yrYDrLilk2F);
define(DISQUS_USERNAME, your-username);
define(DISQUS_EMAIL, your-email@qq.com);
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 则按后台设置。

disqus上的配置

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

applications 设置方面,回调链接请填写 login.php 文件的绝对地址,主要的设置如下图,可根据自己情况填写。

Disqus API 相关设置

跨域问题

如果你的Hexo是使用GitHub部署的或者其他地方,和上面的disqus-php-api并不是放在一个域名下,那么会出现跨域问题。

将api文件夹下的init.php中设置Access-Control-Allow-Origin部分:

if(preg_match((localhost|127.0.0.1|.DISQUS_WEBSITE.), $origin)){
header(Access-Control-Allow-Origin: .$origin);
}

删除Access-Control-Allow-Origin的代码,替换以下的代码:

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

$allow_origin = array(
你的博客域名
);
if(preg_match((localhost|.$ipRegex.|.domain(DISQUS_WEBSITE).), $origin, $allow_origin)){
header(Access-Control-Allow-Origin: .$origin);
}

如果上面的还是不行,那就设置为全域名访问

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

没有权限的问题

现在你在用域名全连接(http://域名/disqus/api/login.php)浏览器访问api文件夹里面的login.php试试,或许会遇到没有权限的问题

这是因为网站的文件夹对外界没有开放写的权限,可以在Linux终端下用命令给disqus文件夹加个777权限,也可以在宝塔面板操作。

以上就是后端的操作了,可能还会踩到且坑,不过我遇到的就这些了,对了,还有https和http协议不同的话也会出问题,你的api域名使用的协议应该和博客域名相同,不然可能会有跨域问题。

博客前端设置

在主题配置文件_config.yml中添加disqus-php-api参数:
随便找个空地写入以下配置

# 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主题是基于next进行修改的,所以如果你使用别的主题话,可能操作会有不同。

进入博客目录/themes/你的主题/layout/_third-party/comments/,新建文件disqusapi.swig,内容如下:
记得更换第一行你的api域名

{% if theme.disqusapi.enable %}
<link rel="stylesheet" href="你的api域名/disqus/dist/iDisqus.min.css" />
<script src="你的api域名/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 %}

然后在同个目录下的index.swig文件中写入

{% include &aposdisqusapi.swig&apos %}

然后重新hexo clean清理之前缓存再hexo d -g生成新的博客文件就好了。

如果你的主题文件系统和我的不一样,你也可以参考原作者fooleap来根据自己的情况进行修改。

写在最后

具体的过程大概就是这样,中间可能会有些纰漏,因为踩了些坑,所以中午花了两个小时才搞完。

参考文章