Reborn's Blog
首页 时间轴 分类 标签 复习 友链 关于
Reborn's Blog

目录

Disqus API科学评论大法

Reborn 收录于 hexo
   约 2515 字   预计阅读 6 分钟 

背景

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

原理

我们可以来看看disqus反向代理的原理图：

https://cdn.jsdelivr.net/gh/RebornQ/cdn.blog/img/disqus-api-diagram.png
disqus-api-diagra

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

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

工具介绍

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

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

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

配置

  • 一台国外的VPS服务器

后端配置

获取 disqus-php-api

1

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

移动并重命名

1

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 中的注释修改相应配置：

1
2
3
4
5
6
7
8
9

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 相关参数

1
2
3
4
5
6
7

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.ejs、enter.ejs、main.ejs的具体代码：

  • common.ejs

    1

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

    common.ejs为空

  • enter.ejs

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

    <!-- 使用 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.css和iDisqus.min.js放到主题目录的source里会更方便，渲染调试的时候直接从本地加载，不然调试的时候从网络加载半年网页都没加载完。当然，放到了CDN那更好，此处主要是为了方便hexo s调试。

  • main.ejs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<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：

1
2

comment:
    use: disqusapi

问题

1.没有权限

参考：

问题如图：

https://cdn.jsdelivr.net/gh/RebornQ/cdn.blog/img/disqus-php-api-no-permission.png
disqus-php-api-no-permission

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

1
2

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，所以不要使用中文命名文章。

参考链接

更新于 2018-08-05
 hexo, Disqus
返回 | 主页