博客中，對于網(wǎng)友的評論以及每篇文章的評論數(shù)還是很重要的。但是基于靜態(tài)的頁面想要存儲動態(tài)的評論數(shù)據(jù)是比較難的，一般博客主題中都內(nèi)置了評論插件，但是博客主題中對于最新評論的支持顯示還是很少的，至少目前我是沒怎么發(fā)現(xiàn)。博客 Powered by Hexo & Icarus，采用Gitalk評論，再次感謝此三位作者的辛勤碼代碼，才有了以下的內(nèi)容。基于此背景基礎(chǔ)上，聊聊最新評論的實現(xiàn)。

博客的使用， Hexo & Icarus，采用Gitalk評論 的使用自行百度了。

使用場景

• 最新評論列表
• 最熱文章列表（基于評論數(shù)判斷是否最熱，也比較片面，但是側(cè)面也能反映，問題不大）

使用方法

主要參考自官方文檔

目前主要用到兩個方法，一個是獲取倉庫下所有的issue，每個issue節(jié)點下有相關(guān)的評論數(shù)，以及對應(yīng)issue下的評論的url;還有一個是根據(jù)issue下評論的URL獲取相應(yīng)的所有的評論

方法1：List issues for a repository

GET /orgs/:org/issues

參數(shù)列表

NameTypeDescription

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.

以上參數(shù)，主要用到 sort 排序，page頁數(shù)，per_page每頁數(shù)量，其余的參數(shù)看個人需要使用。注意文檔中的說明，排序的字段和返回的稍許不太一樣。

方法2：List comments on an issue

GET /repos/:owner/:repo/issues/:issue_number/comments

Issue Comments are ordered by ascending ID. 排序根據(jù) ascending (上升的，增長的；升（序）的)ID.也就是說，從老到新。這個比較坑，對于我們獲取最新評論來說。

參數(shù)如下

NameTypeDescription

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.

根據(jù)嘗試以及以上參數(shù)，試出不支持排序，但是支持分頁，page,per_page參數(shù)，對于我們獲取最新的評論來說可以根據(jù)評論數(shù)，算出分頁數(shù)，拿到最后一條，即最新一條

//如果只有一頁 int page = 1; int per_page = 1; // 如果超出一頁的話 int page = 2; int per_page = commentsNumber-1;//commentsNumber:評論數(shù)

js代碼中使用實例核心代碼

var timesSet = [];var timesBodyMap = {};var timesSetMap = {};var resultArr = [];// 方法1：sort=comments可以按評論數(shù)排序，此處更適合按更新時間排序,可以根據(jù)updated排序，但是0條評論的也會出來，所以此處還是根據(jù)評論數(shù)排序全部查出來，過濾掉0條評論的，拿到每個issue下最新的一條評論詳情和時間，根據(jù)時間內(nèi)存排序// per_page 每頁數(shù)量，根據(jù)需求配置$.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沒有排序參數(shù)，只能分頁取最后一條，保證最少的數(shù)據(jù)量傳輸，快速處理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();}// 根據(jù)需要取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]]]);}}

方法1：請求接口地址示例

https://api.github.com/repos/removeif/blog_comment/issues?per_page=100&sort=comments

返回結(jié)果

