{"id":28178624,"url":"https://github.com/lolipopj/gitalk-react","last_synced_at":"2026-04-04T00:02:58.442Z","repository":{"id":288546202,"uuid":"963855935","full_name":"LolipopJ/gitalk-react","owner":"LolipopJ","description":"React implementation of Gitalk, the modern comment component based on Github Issue.","archived":false,"fork":false,"pushed_at":"2026-03-23T06:16:28.000Z","size":257,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-24T00:43:21.024Z","etag":null,"topics":["comment-system","gitalk","react","typescript","vite"],"latest_commit_sha":null,"homepage":"https://LolipopJ.github.io/gitalk-react","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LolipopJ.png","metadata":{"files":{"readme":"README-zh-CN.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-04-10T10:09:11.000Z","updated_at":"2026-03-23T06:16:32.000Z","dependencies_parsed_at":"2025-04-25T16:16:25.766Z","dependency_job_id":null,"html_url":"https://github.com/LolipopJ/gitalk-react","commit_stats":null,"previous_names":["lolipopj/gitalk-react"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/LolipopJ/gitalk-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LolipopJ%2Fgitalk-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LolipopJ%2Fgitalk-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LolipopJ%2Fgitalk-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LolipopJ%2Fgitalk-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LolipopJ","download_url":"https://codeload.github.com/LolipopJ/gitalk-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LolipopJ%2Fgitalk-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31382355,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-03T23:20:52.058Z","status":"ssl_error","status_checked_at":"2026-04-03T23:20:51.675Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-system","gitalk","react","typescript","vite"],"created_at":"2025-05-16T01:12:57.440Z","updated_at":"2026-04-04T00:02:58.408Z","avatar_url":"https://github.com/LolipopJ.png","language":"TypeScript","readme":"基于 Github 议题和 React 的现代评论组件。\n\n[ENGLISH](./README.md) | 简体中文\n\n# Gitalk React\n\n[![NPM][npm-version-image]][npm-version-url]\n[![gzip-size][gzip-size]][gzip-url]\n\n使用 TypeScript, React 和 Vite 重新实现 [Gitalk](https://github.com/gitalk/gitalk) —— 基于 Github 议题的评论组件。\n\n面向现代浏览器开发，专注于减少构建包的体积，提升开发与使用的体验。\n\n## 与原版的区别\n\n- **不兼容旧版浏览器**：仅保证兼容支持 [ES2020](https://caniuse.com/?feats=mdn-javascript_operators_optional_chaining,mdn-javascript_operators_nullish_coalescing,mdn-javascript_builtins_globalthis,es6-module-dynamic-import,bigint,mdn-javascript_builtins_promise_allsettled,mdn-javascript_builtins_string_matchall,mdn-javascript_statements_export_namespace,mdn-javascript_operators_import_meta) 的现代浏览器。\n- **依赖 React 运行时环境**：`react \u003e= 16.8.0 \u0026\u0026 react-dom \u003e= 16.8.0`。\n- **部分参数的默认值发生了变化**：迁移到此组件时请留意。\n  - `id`：Gitalk 使用 `location.href` 作为默认值，Gitalk React 使用 `location.host + location.pathname` 作为默认值，避免预期外的查询参数。\n  - `defaultAuthor`：仍然可以使用。Gitalk React 新增了参数项 `defaultUser` 来设置评论的默认用户，保持字段命名与 Github API 一致。\n\n## 快速开始\n\n### 安装\n\n```bash\nnpm install gitalk-react\n```\n\n### 使用\n\n在项目中引入 Gitalk React 的样式与组件：\n\n```tsx\n// 引入浅色模式样式\nimport 'gitalk-react/gitalk.css'\n// 或深色模式样式\nimport 'gitalk-react/gitalk-dark.css'\n\nimport Gitalk from 'gitalk-react'\n```\n\nGitalk React 依赖于 Github OAuth App 实现登录鉴权，您需要首先[注册一个应用](https://github.com/settings/applications/new)。请注意，您必须将站点域名作为 `Authorization callback URL` 字段的值，例如 `https://yourdomain.com/site` 或开发环境下的 `http://localhost:5432`。\n\n使用 Gitalk React 组件，填写必要的配置项：\n\n- `clientId`：Github OAuth App 的 ID。\n- `clientSecret`：Github OAuth App 的 Secret 密钥。\n- `owner`：Github 用户名。\n- `repo`：Github 仓库名。需要是公开的仓库。\n- `admin`：Gitalk React 管理员列表，只有列表里的人可以初始化评论议题。可以是 Github 仓库的拥有者和协作者。\n\n```tsx\n\u003cGitalk\n  clientID=\"YOUR_GITHUB_OAUTH_APP_CLIENT_ID\"\n  clientSecret=\"YOUR_GITHUB_OAUTH_APP_CLIENT_SECRET\"\n  owner=\"GITHUB_REPO_OWNER\"\n  repo=\"GITHUB_REPO_NAME\"\n  admin={['GITHUB_REPO_OWNER', 'GITHUB_REPO_COLLABORATOR']}\n/\u003e\n```\n\n## 配置\n\n### clientID `string`\n\n**必填项**。Github OAuth App 的 ID。\n\n### clientSecret `string`\n\n**必填项**。Github OAuth App 的 Secret 密钥。\n\n### owner `string`\n\n**必填项**。Github 用户名。\n\n### repo `string`\n\n**必填项**。Github 仓库名。需要是公开的仓库\n\n### admin `string[]`\n\n**必填项**。Gitalk React 管理员列表。可以是 Github 仓库的拥有者和协作者：拥有对此仓库**写权限**的用户。\n\n### id `string = location.host + location.pathname`\n\n评论议题的唯一标识符，长度不能超过 50。\n\nGitalk React 在创建评论议题时，自动将此参数作为评论议题的标签项，并默认通过它来获取评论议题。\n\n对于博客等类型的站点，推荐将页面的 `slug` 作为参数。\n\n### number `number`\n\n评论议题的编号。\n\n如果指定了此参数，那么 Gitalk React 将通过它来获取评论议题，而非标识符。\n\n### labels `string[] = [\"Gitalk\"]`\n\n评论议题的标签。\n\n### title `string = document.title`\n\n评论议题的标题。\n\n### body `string = location.href + meta[name=\"description\"]`\n\n评论议题的内容。\n\n### language `string = navigator.language`\n\nGitalk React 使用的语言。\n\n可用的语言包括：`\"de\" | \"en\" | \"es-ES\" | \"fa\" | \"fr\" | \"ja\" | \"ko\" | \"pl\" | \"ru\" | \"zh-CN\" | \"zh-TW\"`。\n\n### perPage `number = 10`\n\n每页加载的评论数，不能超过 100。\n\n### pagerDirection `\"last\" | \"first\" = \"last\"`\n\n评论排序的方式。`last` 表示按评论创建时间倒叙排列，`first` 表示按评论创建时间正叙排列。\n\n### createIssueManually `boolean = false`\n\n当评论议题不存在时，Gitalk React 将会自动为您创建一个新的评论议题。\n\n如果您希望以管理员身份登录后，手动点击按钮来创建评论议题，则可以将其设置为 `true`。\n\n### enableHotKey `boolean = true`\n\n是否启用热键 `cmd + enter` 或 `ctrl + enter` 来发表评论。\n\n### distractionFreeMode `boolean = false`\n\n是否启用仿 Facebook 评论框的全屏遮罩效果。\n\n### flipMoveOptions `FlipMove.FlipMoveProps`\n\n评论列表的动画效果。\n\n默认值，效果[参考](https://github.com/joshwcomeau/react-flip-move/blob/master/documentation/enter_leave_animations.md)：\n\n```json\n{\n  \"staggerDelayBy\": 150,\n  \"appearAnimation\": \"accordionVertical\",\n  \"enterAnimation\": \"accordionVertical\",\n  \"leaveAnimation\": \"accordionVertical\"\n}\n```\n\n### proxy `string = \"https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token\"`\n\nGithub OAuth App 鉴权反向代理，支持 CORS。[为什么需要它？](https://github.com/isaacs/github/issues/330)\n\n### defaultUser `{ avatar_url: string; login: string; html_url: string }`\n\n评论用户不存在时，使用的默认用户。\n\n`avatar_url` 为用户头像地址，`login` 为用户名，`html_url` 为点击用户后跳转的页面。默认值：\n\n```json\n{\n  \"avatar_url\": \"//avatars1.githubusercontent.com/u/29697133?s=50\",\n  \"login\": \"null\",\n  \"html_url\": \"\"\n}\n```\n\n### collapsedHeight `number`\n\n当评论的高度大于 `${collapsedHeight}px` 时，自动折叠到 `${collapsedHeight}px`。\n\n### highlightAdminComment `boolean = true`\n\n是否高亮管理员发表的评论，高亮的评论具有额外的阴影效果。\n\n### updateCountCallback `(count: number) =\u003e void`\n\n评论数量更新的调用的回调方法。\n\n### onCreateComment `(comment: CommentType) =\u003e void`\n\n创建评论**成功时**调用的回调方法。\n\n## 主题样式\n\n通过设置 CSS 变量，您可以快速地将 Gitalk React 的主题颜色修改为适配您站点的样式。\n\n当您引入浅色主题 `import 'gitalk-react/gitalk.css'` 时，默认的 CSS 变量如下：\n\n```css\n.gt-container {\n  --gt-theme-mode: light;\n  --gt-color-text: #171717;\n  --gt-color-main: #3b82f6;\n  --gt-color-main-lighter: rgb(107.7609756098, 161.0975609756, 248.2390243902);\n  --gt-color-sub: #a1a1a1;\n  --gt-color-loader: #999;\n  --gt-color-error: #ff3860;\n  --gt-color-hr: #e9e9e9;\n  --gt-color-input-border: rgb(0 0 0 / 10%);\n  --gt-color-input-bg: #f6f6f6;\n  --gt-color-input-bg-lighter: hsl(0, 0%, 146.4705882353%);\n  --gt-color-comment-bg: #f9f9f9;\n  --gt-color-comment-shadow: rgb(218.4, 218.4, 218.4);\n  --gt-color-comment-shadow-admin: rgb(203.1, 203.1, 203.1);\n  --gt-color-comment-txt: #333;\n  --gt-color-comment-collapse-bg: linear-gradient(\n    rgb(245 245 245 / 10%),\n    rgb(245 245 245 / 90%)\n  );\n  --gt-color-link-active: #333;\n  --gt-color-btn: #fff;\n  --gt-color-popbg: #fff;\n}\n```\n\n引入深色主题 `import 'gitalk-react/gitalk-dark.css'` 时，默认的 CSS 变量如下：\n\n```css\n.gt-container {\n  --gt-theme-mode: dark;\n  --gt-color-text: #e9e9e9;\n  --gt-color-main: #6366f1;\n  --gt-color-main-lighter: rgb(122.4, 124.95, 243.1);\n  --gt-color-sub: #9e9e9e;\n  --gt-color-loader: #777;\n  --gt-color-error: #ef4444;\n  --gt-color-hr: #555;\n  --gt-color-input-border: rgb(255 255 255 / 10%);\n  --gt-color-input-bg: #212121;\n  --gt-color-input-bg-lighter: rgb(48.3, 48.3, 48.3);\n  --gt-color-comment-bg: #212121;\n  --gt-color-comment-shadow: rgb(78.9, 78.9, 78.9);\n  --gt-color-comment-shadow-admin: rgb(94.2, 94.2, 94.2);\n  --gt-color-comment-txt: #fafafa;\n  --gt-color-comment-collapse-bg: linear-gradient(\n    rgb(20 20 20 / 10%),\n    rgb(20 20 20 / 90%)\n  );\n  --gt-color-link-active: #fafafa;\n  --gt-color-btn: #eee;\n  --gt-color-popbg: #171717;\n}\n```\n\n## 开发者\n\n在项目根目录新建 `.env.local` 文件，添加开发用环境变量如下：\n\n```bash\nVITE_CLIENT_ID=\"YOUR_GITHUB_OAUTH_APP_CLIENT_ID\"\nVITE_CLIENT_SECRET=\"YOUR_GITHUB_OAUTH_APP_CLIENT_SECRET\"\nVITE_REPO_OWNER=\"YOUR_GITHUB_USERNAME\"\nVITE_REPO_NAME=\"YOUR_REPO_NAME\"\nVITE_ADMIN='[\"YOUR_GITHUB_USERNAME\"]'\n```\n\n### 开发\n\n在浏览器中调试开发：\n\n```bash\nyarn dev\n```\n\n### 质量检查\n\n检查并修复代码的质量与格式问题：\n\n```bash\nyarn lint\n```\n\n### 构建\n\n打包构建组件：\n\n```bash\nyarn build\n```\n\n## 开发中的功能\n\n- [ ] Feature: 支持在 Gitalk React 编辑自己发表的评论。\n- [x] Feature: 支持折叠过长的评论，允许点击展开该评论。\n- [ ] test: 添加自动化测试流程。提升项目的健壮性。\n- [x] chore: 部署[预览环境](https://lolipopj.github.io/gitalk-react/)。\n\n## 许可证\n\n[MIT](./LICENSE)\n\n[npm-version-image]: https://img.shields.io/npm/v/gitalk-react.svg?style=flat-square\n[npm-version-url]: https://www.npmjs.com/package/gitalk-react\n[gzip-size]: https://img.badgesize.io/https://unpkg.com/gitalk-react/dist/gitalk.umd.cjs?compression=gzip\u0026style=flat-square\n[gzip-url]: https://unpkg.com/gitalk-react/dist/gitalk.umd.cjs\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flolipopj%2Fgitalk-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flolipopj%2Fgitalk-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flolipopj%2Fgitalk-react/lists"}