{"id":13438458,"url":"https://github.com/gitalk/gitalk","last_synced_at":"2025-05-14T03:04:04.862Z","repository":{"id":37470807,"uuid":"97216102","full_name":"gitalk/gitalk","owner":"gitalk","description":"Gitalk is a modern comment component based on Github Issue and Preact.","archived":false,"fork":false,"pushed_at":"2024-07-30T09:36:07.000Z","size":3665,"stargazers_count":7107,"open_issues_count":150,"forks_count":618,"subscribers_count":48,"default_branch":"master","last_synced_at":"2025-04-09T02:12:38.977Z","etag":null,"topics":["comment","github","github-issues","plugin","preact","react"],"latest_commit_sha":null,"homepage":"https://gitalk.github.io","language":"JavaScript","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/gitalk.png","metadata":{"files":{"readme":"readme-cn.md","changelog":"CHANGELOG.md","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":"2017-07-14T09:16:22.000Z","updated_at":"2025-04-07T04:15:07.000Z","dependencies_parsed_at":"2023-02-04T05:16:28.027Z","dependency_job_id":"4a226164-1032-4552-97c8-a2c6d639c3fb","html_url":"https://github.com/gitalk/gitalk","commit_stats":{"total_commits":177,"total_committers":43,"mean_commits":4.116279069767442,"dds":"0.36723163841807904","last_synced_commit":"409cd990dc3d060fde1d228332baa7e4862a84ff"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitalk%2Fgitalk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitalk%2Fgitalk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitalk%2Fgitalk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitalk%2Fgitalk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gitalk","download_url":"https://codeload.github.com/gitalk/gitalk/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254059485,"owners_count":22007768,"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","github-issues","plugin","preact","react"],"created_at":"2024-07-31T03:01:05.695Z","updated_at":"2025-05-14T03:04:04.782Z","avatar_url":"https://github.com/gitalk.png","language":"JavaScript","readme":"# Gitalk\n\n[![NPM][npm-version-image]][npm-version-url] \n[![CDNJS][cdnjs-version-image]][cdnjs-version-url] \n[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/gitalk/badge)](https://www.jsdelivr.com/package/npm/gitalk)\n[![david-dm][david-dm-image]][david-dm-url] \n[![travis][travis-image]][travis-url] \n[![coveralls][coveralls-image]][coveralls-url] \n[![gzip-size][gzip-size]][gzip-url]\n\nGitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。\n\n## 特性\n\n- 使用 GitHub 登录\n- 支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko, fa, ja]\n- 支持个人或组织\n- 无干扰模式（设置 distractionFreeMode 为 true 开启）\n- 快捷键提交评论 （cmd|ctrl + enter）\n\n[Readme](https://github.com/gitalk/gitalk/blob/master/readme.md)\n[在线示例](https://gitalk.github.io)\n\n## 安装\n\n两种方式\n\n- 直接引入\n\n```html\n  \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css\"\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js\"\u003e\u003c/script\u003e\n\n  \u003c!-- or --\u003e\n\n  \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/gitalk/dist/gitalk.css\"\u003e\n  \u003cscript src=\"https://unpkg.com/gitalk/dist/gitalk.min.js\"\u003e\u003c/script\u003e\n```\n\n- npm 安装\n\n```sh\nnpm i --save gitalk\n```\n\n```js\nimport 'gitalk/dist/gitalk.css'\nimport Gitalk from 'gitalk'\n```\n\n## 使用\n\n首先，您需要选择一个公共github存储库（已存在或创建一个新的github存储库）用于存储评论，\n\n然后需要创建 **GitHub Application**，如果没有 [点击这里申请](https://github.com/settings/applications/new)，`Authorization callback URL` 填写当前使用插件页面的域名。\n\n最后, 您可以选择如下的其中一种方式应用到页面：\n\n### 方式1\n\n添加一个容器：\n\n```html\n\u003cdiv id=\"gitalk-container\"\u003e\u003c/div\u003e\n```\n\n用下面的 Javascript 代码来生成 gitalk 插件：\n\n```js\nvar gitalk = new Gitalk({\n  clientID: 'GitHub Application Client ID',\n  clientSecret: 'GitHub Application Client Secret',\n  repo: 'GitHub repo',\n  owner: 'GitHub repo owner',\n  admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],\n  id: location.pathname,      // Ensure uniqueness and length less than 50\n  distractionFreeMode: false  // Facebook-like distraction free mode\n})\n\ngitalk.render('gitalk-container')\n```\n\n### 方式2：在React使用\n\n使用以下代码引入Gitalk组件\n\n```jsx\nimport GitalkComponent from \"gitalk/dist/gitalk-component\";\n```\n\n按以下方式在React中使用Gitalk组件\n\n```jsx\n\u003cGitalkComponent options={{\n  clientID: \"...\",\n  // ...\n  // 设置项\n}} /\u003e\n```\n\n## 设置\n\n- **clientID** `String` \n\n  **必须**. GitHub Application Client ID.\n\n- **clientSecret** `String` \n\n  **必须**. GitHub Application Client Secret.\n\n- **repo** `String` \n\n  **必须**. GitHub repository.\n\n- **owner** `String` \n\n  **必须**. GitHub repository 所有者，可以是个人或者组织。\n\n- **admin** `Array` \n\n  **必须**. GitHub repository 的所有者和合作者 (对这个 repository 有写权限的用户)。\n\n- **id** `String` \n  \n  Default: `location.href`.\n\n  页面的唯一标识。长度必须小于50。\n  \n- **number** `Number` \n  \n  Default: `-1`.\n\n  页面的 issue ID 标识，若未定义`number`属性则会使用`id`进行定位。\n\n  提示：可以使用正则从 `URL` 中提取其中一部份作为 `id`。例如：`location.href.match('/(?\u003c=posts/)(.*)(?=/)/')[1]`\n\n- **labels** `Array` \n  \n  Default: `['Gitalk']`.\n\n  GitHub issue 的标签。\n\n- **title** `String` \n  \n  Default: `document.title`.\n\n  GitHub issue 的标题。\n\n- **body** `String` \n  \n  Default: `location.href + header.meta[description]`.\n\n  GitHub issue 的内容。\n\n- **language** `String` \n  \n  Default: `navigator.language || navigator.userLanguage`.\n\n  设置语言，支持 [en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko, fa, ja]。\n\n- **perPage** `Number` \n  \n  Default: `10`.\n\n  每次加载的数据大小，最多 100。\n\n- **distractionFreeMode** `Boolean` \n  \n  Default: false。\n\n  类似Facebook评论框的全屏遮罩效果.\n\n- **pagerDirection** `String`\n\n  Default: 'last'\n\n  评论排序方式， `last`为按评论创建时间倒叙，`first`为按创建时间正序。\n\n- **createIssueManually** `Boolean` \n  \n  Default: `false`.\n\n  如果当前页面没有相应的 isssue 且登录的用户属于 admin，则会自动创建 issue。如果设置为 `true`，则显示一个初始化页面，创建 issue 需要点击 `init` 按钮。\n\n- **proxy** `String` \n\n  Default: `https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token`.\n\n   GitHub oauth 请求到反向代理，为了支持 CORS。 [为什么要这样?](https://github.com/isaacs/github/issues/330)\n\n- **flipMoveOptions** `Object` \n  \n  Default:\n  ```js\n    {\n      staggerDelayBy: 150,\n      appearAnimation: 'accordionVertical',\n      enterAnimation: 'accordionVertical',\n      leaveAnimation: 'accordionVertical',\n    }\n  ```\n\n  评论列表的动画。 [参考](https://github.com/joshwcomeau/react-flip-move/blob/master/documentation/enter_leave_animations.md)\n\n- **enableHotKey** `Boolean` \n  \n  Default: `true`.\n\n  启用快捷键(cmd|ctrl + enter) 提交评论.\n\n\n## 实例方法\n\n- **render(String/HTMLElement)**\n\n  初始化渲染并挂载插件。\n\n## TypeScript\n\n已经包括了配置项和Gitalk类的类型定义，不包括React组件的类型定义。\n\n## 贡献\n\n1. [Fork 代码仓库](https://github.com/gitalk/gitalk/fork) 并从 master 创建你的分支\n2. 如果你添加的代码需要测试，请添加测试！\n3. 如果你修改了 API，请更新文档。\n4. 确保单元测试通过 (npm test).\n5. 确保代码风格一致 (npm run lint).\n6. 提交你的代码 (git commit) [提交信息格式参考](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#-git-commit-guidelines)\n\n## 类似项目\n\n- [gitment](https://github.com/imsun/gitment)\n- [vssue](https://vssue.js.org/zh)\n\n## 许可\n\nMIT\n\n[npm-version-image]: https://img.shields.io/npm/v/gitalk.svg?style=flat-square\n[npm-version-url]: https://www.npmjs.com/package/gitalk\n[cdnjs-version-image]: https://img.shields.io/cdnjs/v/gitalk.svg?style=flat-square\n[cdnjs-version-url]: https://cdnjs.com/libraries/gitalk\n[david-dm-image]: https://david-dm.org/gitalk/gitalk.svg?style=flat-square\n[david-dm-url]: https://david-dm.org/gitalk/gitalk\n[travis-image]: https://img.shields.io/travis/gitalk/gitalk/master.svg?style=flat-square\n[travis-url]: https://travis-ci.org/gitalk/gitalk\n[coveralls-image]: https://img.shields.io/coveralls/gitalk/gitalk/master.svg?style=flat-square\n[coveralls-url]: https://coveralls.io/github/gitalk/gitalk\n[gzip-size]: https://img.badgesize.io/https://unpkg.com/gitalk/dist/gitalk.min.js?compression=gzip\u0026style=flat-square\n[gzip-url]: https://unpkg.com/gitalk/dist/gitalk.min.js\n","funding_links":[],"categories":["HarmonyOS","JavaScript","功能","JavaScript (485)","react","github"],"sub_categories":["Windows Manager","系统架构"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitalk%2Fgitalk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgitalk%2Fgitalk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitalk%2Fgitalk/lists"}