Disqus评论框改造工程3-完全定制代理Disqus评论框

背景故事

博客从去年多说评论关闭后就切换到 Disqus, 并且实现了国内 Disqus 代理服务, 国外访问直接引用 Disqus, 国内访问将显示简单输入框以及评论列表, 用户可以实现匿名评论并且通过代理提交到 Disqus.

相关教程: 静态博客实现Disqus代理访问

代理服务的服务端通过 ciqulover 的项目 ciqulover/disqus-proxy 实现, 如果没有这个 prototype 我也不可能专注于接下来的设计.

新评论框功能

TODO:

• 点赞功能
• 跟踪版本更新功能

Finished:

• 分页功能
• 撰写调试指导
• 判断是否可以载入 Disqus 原生评论框, 如果可以则直接载入, 否则加载自定义评论框及评论列表
  - 评论列表默认显示 50 条最近评论, 等我有时间来研究一下分页功能
• 匿名评论功能
• 回复特定历史评论

样式截图

---

Image 028.png

---

使用方法

repo链接

首先你要有个 VPS, 并且 VPS 能够正常访问 Disqus

前端配置

首先将 client/static 文件夹 copy 到你的博客里面, 然后前端引用这些文件并且进行配置

    <!-- 必须提供一个 id 完全相同的 div -->
    <div id="disqus_thread"></div>

    <!-- 一些元素用到了 FA 的 icon, 这一段可以放到 header 里面 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


    <script>
      window.disqusProxy = {
        username:'szhshp',  // 你的 Disqus username
        server: 'xxx.xx.xxx.xx', // 你的 VPS IP
        port: 5000, // 这个 repo 的服务端对应的端口
        identifier: window.location.href // 页面 identifier, 一般就是页面 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.09c31d67.js'; //引用 static 文件夹下面的 JS
      s.async = true;
      document.body.appendChild(s);
    </script>
    <!-- 引用 static 文件夹下面的 CSS -->
    <link rel="stylesheet" href="/static/css/main.331fc925.css"> 

后端配置

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. 让服务跟随服务器自动启动

Forever 的使用

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

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

forever start app.js
forever stopall

服务器自动启动

参考另一篇文章: 优雅地乱玩Linux-7-Cron实现程序自启动

调试指导

服务端调试

本地运行的条件是本地已经可以访问 Disqus, 因此建议挂载到 VPS 进行 FTP 连接.

进入 \server 执行 node index.js 即可开启服务

客户端调试

进入 \client 执行 npm start 即可开启本地调试

客户端构建

npm run-script build