背景故事
博客从去年多说评论关闭后就切换到 Disqus, 并且实现了国内 Disqus 代理服务, 国外访问直接引用 Disqus, 国内访问将显示简单输入框以及评论列表, 用户可以实现匿名评论并且通过代理提交到 Disqus.
代理服务的服务端通过 ciqulover 的项目 ciqulover/disqus-proxy 实现, 如果没有这个 prototype 我也不可能专注于接下来的设计.
新评论框功能
TODO:
- 点赞功能
- 跟踪版本更新功能
Finished:
- 分页功能
- 撰写调试指导
- 判断是否可以载入 Disqus 原生评论框, 如果可以则直接载入, 否则加载自定义评论框及评论列表
- 评论列表默认显示 50 条最近评论, 等我有时间来研究一下分页功能 - 匿名评论功能
- 回复特定历史评论
样式截图
Image 028.png
使用方法
首先你要有个 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">
后端配置
-
安装依赖
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插件
让服务跟随服务器自动启动
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