[{"url": "https://api.github.com/repos/removeif/blog_comment/issues/3","repository_url": "https://api.github.com/repos/removeif/blog_comment","labels_url": "https://api.github.com/repos/removeif/blog_comment/issues/3/labels{/name}","comments_url": "https://api.github.com/repos/removeif/blog_comment/issues/3/comments","events_url": "https://api.github.com/repos/removeif/blog_comment/issues/3/events","html_url": "https://github.com/removeif/blog_comment/issues/3","id": 458985510,"node_id": "MDU6SXNzdWU0NTg5ODU1MTA=","number": 3,"title": "留言板 - 辣椒の醬","user": {"login": "removeif","id": 10427139,"node_id": "MDQ6VXNlcjEwNDI3MTM5","avatar_url": "https://avatars1.githubusercontent.com/u/10427139?v=4","gravatar_id": "","url": "https://api.github.com/users/removeif","html_url": "https://github.com/removeif","followers_url": "https://api.github.com/users/removeif/followers","following_url": "https://api.github.com/users/removeif/following{/other_user}","gists_url": "https://api.github.com/users/removeif/gists{/gist_id}","starred_url": "https://api.github.com/users/removeif/starred{/owner}{/repo}","subscriptions_url": "https://api.github.com/users/removeif/subscriptions","organizations_url": "https://api.github.com/users/removeif/orgs","repos_url": "https://api.github.com/users/removeif/repos","events_url": "https://api.github.com/users/removeif/events{/privacy}","received_events_url": "https://api.github.com/users/removeif/received_events","type": "User","site_admin": false},"labels": [{"id": 1416043904,"node_id": "MDU6TGFiZWwxNDE2MDQzOTA0","url": "https://api.github.com/repos/removeif/blog_comment/labels/3306ea6632b94cc388b40cef9dda4a8f","name": "3306ea6632b94cc388b40cef9dda4a8f","color": "0e8a16","default": false},{"id": 1415994590,"node_id": "MDU6TGFiZWwxNDE1OTk0NTkw","url": "https://api.github.com/repos/removeif/blog_comment/labels/Gitalk","name": "Gitalk","color": "5319e7","default": false}],"state": "open","locked": false,"assignee": null,"assignees": [],"milestone": null,"comments": 33,"created_at": "2019-06-21T03:06:53Z","updated_at": "2019-09-12T10:37:34Z","closed_at": null,"author_association": "OWNER","body": "https://removeif.github.io/message/\r\n\r\n留言板信息。"},{...}]

方法2：請求接口地址示例

https://api.github.com/repos/removeif/blog_comment/issues/3/comments?per_page=32&page=2

返回結(jié)果

[{"url": "https://api.github.com/repos/removeif/blog_comment/issues/comments/530767913","html_url": "https://github.com/removeif/blog_comment/issues/3#issuecomment-530767913","issue_url": "https://api.github.com/repos/removeif/blog_comment/issues/3","id": 530767913,"node_id": "MDEyOklzc3VlQ29tbWVudDUzMDc2NzkxMw==","user": {"login": "removeif","id": 10427139,"node_id": "MDQ6VXNlcjEwNDI3MTM5","avatar_url": "https://avatars1.githubusercontent.com/u/10427139?v=4","gravatar_id": "","url": "https://api.github.com/users/removeif","html_url": "https://github.com/removeif","followers_url": "https://api.github.com/users/removeif/followers","following_url": "https://api.github.com/users/removeif/following{/other_user}","gists_url": "https://api.github.com/users/removeif/gists{/gist_id}","starred_url": "https://api.github.com/users/removeif/starred{/owner}{/repo}","subscriptions_url": "https://api.github.com/users/removeif/subscriptions","organizations_url": "https://api.github.com/users/removeif/orgs","repos_url": "https://api.github.com/users/removeif/repos","events_url": "https://api.github.com/users/removeif/events{/privacy}","received_events_url": "https://api.github.com/users/removeif/received_events","type": "User","site_admin": false},"created_at": "2019-09-12T10:37:34Z","updated_at": "2019-09-12T10:37:34Z","author_association": "OWNER","body": "> 哇 大佬你博客弄的好厲害啊 可以指點指點嗎\n>> @xuelangjing 還好吧?，簡簡單單的，可以多看下網(wǎng)頁上的源碼，有什么問題可以討論討論哦"} ]

博客中目前有兩個頁面使用,根據(jù)個人的需要放到各自的位置吧。

首頁熱門推薦

還有個最新評論頁：

擴展一個方法

上面的實例程序，每個issue（因為我的每個issue關(guān)聯(lián)一個文章鏈接）只取了一條最新的評論，假如每個issue下有兩個都是最新的評論，而我也不管是不是同一個issue下的評論，獲取所有的最新評論，還有一個方法比較好用。

