一个静态评论系统的实现
这个文章会介绍以下的几方面：
- 我的使用场景
- 为什么要自己实现
- 实现的原理和用到的技术
- 遇到的问题
- 改进的地方
- 具体是如何做的
我的使用场景
我的 blog 使用的 github pages 搭建，没有使用现有的框架。静态页面使用的
org mode 生成。但是没有关系，这里用到的东西只需要嵌入到生成的 html 页面中就可以使用。
为什么要自己实现
现在有很多成熟的实现方案，比如说在国内的 多说, 还有国外的 disqus 。都有很多的限制，比如 多说 ，马上就要停止服务 。 disqus 在国外需要翻墙，
而且非常的卡。说是自己实现，其实是参考了很多的文章，下面我会列出。
原理和技术
这一部分主要说一下原理，以及用到的技术。
原理
因为我是用的 github pages 来部署的个人博客，所以这里就利用了它的
issues 。我期望的操作流程是这样的：
- 打开一个文章，显示对应的评论。
- 如果想评论，点击
button, 进行 github 授权。 - 如果还没有对应的 issue, 我就创建一个。
- 将评论添加到 issue 下。
- 在 blog 中获取最新的评论。
使用的技术
由于对前端技术不了解，现学习了下 jQuery。这里主要用了 ajax 发送请求，然后将结果显示在页面上。 比如说用 ajax 发送 GET 请求：
function test() {
jQuery.ajax({
type: 'GET',
async: false,
dataType:'json',
url: search_issues,
success:function(data) {
result = data;
}
});
return result;
}
以及发送 POST 请求：
function create(title) {
var creare = base_url + '/repos/' + owner + '/' + repo + '/issues';
var payload = {
'title': title,
'body': 'You can write comments in this issues.',
'labels': ['blog'],
}
$.ajax({
type: 'POST',
url: create,
crossDomain: true,
data: JSON.stringify(payload),
headers: {
'Authorization': 'Basic xxxxxxxxxxxxx', // auth2.0
'Access-Control-Allow-Origin' : '*'
},
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function(data){alert('create issue success');},
failure: function(errMsg) {
alert(errMsg);
}
});}
问题
elisp
由于是使用的 elisp 进行的相关设置，在 string 中的所有 双引号 都要使用 '\' 进行 escaping。
跨域请求（CORS）
如果打开一个 blog 没有对应的 issue, 我会发送一个 ajax 请求去创建一个。在本地测试没有问题，但是在生产环境就出现了 405（method not
allowed） 的错误。后来发现是 github pages 好像不支持 CORS。这其实就打断了这种 pipeline 了，所有的操作不能连接起来。
如何解决这个问题，有一个思路，还没有做。大体就是搭建一个 web api server, 然后通过这个 server 来去请求 github。 具体的实现应该是用 flask + heroku 来做。 这个部分已经实现了，可以看这里。
UI 上的问题
现在评论只能是进到 github 中去写评论。将来看能否直接集成到 blog 中来。这个要涉及到前端的东西，对我来说还是很费劲的。 类似于 这个。
具体的做法
代码在这里可以看到 static comment。对应的 css(css file) 文件，我直接 copy 的 GitHub hosted comments for GitHub hosted blogs 。
这里会用到 3 个 github 的 API（Github api） 分别如下:
这个用来模糊查询 issue：
{{base_api}}/search/issues?q=A Continuous Integration System+user:yydai+labels:blog
这个用来获取该 issue 下的 comments
{{base_api}}/repos/yydai/yydai.github.io/issues/1/comments
这个用来创建 issue
{{base_api}}/repos/yydai/yydai.github.io/issues
几个网站
在用 js 时做了几个 demo 测试，主要是在如下几个上面
Continue
一些具体的细节以后再补充完善
更新
- 添加了 Google 的访问统计功能