Blog, for a number of comments and the comments of friends each article is still very important. Based on static pages but want to store dynamic data is more difficult to comment, the general theme of blog comments are built plug-ins, but the blog topic for the latest comments show support or very little, at least for now is not how I found. Blog by Powered HEXO & Icarus , using Gitalk comment, thank the three authors of this hard-code the code again, have the following content. Based on this background, based on the latest talk realization comment.
Use the blog, HEXO & Icarus , using Gitalk review of the use of their own Baidu.
scenes to be used
- Latest Comments list
- The hottest article list (based on reviews to determine whether the number of the hottest, but also more one-sided, but also reflect the side, no problem)
Instructions
The main reference from official documents
Currently mainly used 两个方法, one is to get all of the issue at the warehouse, there are a number of comments related to each issue next node, and the corresponding url comments at issue.
方法1：List issues for a repository
GET /orgs/:org/issuesparameter list
| Name | Type | Description |
|---|---|---|
milestone |
integer or string |
If an integer is passed, it should refer to a milestone by its number field. If the string * is passed, issues with any milestone are accepted. If the string none is passed, issues without milestones are returned. |
state |
string |
Indicates the state of the issues to return. Can be either open, closed, or all. Default: open |
assignee |
string |
Can be the name of a user. Pass in none for issues with no assigned user, and * for issues assigned to any user. |
creator |
string |
The user that created the issue. |
mentioned |
string |
A user that's mentioned in the issue. |
labels |
string |
A list of comma separated label names. Example: bug,ui,@high |
sort |
string |
What to sort results by. Can be either created, updated, comments. Default: created |
direction |
string |
The direction of the sort. Can be either asc or desc. Default: desc |
since |
string |
Only issues updated at or after this time are returned. This is a timestamp in ISO 8601 format: YYYY-MM-DDTHH:MM:SSZ. |
The above parameters, mainly used in sort 排序，page页数，per_page每页数量the rest of the parameters of personal need. Note Note document, sort of field and returned a little not the same.
方法2：List comments on an issue
GET /repos/:owner/:repo/issues/:issue_number/commentsIssue Comments are ordered by ascending ID Sort ascending (rising, growth; liters (sequence) of). ID is to say, from old to new. Compare this pit, it is for us to obtain the latest comments.
Parameters are as follows
| Name | Type | Description |
|---|---|---|
since |
string |
Only comments updated at or after this time are returned. This is a timestamp in ISO 8601 format: YYYY-MM-DDTHH:MM:SSZ. |
According to the above parameters and try, try out 不支持排序，但是支持分页，page,per_page参数for us for the latest review is based on the number of comments can be calculated pagination, got the last one, that is, the latest a
//如果只有一页
int page = 1;
int per_page = 1;
// 如果超出一页的话
int page = 2;
int per_page = commentsNumber-1;//commentsNumber:评论数js core code used in the code example
var timesSet = [];
var timesBodyMap = {};
var timesSetMap = {};
var resultArr = [];
// 方法1：sort=comments可以按评论数排序，此处更适合按更新时间排序,可以根据updated排序，但是0条评论的也会出来，所以此处还是全部查出来，内存排序
// per_page 每页数量，根据需求配置
$.getJSON("https://api.github.com/repos/{用户名}/{仓库}/issues?per_page=100&sort=comments", function (result) {
$.each(result, function (i, item) {
var commentsCount = item.comments;
if (commentsCount > 0) {
$.ajaxSettings.async = false;
// 此处保证是最后一条，api没有排序参数，只能分页取最后一条，保证最少的数据量传输，快速处理
var page = 2;
var pageSize = commentsCount - 1;
if (commentsCount == 1) {
page = 1;
pageSize = 1;
}
// 方法2：的使用
$.getJSON(item.comments_url + "?page=" + page + "&per_page=" + pageSize, function (commentResult) {
var item1 = commentResult[0];
var contentStr = item1.body.trim();
if (contentStr.length > 50) {
contentStr = contentStr.substr(0, 60);
contentStr += "...";
}
timesSet.push(new Date(item1.created_at).getTime());
timesBodyMap[item1.created_at] = {
"title": item.title.substr(0, item.title.indexOf("-") - 1),
"url": item.body.substr(0, item.body.indexOf("\n") - 1),
"content": contentStr,
"date": item1.created_at,
"userName": item1["user"].login,
"userUrl": item1["user"].html_url,
"commentCount": commentsCount
};
timesSetMap[new Date(item1.created_at).getTime()] = item1.created_at;
});
}
});
});
// 排序
if (timesSet.length > 0) {
timesSet.sort();
}
// 根据需要取10条
if (timesSet.length > 10) {
for (var i = timesSet.length - 1; i >= 0 && resultArr.length < 10; i--) {
resultArr.push(timesBodyMap[timesSetMap[timesSet[i]]]);
}
}
else {
for (var i = timesSet.length - 1; i >= 0; i--) {
resultArr.push(timesBodyMap[timesSetMap[timesSet[i]]]);
}
}Blog currently has two pages use, into the respective positions based on individual needs it.
Note, Pit links
- Request limit corresponding to the interface, the interface is currently limited request, so can not use frequently requested, when debugging a while and restrictions, while they restrict too much trouble, restrictions lifted after ten minutes.
- 对于页面中，一般很多个地方可能都需要展示这个列表，所以不能每次都去请求，必须缓存起来，一般缓存到本地，我的是存的cookie中，十分钟去请求一次，所以调好后一般不会出现限制情况。但是马上评论了的就看不到，有10分钟的延迟，不过也还好。
- 对于如果issue以及评论太多的情况，尽量的少请求，比如上面的分页优化，取最后一条。以及页面中请求时做出异步请求的方式，不要阻止其他元素的渲染。
以上使用如果有什么更好的方法，麻烦也告知一下，互相学习共同进步。
个人博客，欢迎围观