博客中gitalk最新评论的获取 github api使用
博客中,對于網友的評論以及每篇文章的評論數還是很重要的。但是基于靜態的頁面想要存儲動態的評論數據是比較難的,一般博客主題中都內置了評論插件,但是博客主題中對于最新評論的支持顯示還是很少的,至少目前我是沒怎么發現。博客 Powered by Hexo & Icarus,采用Gitalk評論,再次感謝此三位作者的辛勤碼代碼,才有了以下的內容。基于此背景基礎上,聊聊最新評論的實現。
博客的使用, Hexo & Icarus,采用Gitalk評論 的使用自行百度了。
使用場景
- 最新評論列表
- 最熱文章列表(基于評論數判斷是否最熱,也比較片面,但是側面也能反映,問題不大)
使用方法
主要參考自官方文檔
目前主要用到兩個方法,一個是獲取倉庫下所有的issue,每個issue節點下有相關的評論數,以及對應issue下的評論的url;還有一個是根據issue下評論的URL獲取相應的所有的評論
方法1:List issues for a repository
GET /orgs/:org/issues參數列表
| 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. |
以上參數,主要用到 sort 排序,page頁數,per_page每頁數量,其余的參數看個人需要使用。注意文檔中的說明,排序的字段和返回的稍許不太一樣。
方法2:List comments on an issue
GET /repos/:owner/:repo/issues/:issue_number/commentsIssue Comments are ordered by ascending ID. 排序根據 ascending (上升的,增長的;升(序)的)ID.也就是說,從老到新。這個比較坑,對于我們獲取最新評論來說。
參數如下
| 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. |
根據嘗試以及以上參數,試出不支持排序,但是支持分頁,page,per_page參數,對于我們獲取最新的評論來說可以根據評論數,算出分頁數,拿到最后一條,即最新一條
//如果只有一頁 int page = 1; int per_page = 1; // 如果超出一頁的話 int page = 2; int per_page = commentsNumber-1;//commentsNumber:評論數js代碼中使用實例核心代碼
var timesSet = [];var timesBodyMap = {};var timesSetMap = {};var resultArr = [];// 方法1:sort=comments可以按評論數排序,此處更適合按更新時間排序,可以根據updated排序,但是0條評論的也會出來,所以此處還是根據評論數排序全部查出來,過濾掉0條評論的,拿到每個issue下最新的一條評論詳情和時間,根據時間內存排序// 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]]]);}}方法1:請求接口地址示例
https://api.github.com/repos/removeif/blog_comment/issues?per_page=100&sort=comments返回結果
[{"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返回結果
[{"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 還好吧?,簡簡單單的,可以多看下網頁上的源碼,有什么問題可以討論討論哦"} ]博客中目前有兩個頁面使用,根據個人的需要放到各自的位置吧。
首頁熱門推薦
還有個最新評論頁:
擴展一個方法
上面的實例程序,每個issue(因為我的每個issue關聯一個文章鏈接)只取了一條最新的評論,假如每個issue下有兩個都是最新的評論,而我也不管是不是同一個issue下的評論,獲取所有的最新評論,還有一個方法比較好用。
List comments in a repository
GET /repos/:owner/:repo/issues/commentsBy default, Issue Comments are ordered by ascending ID. 和上面一樣,但是以下參數就不一樣了
| 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,這是相當的有用啊
擴展方法:請求接口地址示例
https://api.github.com/repos/removeif/blog_comment/issues/comments?sort=updated&direction=desc&per_page=10&page=1返回結果
[{"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 還好吧?,簡簡單單的,可以多看下網頁上的源碼,有什么問題可以討論討論哦"},{...}]總結此擴展方法
優點:對于不在乎issue數量,只在乎最新評論的就比較適用,能夠精準拿出前10條,很贊
不足:一個issue下多個最新評論,如果想要顯示的最新評論列表還包括文章標題,看起來可能不太好看,很多重復,但是看個人需要吧
注意事項,采坑環節
- 對應接口的請求限制,目前接口有請求的限制,所以使用中不能頻繁請求,調試的時候一會兒又限制,一會兒又限制比較麻煩,限制十幾分鐘之后就解除了。
- 對于頁面中,一般很多個地方可能都需要展示這個列表,所以不能每次都去請求,必須緩存起來,一般緩存到本地,我的是存的cookie中,十分鐘去請求一次,所以調好后一般不會出現限制情況。但是馬上評論了的就看不到,有10分鐘的延遲,不過也還好。
- 對于如果issue以及評論太多的情況,盡量的少請求,比如上面的分頁優化,取最后一條。以及頁面中請求時做出異步請求的方式,不要阻止其他元素的渲染。
本人主要做后端,對前端的set/排序不太熟悉,上面實現排序代碼比較繁瑣?,如果有什么更好的方法,麻煩也告知一下,互相學習共同進步。
個人博客,歡迎圍觀
轉載于:https://www.cnblogs.com/KongkOngL/p/11515728.html
總結
以上是生活随笔為你收集整理的博客中gitalk最新评论的获取 github api使用的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Appium下载和安装
- 下一篇: 总结从linux - windows