博客添加 Disqus 评论并使用 disqus-php-api 做国内转发
因为我自己搞的评论太弱鸡了,所以最近把博客评论替换成了 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 配置。