Done

  • 关于如何让服务端自启动
  • 关于Forever的使用方法
  • 添加近期评论的获取逻辑
  • 给显示效果里面添加截图
  • 核心内容
  • 评论框样式

关于博客评论

六月多说挂了,地球人都知道。

倡言、云跟帖、来必力都很烂,地球人都知道。

转Disqus的都是人才。

Disqus使用中遇到的问题

如果你常年写静态博客并且经常使用评论框,Disqus使用中你肯定会遇到一些问题,比如:

  1. 很难将其他平台的评论记录导入到Disqus
  2. 国内无法访问

第一个问题请参考之前的文章: Disqus评论框改造工程-“最近评论”的实现

迁移一般不成问题,不过国内访问依然是个大麻烦,于是这周我看了下使用反向代理实现Disqus国内访问的解决方案

Disqus国内访问

实现Disqus国内访问你需要几样东西:

  1. 你肯定要先有其他办法访问Disqus进行评论管理查看测试
    • 可以参考这篇文章( OmegaHosts-添加Hosts本该如此简单 )修改Hosts访问Disqus
    • 当然很多地方集成的Hosts文件里面也已经有Disqus的IP了,也可以直接拿来用,反正Disqus的IP不会像Google一样经常改变
  2. 你需要一台服务器/VPS,你可以偷室友的/抢基友的/用公司的/偷学校的或者自己买,无论如何你需要一个可以操作的服务器

代理思路

目的是让所有用户都能看到评论框。

  • 首先GFW封锁了Disqus,一般网络无法访问。
  • 使用VPN/Hosts的用户打通了Disqus访问的路径
    • 但是没有使用VPN/Hosts的访客依然无法查看Disqus

  • 首先判断用户是否可以访问原生Disqus,如果可以,直接访问不做处理
  • 如果不行,这时我们创建一个代理,将所有用户的访问都Redirect到代理服务器
    • 当然我们需要让服务器可以直接访问Disqus
    • 可以购买国外的服务器或者在服务器上运行VPN
  • 如此可以实现让所有用户访问评论框

要实现这个功能,可以用现成的轮子: https://github.com/ciqulover/disqus-proxy

后端配置

  1. clone repo

         git clone https://github.com/ciqulover/disqus-proxy
    
  2. 安装依赖

         npm i --production
         // 或者
         yarn install --production
    
  3. 配置 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 里开启访客评论

  4. 启动服务

         cd server
         node index.js
    

    正常运行服务,关闭ssh的时候就会关闭服务器,因此可以考虑使用forever插件

  5. 让服务跟随服务器自动启动

关于Cron的使用

优雅地乱玩Linux-7-Cron实现程序自启动

Forever 的使用

安装见官方Repo: https://github.com/foreverjs/forever

很简单,只需要学会启动和关闭两个命令即可。

forever start app.js
forever stopall

服务器自动启动

参考另一篇文章:

前端配置

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.Postcreate.json前后端交互的一切逻辑都符合官方API的需求,但是偏偏就是无法添加新的匿名评论。

调查许久后,发现有一个key有些特殊:Post到create.json这个接口的时候对应的API_Key 是一个固定的值,而不是自己的Public Key或者Secret Key,这一点可以通过自己添加一个新的评论然后抓包证实。

同时很多文章也提到了这个问题(虽然没有feedback但是这儿是正确答案):Creating an anonymous post with disqus API fails

也就是说:原代码中需要将动态的个人PublicKey改为一个固定值即可实现匿名评论

因此,将上面轮子里面的一个螺丝钉换一下即可:将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

最近评论的代理

这个比较简单,在服务端添加一个路径绑定,将/api/listPosts重定向到https://disqus.com/api/3.0/forums/listPosts.json

然后直接call就可以获得一段Json,最终在前端解析一下即可。

Server端代码:

  router.get('/api/listPosts', async function (ctx) {
    logger.info('Get Comments with identifier: ' + ctx.request.query.identifier)
    let result

    try {
      result = await rq(Object.assign(req, {
        method: 'GET',
        url: 'https://disqus.com/api/3.0/forums/listPosts.json?' +
        'api_key=' + config.api_key +
        '&forum=' + config.username +
        '&limit=12',
        json: true
      }))
    } catch (e) {
      ctx.body = e.error
      logger.error('Error when get comment:' + JSON.stringify(e.error))
      return
    }
    logger.info('Get comments successfully with response code: ' + result.code)
    ctx.body = result
  })

前端代码:

$.ajax({
  url: 'http://123.123.123.321:3000/api/listPosts',
  dataType: 'json'
}).done(function(res) {
  for (var i = 0; i < res.response.length; i++) {
    $(' ' + res.response[i].author.name+ ':  '+res.response[i].raw_message+' 
').appendTo('#recentComments'); }; $('#recentComments').toggleClass('show'); }).fail(function() { })

这下终于可以让所有人在我博客评论了

参考文献

Disqus-Proxy 配置说明

  • 文章标题: 《Disqus评论框改造工程-静态博客实现Disqus代理访问》
  • 发布日期: 2017-08-20
  • 文章分类: Tech
  • 相关标签: Linux disqus jekyll
  • Extra:
    • Mood: 4/10
    • Sleep: 1/10
    • Hunger: 7/10
    • Daily Buff: 终于完成了这个代理功能
    • Daily Debuff: 好累啊