使用新浪微博开放平台api同步微博内容至自己网站(静态博客框架Hexo入门，本文评论系统怎么做？)

　　使用新浪微博开放平台api同步微博内容至自己网站(静态博客框架Hexo入门，本文评论系统怎么做？)

　　本文仅介绍如何基于github问题实现第三方评论系统。对于 Hexo 的介绍，本文不打算赘述。如果有之前不了解Hexo的童鞋，可以看看之前的文章《Hexo介绍，一个静态博客框架》，或者直接访问Hexo官网

　　一、原因

　　个人博客基于静态博客系统（Hexo），没有任何后端功能，如搜索和评论系统。不过，如果想给静态博客添加评论功能，也不是没有可能。这时候就必须使用第三方评论系统。

　　什么是第三方评论系统？博客或 cms 系统通常由两部分组成：内容和评论。评论可以增加博主与用户之间的互动，也是博主传达思想和观点的一对多交流平台。所以除了社区平台，评论也成为了一般博客和cms系统的必备功能。大型网站自己开发评论系统和分享系统，一般中小网站自己开发评论系统，成本高。而且垃圾评论和非法关键词过滤比较困难，所以*敏*感*词*都有第三方评论系统。以下是一些曾经流行或现在流行的第三方评论系统。

　　那么回到主题，市面上的第三方评论系统太多了，哪怕只有一两个宕机了，选择还是很多的。为什么要自己做一个？这不是造轮子吗？其实刚开始的时候，我话很多，心里也很高兴。突然有一天我说我挂了。没有办法。然后我选择了另一个，然后我将其更改为网易云。过了一会儿，网易云也死了。

　　后来在网上搜了搜，发现居然有人用GitHub Issue做了一个评论系统。这无疑是一个非常好的想法，非常有创意。当然我也用过，但总觉得有点难看，和自己博客的主题不符。只用了两天，我就把它撤了。我打算自己做一个。就去做吧，程序员总喜欢造轮子。

　　二、什么是 GitHub 问题

　　如果你经常访问GitHub的童鞋，你应该知道这个功能。有人了解GitHub的问题功能，就像TODO列表一样。你可以把下一步想要完成的所有工作，比如功能添加、bug修复等，都写到一个issue里面，放在上面。它可以用作提醒或统一管理。此外，每个提交都可以有选择地与一个问题相关联。例如，通过在消息中添加 #n，它可以与第 n 个问题相关联。详情请参考知乎。其他人对“github问题”做了什么？”答案。而这个博客的评论数据存储issues仓库地址是，仓库里没有托管代码。总之，如果我想用github Issues做一个评论系统，我实际上是把数据存储在github issues .

　　三、评论系统实现

　　准备工作

　　

　　应用名称：您的站点名称；

　　主页网址：您的网站主页链接；

　　应用描述：站点描述；

　　授权回调地址：GitHub授权成功后的返回地址

　　创建成功后，会生成一个Client ID和一个Client Secret。

　　GitHub 提供了很多方便第三方开发的API。当然，添加、删除、修改、检查github问题的API也在其中。有了这些API，你就可以执行各种技巧，比如我们现在要写的评论系统。此外，也有人怀疑我们是否应该“滥用”这些 API。不过我个人觉得GitHub既然提供了这些API，也就意味着把这些权限开放给大家，大家不要害怕“滥用”。那么，需要哪些API来满足我们目前的需求，下面就让我一一列举，以我的账号为例，jangdelong是Github名称，blog_comments是仓库名称。

　　GET：获取所有问题信息

　　GET：获取问题下的信息（11 是问题编号）

　　GET: comments 获取问题下的评论

　　GET：获取评论ID 111下的所有反应（反应包括[+1]、不喜欢[-1]、喜欢[心]等字段）

　　POST：创建一个问题

　　POST：在问题编号 11 下创建评论

　　POST：在 ID 为 111 的评论下创建一个反应（例如*敏*感*词*）

　　POST：markdown语法解析接口

　　整体设计

　　流程图：

　　 |--> 显示已登录

|--> 已登录 --> |--> 加载评论列表 --> 分页加载

| |--> 其他

| |--> 评论操作 --> 成功/失败 |

开始 --> GitHub 授权登录 ? --> | |--> 结束

| |--> 显示未登录 |

|--> 未登录 --> |--> 加载评论列表 --> 分页加载

|--> 其他

|--> 评论操作 --> 提示未登录状态

　　效果图：

　　

　　因此，我们可以将评论系统分为列表（list）、评论框（box）、顶部登录状态栏（signbar）等部分。View部分的代码组织为：

　　// 为了减少全局变量，整个网站就暴露一个全局变量 JELON

var JELON = JELON || {};

