{"id":13524525,"url":"https://github.com/halo-dev/plugin-comment-widget","last_synced_at":"2026-01-19T20:34:44.546Z","repository":{"id":54607936,"uuid":"522400070","full_name":"halo-dev/plugin-comment-widget","owner":"halo-dev","description":"通用的 Halo 2.0 评论组件插件","archived":false,"fork":false,"pushed_at":"2024-10-28T03:34:04.000Z","size":12746,"stargazers_count":22,"open_issues_count":34,"forks_count":23,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-10-28T07:08:06.166Z","etag":null,"topics":["halo","halo-plugin"],"latest_commit_sha":null,"homepage":"https://halo.run/store/apps/app-YXyaD","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/halo-dev.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":"2022-08-08T04:06:38.000Z","updated_at":"2024-10-28T03:34:08.000Z","dependencies_parsed_at":"2024-01-13T22:54:58.962Z","dependency_job_id":"2e774e2e-036c-4013-b6de-9be32d196dde","html_url":"https://github.com/halo-dev/plugin-comment-widget","commit_stats":null,"previous_names":["halo-dev/plugin-comment-widget"],"tags_count":28,"template":false,"template_full_name":"halo-dev/plugin-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halo-dev%2Fplugin-comment-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halo-dev%2Fplugin-comment-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halo-dev%2Fplugin-comment-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halo-dev%2Fplugin-comment-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/halo-dev","download_url":"https://codeload.github.com/halo-dev/plugin-comment-widget/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222693039,"owners_count":17024034,"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":["halo","halo-plugin"],"created_at":"2024-08-01T06:01:10.943Z","updated_at":"2026-01-19T20:34:44.540Z","avatar_url":"https://github.com/halo-dev.png","language":"TypeScript","funding_links":[],"categories":["Halo 2.0"],"sub_categories":["插件"],"readme":"# plugin-comment-widget\n\nHalo 2.0 的通用评论组件插件，为前台提供完整的评论解决方案。\n\n![Cover](./images/cover.png)\n\n## 使用方式\n\n1. 下载，目前提供以下两个下载方式：\n    - GitHub Releases：访问 [Releases](https://github.com/halo-dev/plugin-comment-widget/releases) 下载 Assets 中的 JAR 文件。\n    - Halo 应用市场：\u003chttps://www.halo.run/store/apps/app-YXyaD\u003e。\n2. 安装，插件安装和更新方式可参考：\u003chttps://docs.halo.run/user-guide/plugins\u003e。\n\n\u003e 需要注意的是，此插件需要主题进行适配，不会主动在内容页加载评论组件。\n\n## 开发环境\n\n```bash\ngit clone git@github.com:halo-dev/plugin-comment-widget.git\n\n# 或者当你 fork 之后\n\ngit clone git@github.com:{your_github_id}/plugin-comment-widget.git\n```\n\n```bash\ncd path/to/plugin-comment-widget\n```\n\n```bash\n./gradlew pnpmInstall\n\n# 启动一个 Docker 容器作为开发环境并自动加载此插件\n./gradlew haloServer\n```\n\nHalo 插件的详细开发文档可查阅 [插件开发](https://docs.halo.run/category/%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91)。\n\n## 主题适配\n\n### 接入\n\n接入文档可参考 [自定义标签](https://docs.halo.run/developer-guide/theme/template-tag#halocomment)。\n\n### 自定义样式\n\n虽然目前不能直接为评论组件编写额外的样式，但可以通过一系列的 CSS 变量来自定义部分样式，开发者可以根据需求自行在主题中添加这些 CSS 变量，让评论组件和主题更好地融合。\n\n目前已提供的 CSS 变量：\n\n| 变量名                       | 描述                                     |\n| ---------------------------- | ---------------------------------------- |\n| `--halo-cw-primary-1-color`  | 主要的主题色，用于按钮背景，输入框边框等 |\n| `--halo-cw-primary-2-color`  | 较浅的主题色                             |\n| `--halo-cw-primary-3-color`  | 最浅的主题色                             |\n| `--halo-cw-text-1-color`     | 主要文本颜色，用于标题、正文等           |\n| `--halo-cw-text-2-color`     | 次要文本颜色                             |\n| `--halo-cw-text-3-color`     | 辅助文本颜色                             |\n| `--halo-cw-muted-1-color`    | 弱化色，用于边框、分割线、背景等辅助元素 |\n| `--halo-cw-muted-2-color`    | 更浅的弱化色                             |\n| `--halo-cw-muted-3-color`    | 最浅的弱化色                             |\n| `--halo-cw-base-rounded`     | 基础圆角大小                             |\n| `--halo-cw-avatar-rounded`   | 头像圆角大小                             |\n| `--halo-cw-avatar-size`      | 头像尺寸                                 |\n| `--halo-cw-base-font-size`   | 基础字体大小                             |\n| `--halo-cw-base-font-family` | 基础字体族                               |\n\n\u003cdetails\u003e\n\u003csummary\u003e点击查看 CSS 代码模板\u003c/summary\u003e\n\n```css\n:root {\n  --halo-cw-primary-1-color: ;\n  --halo-cw-primary-2-color: ;\n  --halo-cw-primary-3-color: ;\n\n  --halo-cw-text-1-color: ;\n  --halo-cw-text-2-color: ;\n  --halo-cw-text-3-color: ;\n\n  --halo-cw-muted-1-color: ;\n  --halo-cw-muted-2-color: ;\n  --halo-cw-muted-3-color: ;\n\n  --halo-cw-base-rounded: ;\n  --halo-cw-avatar-rounded: ;\n  --halo-cw-avatar-size: ;\n  --halo-cw-base-font-size: ;\n  --halo-cw-base-font-family: ;\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e3.0.0 版本之前已废弃的 CSS 变量\u003c/summary\u003e\n\n| 变量名                                                                  | 描述                     | 备注                                               |\n| ----------------------------------------------------------------------- | ------------------------ | -------------------------------------------------- |\n| `--halo-comment-widget-base-color`                                      | 基础文字颜色             | 已废弃，后续使用 `--halo-cw-text-1-color` 代替     |\n| `--halo-comment-widget-base-info-color`                                 | 非重要突出文字           | 已废弃，后续使用 `--halo-cw-muted-*-color` 代替    |\n| `--halo-comment-widget-base-border-radius`                              | 基础元素的圆角           | 已废弃，后续使用 `--halo-cw-base-rounded` 代替     |\n| `--halo-comment-widget-base-font-size`                                  | 基础字体大小             | 已废弃，后续使用 `--halo-cw-base-font-size` 代替   |\n| `--halo-comment-widget-base-line-height`                                | 基础行高                 | 已废弃                                             |\n| `--halo-comment-widget-base-font-family`                                | 基础字体族               | 已废弃，后续使用 `--halo-cw-base-font-family` 代替 |\n| `--halo-comment-widget-component-avatar-rounded`                        | 头像的圆角大小           | 已废弃，后续使用 `--halo-cw-avatar-rounded` 代替   |\n| `--halo-comment-widget-component-avatar-size`                           | 头像大小                 | 已废弃，后续使用 `--halo-cw-avatar-size` 代替      |\n| `--halo-comment-widget-component-form-input-bg-color`                   | 表单输入背景颜色         | 已废弃                                             |\n| `--halo-comment-widget-component-form-input-color`                      | 表单输入文字颜色         | 已废弃                                             |\n| `--halo-comment-widget-component-form-input-border-color`               | 表单输入边框颜色         | 已废弃                                             |\n| `--halo-comment-widget-component-form-input-border-color-focus`         | 表单输入焦点时边框颜色   | 已废弃，后续使用 `--halo-cw-primary-1-color` 代替  |\n| `--halo-comment-widget-component-form-input-box-shadow-focus`           | 表单输入焦点时的阴影     | 已废弃，后续使用 `--halo-cw-primary-2-color` 代替  |\n| `--halo-comment-widget-component-form-button-login-bg-color`            | 登录按钮背景颜色         | 已废弃                                             |\n| `--halo-comment-widget-component-form-button-login-bg-color-hover`      | 登录按钮悬停背景颜色     | 已废弃                                             |\n| `--halo-comment-widget-component-form-button-login-border-color`        | 登录按钮边框颜色         | 已废弃                                             |\n| `--halo-comment-widget-component-form-button-submit-bg-color`           | 提交按钮背景颜色         | 已废弃，后续使用 `--halo-cw-primary-1-color` 代替  |\n| `--halo-comment-widget-component-form-button-submit-color`              | 提交按钮文字颜色         | 已废弃                                             |\n| `--halo-comment-widget-component-form-button-submit-border-color`       | 提交按钮边框颜色         | 已废弃                                             |\n| `--halo-comment-widget-component-form-button-submit-border-color-hover` | 提交按钮悬停边框颜色     | 已废弃，后续使用 `--halo-cw-primary-3-color` 代替  |\n| `--halo-comment-widget-component-form-button-emoji-color`               | 表情按钮颜色             | 已废弃                                             |\n| `--halo-comment-widget-component-comment-item-action-bg-color-hover`    | 评论项操作悬停背景颜色   | 已废弃                                             |\n| `--halo-comment-widget-component-comment-item-action-color-hover`       | 评论项操作悬停颜色       | 已废弃                                             |\n| `--halo-comment-widget-component-pagination-button-bg-color-hover`      | 分页按钮悬停背景颜色     | 已废弃                                             |\n| `--halo-comment-widget-component-pagination-button-bg-color-active`     | 分页按钮活动状态背景颜色 | 已废弃                                             |\n| `--halo-comment-widget-component-pagination-button-border-color-active` | 分页按钮活动状态边框颜色 | 已废弃                                             |\n| `--halo-comment-widget-component-emoji-picker-rgb-color`                | 表情选择器颜色           | 已废弃                                             |\n| `--halo-comment-widget-component-emoji-picker-rgb-accent`               | 表情选择器强调颜色       | 已废弃                                             |\n| `--halo-comment-widget-component-emoji-picker-rgb-background`           | 表情选择器背景颜色       | 已废弃                                             |\n| `--halo-comment-widget-component-emoji-picker-rgb-input`                | 表情选择器输入颜色       | 已废弃                                             |\n| `--halo-comment-widget-component-emoji-picker-color-border`             | 表情选择器边框颜色       | 已废弃                                             |\n| `--halo-comment-widget-component-emoji-picker-color-border-over`        | 表情选择器悬停边框颜色   | 已废弃                                             |\n\n\u003c/details\u003e\n\n### 配色切换方案\n\n根据上面提供的 CSS 变量，也可以通过定义 CSS 变量的方式为评论组件提供动态切换配色的功能。\n\n以下是实现示例，你可以根据需求自行修改选择器或者媒体查询。\n\n```css\n@media (prefers-color-scheme: dark) {\n  .color-scheme-auto,\n  [data-color-scheme='auto'] {\n    color-scheme: dark;\n    \n    --halo-cw-primary-1-color: #059669;\n    --halo-cw-primary-2-color: #047857;\n    --halo-cw-primary-3-color: #065f46;\n\n    --halo-cw-text-1-color: #f9fafb;\n    --halo-cw-text-2-color: #e5e7eb;\n    --halo-cw-text-3-color: #9ca3af;\n\n    --halo-cw-muted-1-color: #4b5563;\n    --halo-cw-muted-2-color: #374151;\n    --halo-cw-muted-3-color: #1f2937;\n\n    --halo-cw-emoji-picker-rgb-color: 222, 222, 221;\n    --halo-cw-emoji-picker-rgb-accent: 58, 130, 247;\n    --halo-cw-emoji-picker-rgb-background: 21, 22, 23;\n    --halo-cw-emoji-picker-rgb-input: 0, 0, 0;\n    --halo-cw-emoji-picker-color-border: rgba(255, 255, 255, 0.1);\n    --halo-cw-emoji-picker-color-border-over: rgba(255, 255, 255, 0.2);\n  }\n}\n\n.color-scheme-dark,\n.dark,\n[data-color-scheme='dark'] {\n  color-scheme: dark;\n\n    --halo-cw-primary-1-color: #059669;\n    --halo-cw-primary-2-color: #047857;\n    --halo-cw-primary-3-color: #065f46;\n\n    --halo-cw-text-1-color: #f9fafb;\n    --halo-cw-text-2-color: #e5e7eb;\n    --halo-cw-text-3-color: #9ca3af;\n\n    --halo-cw-muted-1-color: #4b5563;\n    --halo-cw-muted-2-color: #374151;\n    --halo-cw-muted-3-color: #1f2937;\n\n    --halo-cw-emoji-picker-rgb-color: 222, 222, 221;\n    --halo-cw-emoji-picker-rgb-accent: 58, 130, 247;\n    --halo-cw-emoji-picker-rgb-background: 21, 22, 23;\n    --halo-cw-emoji-picker-rgb-input: 0, 0, 0;\n    --halo-cw-emoji-picker-color-border: rgba(255, 255, 255, 0.1);\n    --halo-cw-emoji-picker-color-border-over: rgba(255, 255, 255, 0.2);\n}\n```\n\n此外，为了让主题可以更加方便的适配暗黑模式，此插件也提供了一套暗黑模式的配色方案，主题可以直接使用此方案，而不需要自己去适配暗黑模式，适配方式如下：\n\n1. 在 html 或者 body 标签添加 class：\n   1. `color-scheme-auto`：自动模式，根据系统的暗黑模式自动切换。\n   2. `color-scheme-dark` / `dark`：强制暗黑模式。\n   3. `color-scheme-light` / `light`：强制明亮模式。\n2. 在 html 或者 body 标签添加 `data-color-scheme` 属性：\n   1. `auto`：自动模式，根据系统的暗黑模式自动切换。\n   2. `dark`：强制暗黑模式。\n   3. `light`：强制明亮模式。\n\n## 作为组件使用\n\n此插件的 UI 部分采用 [Lit Element](https://lit.dev/) 编写，并最终编译为 Web Component，所以理论上可以在任何 JS 框架中使用。这非常适用于将 Halo 作为 Headless CMS 使用的场景。例如使用 Vue、React 等框架编写网站，并调用 Halo 的 API 来渲染网页，这个时候文章评论的解决方案就可以直接使用此组件。\n\n安装：\n\n```bash\npnpm install @halo-dev/comment-widget\n```\n\n### Vue\n\n在 Vue 组件中使用时，需要在 Vue 的编译选项中设置将此组件标记为非 Vue 组件，以下是 Vite 的配置示例：\n\n```js\nimport vue from '@vitejs/plugin-vue'\n\nexport default {\n  plugins: [\n    vue({\n      template: {\n        compilerOptions: {\n          isCustomElement: (tag) =\u003e tag === 'comment-widget'\n        }\n      }\n    })\n  ]\n}\n```\n\n然后在 SFC 中使用即可：\n\n```vue\n\u003cscript setup\u003e\nimport '@halo-dev/comment-widget'\nimport '@halo-dev/comment-widget/var.css';\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003ccomment-widget\n    baseUrl=\"https://demo.halo.run\"\n    group=\"content.halo.run\"\n    kind=\"Post\"\n    version=\"v1alpha1\"\n    name=\"e0507f6f-88bb-4d3c-a90a-a88aba222035\"\n  \u003e\u003c/comment-widget\u003e\n\u003c/template\u003e\n```\n\n## React\n\n```ts\nimport \"@halo-dev/comment-widget\";\nimport \"@halo-dev/comment-widget/var.css\";\n\nfunction App() {\n  return (\n    \u003c\u003e\n      \u003ccomment-widget\n        baseUrl=\"https://demo.halo.run\"\n        group=\"content.halo.run\"\n        kind=\"Post\"\n        version=\"v1alpha1\"\n        name=\"e0507f6f-88bb-4d3c-a90a-a88aba222035\"\n      \u003e\u003c/comment-widget\u003e\n    \u003c/\u003e\n  );\n}\n\nexport default App;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalo-dev%2Fplugin-comment-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhalo-dev%2Fplugin-comment-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalo-dev%2Fplugin-comment-widget/lists"}