List comments in a repository

GET /repos/:owner/:repo/issues/comments

By default, Issue Comments are ordered by ascending ID. 和上面一樣，但是以下參數(shù)就不一樣了

NameTypeDescription

sort	string	Either created or updated. Default: created
direction	string	Either asc or desc. Ignored without the sort parameter.
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.

多了排序字段和排序方式，也有per和per_page，這是相當?shù)挠杏冒?/p>

擴展方法：請求接口地址示例

https://api.github.com/repos/removeif/blog_comment/issues/comments?sort=updated&direction=desc&per_page=10&page=1

返回結(jié)果

[{"url": "https://api.github.com/repos/removeif/blog_comment/issues/comments/530767913","html_url": "https://github.com/removeif/blog_comment/issues/3#issuecomment-530767913","issue_url": "https://api.github.com/repos/removeif/blog_comment/issues/3","id": 530767913,"node_id": "MDEyOklzc3VlQ29tbWVudDUzMDc2NzkxMw==","user": {"login": "removeif","id": 10427139,"node_id": "MDQ6VXNlcjEwNDI3MTM5","avatar_url": "https://avatars1.githubusercontent.com/u/10427139?v=4","gravatar_id": "","url": "https://api.github.com/users/removeif","html_url": "https://github.com/removeif","followers_url": "https://api.github.com/users/removeif/followers","following_url": "https://api.github.com/users/removeif/following{/other_user}","gists_url": "https://api.github.com/users/removeif/gists{/gist_id}","starred_url": "https://api.github.com/users/removeif/starred{/owner}{/repo}","subscriptions_url": "https://api.github.com/users/removeif/subscriptions","organizations_url": "https://api.github.com/users/removeif/orgs","repos_url": "https://api.github.com/users/removeif/repos","events_url": "https://api.github.com/users/removeif/events{/privacy}","received_events_url": "https://api.github.com/users/removeif/received_events","type": "User","site_admin": false},"created_at": "2019-09-12T10:37:34Z","updated_at": "2019-09-12T10:37:34Z","author_association": "OWNER","body": "> 哇 大佬你博客弄的好厲害啊 可以指點指點嗎\n>> @xuelangjing 還好吧?，簡簡單單的，可以多看下網(wǎng)頁上的源碼，有什么問題可以討論討論哦"},{...}]

總結(jié)此擴展方法

優(yōu)點：對于不在乎issue數(shù)量，只在乎最新評論的就比較適用，能夠精準拿出前10條，很贊
不足：一個issue下多個最新評論，如果想要顯示的最新評論列表還包括文章標題，看起來可能不太好看，很多重復(fù)，但是看個人需要吧

注意事項，采坑環(huán)節(jié)

• 對應(yīng)接口的請求限制，目前接口有請求的限制，所以使用中不能頻繁請求，調(diào)試的時候一會兒又限制，一會兒又限制比較麻煩，限制十幾分鐘之后就解除了。
• 對于頁面中，一般很多個地方可能都需要展示這個列表，所以不能每次都去請求，必須緩存起來，一般緩存到本地，我的是存的cookie中，十分鐘去請求一次，所以調(diào)好后一般不會出現(xiàn)限制情況。但是馬上評論了的就看不到，有10分鐘的延遲，不過也還好。
• 對于如果issue以及評論太多的情況，盡量的少請求，比如上面的分頁優(yōu)化，取最后一條。以及頁面中請求時做出異步請求的方式，不要阻止其他元素的渲染。

本人主要做后端，對前端的set/排序不太熟悉，上面實現(xiàn)排序代碼比較繁瑣?，如果有什么更好的方法，麻煩也告知一下，互相學(xué)習共同進步。
個人博客，歡迎圍觀

轉(zhuǎn)載于:https://www.cnblogs.com/KongkOngL/p/11515728.html

總結(jié)

以上是生活随笔為你收集整理的博客中gitalk最新评论的获取 github api使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。