;(function (JL) {

...

JL.Renders = {

// 列表模块

list: {

tpl: ...,

...

},

// 评论框模块

box: {

tpl: ...,

...

},

// 顶部登录状态栏

signBar: {

tpl: ...,

...

},

... // 其他模块视图

};

...

})(JELON);

　　将视图部分的代码整理好后，我们根据GitHub提供的各种API将其封装在Requests中，整理如下：

　　// 为了减少全局变量，整个网站就暴露一个全局变量 JELON

var JELON = JELON || {};

;(function (JL) {

...

JL.Requests = {

// 根据 label 获取 issue 编号

getIssueNumberByLabel: function () { ... },

// 创建 issue

createIssue: function () { ... },

// 根据 issue 编号获取评论列表

getCommentListByIssueNumber: function () { ... },

// 根据评论 ID 获取 reactions （即点赞数据）

getReactionsByCommentId: function () { ... },

// markdown 解析

markdown: function () { ... },

// 通过 code 获取 access_token

getAccessToken: function () { ... },

// 利用 access_token 去获取 GitHub 用户信息

getUserInfo: function () { ... },

// 创建评论

createComment: function () { ... },

// 创建 reactions （点赞）

createReaction: function () { ... }

};

...

})(JELON);

　　下一步是封装事件操作。我们将其封装到 Actions 中。代码组织如下：

　　// 为了减少全局变量，整个网站就暴露一个全局变量 JELON

var JELON = JELON || {};

;(function (JL) {

...

JL.Actions = {

// 初始加载，如列表、登录状态等

init: function () { ... },

// 登出操作

signOut: function () { ... },

// 列表翻页跳转

pageJump: function () { ... },

// 编辑预览

editPreviewSwitch: function () { ... },

// 提交评论操作

postComment: function () { ... },

// 点赞操作

like: function () { ... }

};

...

})(JELON);

　　程序入口：

　　// 为了减少全局变量，整个网站就暴露一个全局变量 JELON

var JELON = JELON || {};

;(function (JL) {

...

JL.Comment = function (options) {

JL.options = options || {};

$('comments').innerHTML = [

this.Renders.signBar.tpl,

this.Renders.box.tpl,

this.Renders.tips,

this.Renders.list.tpl

].join('');

JL.Actions.init();

};

...

})(JELON);

　　登录流程

　　GitHub授权登录是必不可少的功能，登录后才能发表评论。 前面说过，GitHub授权登录遵循OAuth2.0标准。下面是OAuth2.0的操作流程，让我们更好的理解。

　　

　　那么，GitHub 授权登录是如何按照这个标准进行的呢？我们来简单介绍一下。如果想更详细的了解，也可以访问GitHub官方文档。

　　用户发起重定向请求授权服务器换取code

　　`GET http://github.com/login/oauth/authorize`

　　拿到code后，用client_id、client_secret和code兑换token_access。（上面的准备工作中提到了client_id和client_secret）

　　`POST https://github.com/login/oauth/access_token`

　　获取token_access后，我们可以使用token_access获取登录用户的信息

　　`GET https://api.github.com/user`

　　经过以上3步，GitHub授权登录就完成了。

　　四、如何使用评论系统

　　介绍评论系统相关的css和js。引入相关样式和脚本后，在页面中添加以下代码：

　　

JELON.Comment({

container: 'comments', // 评论框容器id或对象，留空是默认为 comments

label: '' || '', // 文章标签

owner: '', // GitHub application 创建者

repo: '', // issue 所在仓库名

clientId: '', // GitHub application client_id

clientSecret: '' // GitHub application client_secret

});

　　由于这个评论系统要集成到个人主题中，所以应该配合hexo-theme-xups使用。hexo-theme-xups 的主题链接是最新的主题（带GitHub登录评论功能），后续会更新上来，当然以后会持续更新优化，欢迎多多star。五、遇到的问题

　　主要遇到三个问题，一个是标签权限的创建，一个是跨域问题，一个是GitHub授权登录兼容性问题。

　　创建标签权限问题（目前未解决）。标签是文章和issue之间的链接，因为我们需要使用标签来查询issue号，以便后续的流程可以继续。现在遇到的问题是，对于新的文章，只有自己账号（GitHub Application）的创建者才能创建带有标签的issue。参考GitHub界面（POST /repos/:owner/:repo/issues）文档，上面说了

　　> Labels to associate with this issue. NOTE: Only users with push access can set labels for new issues. Labels are silently dropped otherwise.

　　跨域问题（暂时解决）。主要目的是交换 token_access POST 的代码。这个接口是跨域的。临时解决办法是

　　使用:///login/oauth/access_token 进行转发。看：。GitHub授权登录兼容性问题（暂未解决）。经过简单的测试，发现PC端的兼容性问题主要是一些旧版本的浏览器，包括一些旧版本的谷歌浏览器（版本号55.x.xxxx.xx）；而移动端主要是UC浏览器，无法实现GitHub授权登录。