Disqus API科学评论大法

Author Avatar
Reborn 8月 03, 2018
  • 在其它设备中阅读本文章

背景

Disqus 不用说,大家都知道他的主域名disqus.com在国内被屏蔽了,导致在国内不能评论也不能看评论,体验十分不好。看了一下 Disqus 官方发现有个 API 反代加速访问的用法,于是去找了相关资料,原本想自己造轮子,后来发现已经有现成的,我就先拿来用着吧。

原理

我们可以来看看disqus反向代理的原理图:
disqus-api-diagra

整体流程是这样的,在前端页面上测试disqus加载是否成功,如果成功则显示disqus的评论框,反之加载独立的评论框,并将请求发送给自己在国外的vps,利用vps做反向代理,接收来自客户端的请求到disqus服务器并再转发给客户端。

一句话概括就是:客户端发送请求给服务器,服务器通过Disqus Api提交评论。

工具介绍

目前现成的disqus反代主要有以下两种:

上述两种方案均支持根据网络情况判断加载简易/原版评论框,看完UI后我很果断的选择了disqus-php-api……

以下为替换为disqus-php-api的具体步骤,供大家参考,也给自己留下一个记录。

配置

  • 一台国外的VPS服务器

    后端配置

获取 disqus-php-api

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

移动并重命名

mv -r disqus-php-api /path/to/disqus-php-api

注意:
此处建议新建一个 Nginx 站点,如:api.xxx.com这类,专门放 API 的地方,注意DNS解析添加A记录和写好 Nginx 配置,尤其是要配置SSL证书。

修改 config.php

根据 disqus-php-api/api/config.php 中的注释修改相应配置:

define('DISQUS_PUBKEY', 'E8Uh5l5fHZ6gD8U3KycjAIAk46f68Zw7C6eW8WSjZvCLXebZ7p0r1yrYDrLilk2F');
define('PUBLIC_KEY', 'your-public-key');
define('SECRET_KEY', 'your-secret-key');
define('DISQUS_USERNAME', 'your-disqus-username');
define('DISQUS_EMAIL', '[email protected]');
define('DISQUS_PASSWORD', 'your-disqus-password');
define('DISQUS_WEBSITE', 'https:/\/your-website.com');  // 实际使用时要去掉链接的 \ ,这里是为了避免md直接吧双斜杠解析成注释了
define('DISQUS_SHORTNAME', 'your-disqus-shortname');
define('DISQUS_APPROVED', true);

这里要注意的是,DISQUS_WEBSITE选项中,域名不能这样写:‘https://reb.mallotec.com/‘,域名后不能以’/‘结尾,否则会出现一直创建Thread的情况

前端配置

disqus-php-api集成至hexo

修改 hexo 的主题配置文件
主题配置文件_config.yml中添加 disqusapi 相关参数

disqusapi:
  forum: 'your-short-name'
  site: 'https://your-site'
  api: 'https://your-site/.../disqus-php-api/api'
  mode: 1
  badge: '博主'
  timeout: 3000

参数参考文档:https://github.com/fooleap/disqus-php-api/blob/master/readme.md

  • forum:Disqus form的shortname
  • site:网站域名
  • api:PHP代码部署的网址:https://yoursite.com/disqus/api
  • mode:
    • 1 检测能否访问 Disqus,若能则加载 Disqus 原生评论框,超时则加载简易评论框
    • 2 仅加载简易评论框
    • 3 同时加载两种评论框,先显示简易评论框,Disqus 加载完成则切换至 Disqus 评论框
  • badge:管理员徽章文本
  • timeout:当mode为1时的超时时间

添加 disqusapi 模块

Material主题的 disqusapi 模块添加可以参考官方文档的评论系统适配指南
直接拷贝一份官方提供的 disqus 评论模块到<主题根目录>/layout/_widget/comment/disqusapi/下。下面是common.ejsenter.ejsmain.ejs的具体代码:

  • common.ejs

      <!-- 使用 DISQUS js 代码 -->
    

    common.ejs为空

  • enter.ejs

      <!-- 使用 DISQUS -->
      <% if(page.comments) {%>
      <link rel="stylesheet" href="/disqus-php-api-dist/iDisqus.min.css" />
      <script src="/disqus-php-api-dist/iDisqus.min.js"></script>
      <div id="comment">
          <%- partial('_widget/comment/' + theme.comment.use + '/main') %>
      </div>
      <style>
          #comment{
              background-color: #eee;
              padding: 2pc;
          }
      </style>
      <% } %>
    
    • page.comments是为了控制每一篇文章是否需要开启评论功能,需要在每一篇文章的Front-matter中设置comments={Boolean}
    • 如果服务器很远,连接比较慢,建议把iDisqus.min.cssiDisqus.min.js放到主题目录source里会更方便,渲染调试的时候直接从本地加载,不然调试的时候从网络加载半年网页都没加载完。当然,放到了CDN那更好,此处主要是为了方便hexo s调试。
  • main.ejs

<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('comment', {
            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>

最后编辑主题配置文件中的comment模块开启disqusapi

comment:
    use: disqusapi

问题

1.没有权限

参考:

问题如图:
disqus-php-api-no-permission

据作者 fooleap 所说,显示没有权限的话,就是没有权限在当前目录创建文件夹。
于是我修改了 api 所在目录的权限就好了:

sudo chown -R $USER:$USER path/to/disqus-php-api
sudo chmod -R 777 path/to/disqus-php-api

2.由于disqus没有本页面的项管thread,故需先创建thread

参考:https://blog.fooleap.org/disqus-php-api.html#comment-3829428059

据作者 fooleap 所说,加载评论框的页面,若在 Disqus 没有相关的 thread,是必须先手动创建的,不设置成自动是避免生成无用的 thread。若想自动创建可以在配置参数里添加autoCreate: true

  • 还有一种解决方法(推荐)
    如果出现创建thread的问题,那么可以通过 mode选择1,再翻墙访问你的文章页面,这时候加载原生Disqus评论系统,thread就创建成功了。
  • 特别要注意的是:如果你的文章标题中带有中文,会无法创建thread,所以不要使用中文命名文章。

参考链接