{"id":16611061,"url":"https://github.com/shalldie/vue-git-comment","last_synced_at":"2025-03-21T14:31:03.816Z","repository":{"id":32472385,"uuid":"132643243","full_name":"shalldie/vue-git-comment","owner":"shalldie","description":"A vue's comment component based on github's issues. 基于 vue 和 github issue 的评论组件。","archived":false,"fork":false,"pushed_at":"2023-03-04T11:03:21.000Z","size":1590,"stargazers_count":14,"open_issues_count":19,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T02:11:15.866Z","etag":null,"topics":["comment","github","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shalldie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-08T17:34:53.000Z","updated_at":"2024-08-13T07:49:08.000Z","dependencies_parsed_at":"2024-10-28T10:29:46.175Z","dependency_job_id":"d78de79f-1382-4456-94c2-e622542aa9a2","html_url":"https://github.com/shalldie/vue-git-comment","commit_stats":{"total_commits":82,"total_committers":2,"mean_commits":41.0,"dds":0.04878048780487809,"last_synced_commit":"375eaf9dbb11fc067da5982196c1dda6f7681fcf"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shalldie%2Fvue-git-comment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shalldie%2Fvue-git-comment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shalldie%2Fvue-git-comment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shalldie%2Fvue-git-comment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shalldie","download_url":"https://codeload.github.com/shalldie/vue-git-comment/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244815118,"owners_count":20514893,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["comment","github","vue"],"created_at":"2024-10-12T01:34:32.608Z","updated_at":"2025-03-21T14:31:03.319Z","avatar_url":"https://github.com/shalldie.png","language":"TypeScript","readme":"# vue-git-comment\n\n[![npm][npm_image]][npm_url]\n[![gzip][gzip_image]][gzip_url]\n[![Github Actions][actions_image]][actions_url]\n[![license][license_image]][npm_url]\n\n这是一个基于 `github issues` 和 `vue` 的纯前端评论组件，不需要服务端。\n\n## Live Demo\n\nHave a look at [Demo](https://shalldie.github.io/demos/vue-git-comment/)\n\n## Installation\n\nlink:\n\n```html\n\u003cscript src=\"lib/vue.js\"\u003e\u003c/script\u003e\n\n\u003cscript src=\"dist/vue-git-comment.umd.min.js\"\u003e\u003c/script\u003e\n```\n\nnpm:\n\n```js\nnpm install vue-git-comment --save\n```\n\n## Usage\n\n```js\nimport VueGitComment from 'vue-git-comment';\n\n// var VueGitComment = window.VueGitComment;  // window\n// const VueGitComment = require('VueGitComment'); // commonjs\n```\n\n```js\n// regist 注册组件\n\nVue.use(VueGitComment); // global\n\nnew Vue({\n    el: 'body',\n    components: { VueGitComment } // local\n});\n```\n\n```js\n\u003ctemplate\u003e\n    \u003cvue-git-comment :options=\"options\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n    data() {\n        return {\n            options: {\n                clientID: 'clientID',\n                clientSecret: 'clientSecret',\n                owner: '仓库所有者',\n                repo: '仓库名称',\n                uuid: '唯一标识，用于区分不同文章'\n            }\n        };\n    }\n};\n\u003c/script\u003e\n```\n\n## Options\n\n评论系统基于 `github api` ， 需要 [去申请](https://github.com/settings/applications/new) 一个 `OAuth application`。\n\n| Name         |     Type      | Required |     Default      | Description                                   |\n| :----------- | :-----------: | :------: | :--------------: | :-------------------------------------------- |\n| clientID     |   `string`    |  `true`  |                  | 申请的 client_id                              |\n| clientSecret |   `string`    |  `true`  |                  | 申请的 client_secret                          |\n| owner        |   `string`    |  `true`  |                  | issue 所在仓库的所有者                        |\n| repo         |   `string`    |  `true`  |                  | 仓库名称                                      |\n| uuid         |   `string`    |  `true`  |                  | 用于区分文章的唯一标识，每个评论间不能重复    |\n| title        |   `string`    | `false`  | `document.title` | issue 使用的标题，选填。 默认使用当前页面标题 |\n| language     | `en \\| zh-CN` | `false`  |       `en`       | 国际化语言，选填。 默认使用 `en`              |\n| proxy        |   `string`    | `false`  |     `见下方`     | 获取 accessToken 的代理                       |\n\n默认代理使用 `https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token`\n\n## Similar Project\n\n同类作品有： [gitment](https://github.com/imsun/gitment) 、 [gitalk](https://github.com/gitalk/gitalk)\n\n## Why make this ?\n\n    Q：已经有2个类似的了，为啥还要再弄个轮子呢？\n\n最开始我用的是 gitment ，蛮好的，ui 也非常喜欢，我的这个项目在 ui 方面也是参考了 gitment，体积也不大，赞。\n但是慢慢找到如下缺点：\n\n    1.  作者自己搭了个服务去转发获取 token，我生怕哪一天...\n\n        这里我用的是 [cros-anywhere](https://cors-anywhere.herokuapp.com) 去转发，\n        哪怕有一天 anywhere 也挂了，也可以通过自定义 proxy 来调整。\n\n    2.  在移动端上稍微不太友好。\n    3.  不能倒序。\n    4.  不少请求都存在缓存，数据更新不及时。\n    5.  作者很久没有维护了。\n\ngitalk 我也特地去了解了一哈，也是非常优秀的一个项目。但是，\n\n    1.  体积蛮大，gzip 后 60k，这个用了 preact 没办法。\n    2.  没有分页。\n    3.  登陆后用的 `graphql` 去查询，这个能省好多流量。但是实际速度并没有提升。\n\n综上所述，在学习了 2 个项目的部分代码之后，决定自己搞个。\n\n    1.  通过一些算法实现倒序分页。\n    2.  利用一些方式避免了 options 请求，加快速度。\n    3.  体积不大，对于 vue 项目来说能省不少。\n    4.  想要更稳定、成熟的方案，建议去用 gitment 或 gitalk。\n\n## Enjoy it! \u003e\\_\u003c#@!\n\n[npm_image]: https://img.shields.io/npm/v/vue-git-comment.svg?logo=npm\u0026style=flat-square\n[npm_url]: https://www.npmjs.com/package/vue-git-comment\n[actions_image]: https://img.shields.io/github/workflow/status/shalldie/vue-git-comment/ci?label=build\u0026logo=github\u0026style=flat-square\n[actions_url]: https://github.com/shalldie/vue-git-comment/actions\n[gzip_image]: https://img.badgesize.io/https://cdn.jsdelivr.net/npm/vue-git-comment@0.0.16/dist/vue-git-comment.umd.min.js?compression=gzip\u0026style=flat-square\n[gzip_url]: https://cdn.jsdelivr.net/npm/vue-git-comment@0.0.16/dist/vue-git-comment.umd.min.js\n[license_image]: https://img.shields.io/npm/l/vue-git-comment.svg?style=flat-square\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshalldie%2Fvue-git-comment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshalldie%2Fvue-git-comment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshalldie%2Fvue-git-comment/lists"}