Disqus评论框改造工程-Jekyll等静态博客实现Disqus代理访问
Updated 2018-09-19: 我写了个更好看的评论框并且已经开源, 到这里试试吧: https://github.com/szhielelp/disqus-proxy
关于博客评论
六月多说挂了,地球人都知道。
倡言、云跟帖、来必力都很烂,地球人都知道。
转Disqus的都是人才。
Disqus使用中遇到的问题
如果你常年写静态博客并且经常使用评论框,Disqus使用中你肯定会遇到一些问题,比如:
- 很难将其他平台的评论记录导入到Disqus
- 国内无法访问
第一个问题请参考之前的文章: Disqus评论框改造工程-"最近评论"的实现
迁移一般不成问题,不过国内访问依然是个大麻烦,于是这周我看了下使用反向代理实现Disqus国内访问的解决方案
Disqus国内访问
实现Disqus国内访问你需要几样东西:
- 你肯定要先有其他办法访问Disqus进行评论管理查看测试
- 可以参考这篇文章( OmegaHosts-添加Hosts本该如此简单 )修改Hosts访问Disqus
- 当然很多地方集成的Hosts文件里面也已经有Disqus的IP了,也可以直接拿来用,反正Disqus的IP不会像Google一样经常改变
- 你需要一台服务器/VPS,你可以偷室友的/抢基友的/用公司的/偷学校的或者自己买,无论如何你需要一个可以操作的服务器
代理思路
目的是让所有用户都能看到评论框。
- 首先GFW封锁了Disqus,一般网络无法访问。
- 使用
VPN/Hosts
的用户打通了Disqus访问的路径- 但是没有使用
VPN/Hosts
的访客依然无法查看Disqus
- 但是没有使用
- 首先判断用户是否可以访问原生Disqus,如果可以,直接访问不做处理
- 如果不行,这时我们创建一个代理,将所有用户的访问都Redirect到代理服务器
- 当然我们需要让服务器可以直接访问Disqus
- 可以购买国外的服务器或者在服务器上运行VPN
- 如此可以实现让所有用户访问评论框
要实现这个功能,可以用现成的轮子: https://github.com/ciqulover/disqus-proxy
后端配置
-
clone repo
git clone https://github.com/ciqulover/disqus-proxy
-
安装依赖
npm i --production // 或者 yarn install --production
-
配置 server 目录下的config.js
module.exports = { // 服务端端口,需要与 disqus-proxy 前端设置一致 port: 5509, // 你的 diqus secret key api_secret: 'your secret key', // 你的 disqus 名称,就是forum名称 username:'ciqu', // 服务端 socks5 代理转发,便于在本地测试,生产环境通常为 null socks5Proxy: null, // 日志输出位置, 输出到文件或控制台 'file' | 'console' log: 'console' }
api secret key需要在Disqus的API页面申请
另外需要到Settings => Community
里开启访客评论
-
启动服务
cd server node index.js
正常运行服务,关闭ssh的时候就会关闭服务器,因此可以考虑使用forever插件
前端配置
将build里面的几个文件夹放到自己项目路径,修改对应引用路径:
<*div id="disqus_proxy_thread"><*/div> <*div id="disqus_thread"><*/div> <*script> window.disqusProxy = { username:'szhshp', --同样是Forum名字 server: '123.123.123.321', --这里是服务器IP port: 3000, defaultAvatar: '/img/default-avatar.png', --默认头像 adminAvatar: '/img/admin-avatar.png', --自己的头像 identifier: window.location.href --就是辨识符这样的东西,一般是用当前url }; window.disqus_config = function () { this.page.url = window.location.href; this.page.identifier = window.location.href; }; var s = document.createElement('script'); s.src = '/static/js/main.0d0338ae.js'; s.async = true; document.body.appendChild(s); <*/script> <*link rel="stylesheet" href="/static/css/main.0603c539.css">
配置完成后,访问对应页面,如果当前网络状况无法访问Disqus,则会显示一个精简版的评论框,这个评论框仅支持添加匿名评论。
如果可以访问Disqus,就会显示原生Disqus评论框。
好,代理搭建完成,但是这还没有完成,还存在几个问题
Trouble Shooting
This application cannot create posts on the chosen forum
这个问题看了我两天
原来代码里面其实存在一个大问题,最大的问题就是一切配置正常的情况下,无法添加新的评论
对应的Post报错:This application cannot create posts on the chosen forum
这个很是奇怪,添加新评论将会通过Http.Post到 create.json前后端交互的一切逻辑都符合官方API的需求,但是偏偏就是无法添加新的匿名评论。
调查许久后,发现有一个key有些特殊:Post到create.json
这个接口的时候对应的API_Key
是一个固定的值,而不是自己的Public Key
或者Secret Key
,这一点可以通过自己添加一个新的评论然后抓包证实。
同时很多文章也提到了这个问题(虽然没有feedback但是这儿是正确答案):Creating an anonymous post with disqus API fails
因此,将上面轮子里面的一个螺丝钉换一下即可:将post的其中一个参数改为固定值:
router.post('/api/createComment', async function (ctx) { logger.info('Create comment: ' + JSON.stringify(ctx.request.body)) let result try { result = await rq(Object.assign(req, { url: 'https://disqus.com/api/3.0/posts/create.json', method: 'POST', form: Object.assign(ctx.request.body, { api_key: 'E8Uh5l5fHZ6gD8U3KycjAIAk46f68Zw7C6eW8WSjZvCLXebZ7p0r1yrYDrLilk2F' //就是这儿!!!之前用的是public key!!!!!! }), json: true })) } catch (e) { logger.error('Error when create comment:' + JSON.stringify(e.error)) ctx.body = e.error return } ctx.body = result logger.info('Create comment successfully with response code: ' + result.code) })
关于这个问题,有可能是Disqus方面后期修改的,导致原始代码无法创建新评论。
最终改造
Fix之后,我还修改了一些前端Style:
最终的repo在这儿: https://github.com/szhielelp/disqus-proxy
这下终于可以让所有人在我博客评论了