博客添加 Disqus 评论并使用 disqus-php-api 做国内转发

•  2019-07-09
• 折腾
• #Disqus
•  2019-07-18 18:40:20

因为我自己搞的评论太弱鸡了，所以最近把博客评论替换成了 Disqus；Disqus 被墙了，在国内无法正常访问，所以用 disqus-php-api 做了转发。

Disqus 注册和安装

注册 Disqus 账号

略

创建站点

前往 https://disqus.com/admin/create/ 填写表单，创建站点：

Disqus 正常安装

正常安装的 Disqus 国内无法访问，这里姑且说明下方法。

在管理页面点击安装 disqus：

由于没有使用任何博客程序，我只能选择 universal code 方式：

使用 universal code 的方式安装，复制通用代码到博客：

<div id="disqus_thread"></div>
<script>

/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://EXAMPLE.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

将上面 disqus_config 部分取消注释并补充完整，复制到博客页面显示评论的地方，基本就完成了，这个页面下方还介绍了显示评论数量的方法，我这里就无视了。

disqus-php-api 转发 Disqus API 请求

正常安装的 disqus 在国内访问不了，我找到了 disqus-php-api 这个项目来做转发。
disqus-php-api 是 Disqus 的接口封装，同时提供了前端显示。

disqus-php-api 部署

将 disqus-php-api 作为 php 项目部署到外网的主机上，才能够正常发挥作用。
我是 nginx+php7.2-fpm 的环境，nginx 配置文件如下：

server {
    listen 80;
    listen [::]:80;

    root /var/www/disqus-php-api;
    index index.php index.html index.htm index.nginx-debian.html;
    server_name disqus.low.bi;

    location / {
        try_files $uri $uri/ =404;
    }
    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
    }
}

使用 letsenvrypt获取 ssl 证书（certbot 方式：https://certbot.eff.org/lets-encrypt/ubuntubionic-nginx）后，完整的配置如下：

server {
    root /var/www/disqus-php-api;
    index index.php index.html index.htm index.nginx-debian.html;
    server_name disqus.low.bi;

    location / {
        try_files $uri $uri/ =404;
    }
    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
    }

    listen [::]:443 ssl; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/disqus.low.bi/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/disqus.low.bi/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}
server {
    if ($host = disqus.low.bi) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    listen 80;
    listen [::]:80;

    server_name disqus.low.bi;
    return 404; # managed by Certbot
}

此时已经可以正常访问 disqus-php-api 的静态文件部分，如 https://disqus.low.bi/now.json ，但是接口还不行，还需要修改 api/config.php 里的配置，为此需要注册一个 disqus app，并进一步完善配置信息。

注册 disqus app

前往 disqus api 注册一个应用：

注册成功后前往应用列表（https://disqus.com/api/applications/ ），点击应用，点击 settings 修改设置项：

Domains 里面填写需要使用 Disqus 的站点域名，Default Access 选最后一个，Callback URl 为回调，根据上面我的 nginx 配置，这里的地址是 https://部署的 disqus-php-api 域名/api/login.php。

完善 disqus-php-api 配置

编辑 disqus-php-api 的 api/config.php，把注册好的应用的 Secret Key 和 Public Key 填到相应的位置，shortname 是站点的短名称：

里面的其他配置项在代码注释里都有明确的说明。
此时 disqus-php-api 部署才算完成。

页面内添加评论

api 和应用都弄好了，下面就是前端部分，在页面内加上评论：

...
<!--引入CSS-->
<link rel="stylesheet" href="https://disqus.low.bi/dist/iDisqus.min.css"/>
...
<!--评论的容器-->
<div id="comment"></div>
...
<!--引入js-->
<script src="https://disqus.low.bi/dist/iDisqus.min.js"></script>
<!--实例化评论组件-->
<script>
    var disq = new iDisqus('comment', {
        forum: 'lowbi',
        site: 'https://low.bi',
        api: 'https://disqus.low.bi/api',
        url: '{{route('post.show', ['post'=>$post->hashid])}}',
        identifier: '{{$post->hashid}}',
        title: '{{$post->title}}',
        mode: 1,
        timeout: 3000,
        init: true,
        emojiPreview: true
    });
    disq.count();
</script>

具体的配置项见：disqus-php-api 配置。