博客中gitalk最新评论的获取 github api使用
生活随笔
收集整理的這篇文章主要介紹了
博客中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下载和安装
- 下一篇： 小程序云开发实战 - 口袋工具之“历史上