想白嫖式集成评论到你的网站吗？ 有朋友想了解我这个好看的网站是如何做的、如何运维？放心，后续我会一篇篇分模块分享，包括设计思路技巧等等~
思考
在做这个评论功能之前我在思考我是否需要自己收集、维护、利用评论数据，答案是可以但没必要。
我可以收集数据，但是我没必要写入自己的数据库
评论数据对于我来说，我只想有这个评论功能，看到数据就足够了，如果能满足基本的数据的存储我就不会去做个后台管理统计这个评论留言，网友的评论 kpi 我毫不关心，只专注于产品本身，所以我想利用第三方的存储平台来管理评论，不然浪费我最低配的阿里云服务器空间。
选择控件
我调研了 2 个第三方评论库，一个是基于 github 的 gitalk ，另一个是基于 twitter，作为一名程序员当然选 github 了，毕竟世界上最大的同性交友平台~
主要代码如下，参数细节点这里 gitalk，一步步按照文档来。
initGitalk() {
const gitalk = new Gitalk({
clientID: 'xxx',
clientSecret: 'xxx',
repo: 'gitalk.algesthesiahunter',
owner: 'Algesthesiahunter',
admin: ['Algesthesiahunter'],
id: this.$route.params.id,//这里最好传 文章专属id ，方便以后查询
distractionFreeMode: false,
})
gitalk.render('gitalk-container')
}
如何将 gitalk 评论数据与你的数据库联动
说下我这个网站的首页 群贤毕至 的筛选热门评论功能把，如何基于第三方完成
打开 github 的 api 网站 如下
{
issue_search_url: "https://api.github.com/search/issues?q={query}{&page,per_page,sort,order}",
issues_url: "https://api.github.com/issues",
keys_url: "https://api.github.com/user/keys",
}
我扫了一眼， gitalk 是基于 github 的仓库评论系统实现的，那么就是上面代码第二个字段 issues_url 了，点进去出现：
{
documentation_url: 'https://developer.github.com/v3/issues/#list-issues'
}
这就是github 的 issues api 接口文档了，其他文档查看方式同理然后点进去，看看如何满足自己需求查询关联数据。最后我需要的地址是
https://api.github.com/repos/Algesthesiahunter/gitalk.algesthesiahunter/issues 长这样，我还需要筛选出有 commit 的前 10 条
数据，最后我的是这样：
{
sort: 'comments',
creator: 'Algesthesiahunter',
per_page: 10,
}
点开上面的一长串 url，就能找到在一开始我写的 id 最好传 文章专属id里面的 labels 取出来，第一个 name 就是我要的 id 了。最后在 nest 服务端写个接口查询出来就完成联动了~
代码如下：
async searchHotCommitByGit(url, params) {
const gitRes = await this.http.get(url, { params }).toPromise();
return gitRes.data;
}
async searchHotArticle() {
const gitRes = await this.searchHotCommitByGit(
'https://api.github.com/repos/Algesthesiahunter/gitalk.algesthesiahunter/issues',
{
sort: 'comments',
creator: 'Algesthesiahunter',
per_page: 10,
},
);
const ids = gitRes.map(v => v.labels[0].name);
const promiseList = [];
ids.forEach(id =>
promiseList.push(this.articleModel.findById(id, { content: 0 })),
);
return Promise.all(promiseList).then(res => {
return new SuccessHttpResponse(res.filter(v => v));
});
}
至此完成了更具评论数筛选热门文章、白嫖评论收集、评论联动就是这么简单~
