{"id":13524545,"url":"https://github.com/halo-dev/plugin-search-widget","last_synced_at":"2026-01-19T20:34:55.803Z","repository":{"id":116776106,"uuid":"558275000","full_name":"halo-dev/plugin-search-widget","owner":"halo-dev","description":"Halo 搜索组件的插件","archived":false,"fork":false,"pushed_at":"2025-09-19T03:23:40.000Z","size":7173,"stargazers_count":14,"open_issues_count":4,"forks_count":12,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-11-13T08:41:30.071Z","etag":null,"topics":["halo","halo-plugin"],"latest_commit_sha":null,"homepage":"https://halo.run/store/apps/app-DlacW","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,"zenodo":null}},"created_at":"2022-10-27T08:18:37.000Z","updated_at":"2025-09-19T03:23:43.000Z","dependencies_parsed_at":"2024-05-13T04:27:57.776Z","dependency_job_id":"238e0e17-eeb5-419a-87e2-7fa2294b25d2","html_url":"https://github.com/halo-dev/plugin-search-widget","commit_stats":null,"previous_names":["halo-dev/plugin-search-widget"],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/halo-dev/plugin-search-widget","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halo-dev%2Fplugin-search-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halo-dev%2Fplugin-search-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halo-dev%2Fplugin-search-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halo-dev%2Fplugin-search-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/halo-dev","download_url":"https://codeload.github.com/halo-dev/plugin-search-widget/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halo-dev%2Fplugin-search-widget/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28583886,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-19T19:46:29.903Z","status":"ssl_error","status_checked_at":"2026-01-19T19:45:54.560Z","response_time":67,"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":["halo","halo-plugin"],"created_at":"2024-08-01T06:01:11.107Z","updated_at":"2026-01-19T20:34:55.780Z","avatar_url":"https://github.com/halo-dev.png","language":"TypeScript","funding_links":[],"categories":["Halo 2.0"],"sub_categories":["插件"],"readme":"# plugin-search-widget\n\nHalo 2.0 的通用搜索组件插件。\n\n![Preview](./images/preview.png)\n\n## 使用方式\n\n1. 下载，目前提供以下两个下载方式：\n    - GitHub Releases：访问 [Releases](https://github.com/halo-dev/plugin-search-widget/releases) 下载 Assets 中的 JAR 文件。\n    - Halo 应用市场：\u003chttps://halo.run/store/apps/app-DlacW\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-search-widget.git\n\n# 或者当你 fork 之后\n\ngit clone git@github.com:{your_github_id}/plugin-search-widget.git\n```\n\n```bash\ncd path/to/plugin-search-widget\n```\n\n```bash\n./gradlew pnpmInstall\n\n./gradlew build\n```\n\n修改 Halo 配置文件：\n\n```yaml\nhalo:\n  plugin:\n    runtime-mode: development\n    classes-directories:\n      - \"build/classes\"\n      - \"build/resources\"\n    lib-directories:\n      - \"libs\"\n    fixedPluginPath:\n      - \"/path/to/plugin-search-widget\"\n```\n\n## 主题适配\n\n### 调用搜索弹框\n\n此插件是一个通用的搜索框插件，主题需要做的只是通过 JS API 唤起搜索框即可，以下是代码示例：\n\n```html\n\u003cli th:if=\"${pluginFinder.available('PluginSearchWidget')}\"\u003e\n  \u003ca href=\"javascript:SearchWidget.open()\" title=\"搜索\"\u003e\n    搜索\n  \u003c/a\u003e\n\u003c/li\u003e\n```\n\n其中，`pluginFinder.available('PluginSearchWidget')` 的作用是判断使用者是否安装和启用了此插件，如果没有安装或者没有启用，那么就不会显示搜索入口。\n\n### 自定义样式\n\n虽然目前不能直接为搜索组件编写额外的样式，但可以通过一系列的 CSS 变量来自定义部分样式，开发者可以根据需求自行在主题中添加这些 CSS 变量，让搜索组件和主题更好地融合。\n\n目前已提供的 CSS 变量：\n\n| 变量名                                              | 描述               | 备注                                                                             |\n|-----------------------------------------------------|------------------|----------------------------------------------------------------------------------|\n| `--halo-search-widget-base-font-size`               | 基础字体大小       | --                                                                               |\n| `--halo-search-widget-base-font-family`             | 字体               | --                                                                               |\n| `--halo-search-widget-base-rounded`                 | 边框圆角           | --                                                                               |\n| `--halo-search-widget-base-bg-color`                | 基础背景色         | --                                                                               |\n| `--halo-search-widget-primary-color`                | 主色               | --                                                                               |\n| `--halo-search-widget-muted-color`                  | 辅助色             | --                                                                               |\n| `--halo-search-widget-content-color`                | 文本色             | --                                                                               |\n| `--halo-search-widget-modal-bg-color`               | 模态框背景色       | --                                                                               |\n| `--halo-search-widget-modal-layer-color`            | 模态框遮挡层背景色 | --                                                                               |\n| `--halo-search-widget-hit-bg-color`                 | 搜索结果条目背景色 | --                                                                               |\n| `--halo-search-widget-divider-color`                | 分割线颜色         | --                                                                               |\n| `--halo-search-widget-kbd-border-color`             | 快捷键图标边框颜色 | --                                                                               |\n| `--halo-search-widget-kbd-shadow`                   | 快捷键图标阴影     | --                                                                               |\n| `--halo-search-widget-base-border-radius`           | 基础元素的圆角     | 已过时，将在未来的版本移除，后续使用 `--halo-search-widget-base-rounded` 代替      |\n| `--halo-search-widget-color-modal-layer`            | 模态层颜色         | 已过时，将在未来的版本移除，后续使用 `--halo-search-widget-modal-layer-color` 代替 |\n| `--halo-search-widget-color-modal-content-bg`       | 模态内容背景颜色   | 已过时，将在未来的版本移除，后续使用 `--halo-search-widget-modal-bg-color` 代替    |\n| `--halo-search-widget-color-form-input-bg`          | 表单输入背景颜色   | 已过时，将在未来的版本移除                                                        |\n| `--halo-search-widget-color-form-input`             | 表单输入文字颜色   | 已过时，将在未来的版本移除                                                        |\n| `--halo-search-widget-color-form-input-placeholder` | 表单输入占位符颜色 | 已过时，将在未来的版本移除                                                        |\n| `--halo-search-widget-color-form-divider`           | 表单分隔线颜色     | 已过时，将在未来的版本移除，后续使用 `--halo-search-widget-divider-color` 代替     |\n| `--halo-search-widget-color-result-empty`           | 无结果提示颜色     | 已过时，将在未来的版本移除                                                        |\n| `--halo-search-widget-color-result-item-bg`         | 结果项背景颜色     | 已过时，将在未来的版本移除，后续使用 `--halo-search-widget-hit-bg-color` 代替      |\n| `--halo-search-widget-color-result-item-hover-bg`   | 结果项悬停背景颜色 | 已过时，将在未来的版本移除                                                        |\n| `--halo-search-widget-color-result-item-title`      | 结果项标题颜色     | 已过时，将在未来的版本移除                                                        |\n| `--halo-search-widget-color-result-item-content`    | 结果项内容颜色     | 已过时，将在未来的版本移除                                                        |\n| `--halo-search-widget-color-command-kbd-item`       | 命令键盘项颜色     | 已过时，将在未来的版本移除                                                        |\n| `--halo-search-widget-color-command-kbd-border`     | 命令键盘边框颜色   | 已过时，将在未来的版本移除，后续使用 `--halo-search-widget-kbd-border-color` 代替  |\n\n\u003cdetails\u003e\n\u003csummary\u003e点击查看 CSS 代码模板\u003c/summary\u003e\n\n```css\n:root{\n  --halo-search-widget-base-font-size: ;\n  --halo-search-widget-base-font-family: ;\n  --halo-search-widget-base-rounded: ;\n  --halo-search-widget-base-bg-color: ;\n  --halo-search-widget-primary-color: ;\n  --halo-search-widget-muted-color: ;\n  --halo-search-widget-content-color: ;\n  --halo-search-widget-modal-bg-color: ;\n  --halo-search-widget-modal-layer-color: ;\n  --halo-search-widget-hit-bg-color: ;\n  --halo-search-widget-divider-color: ;\n  --halo-search-widget-kbd-border-color: ;\n  --halo-search-widget-kbd-shadow: ;\n}\n```\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    --halo-search-widget-muted-color: #cbd5e1;\n    --halo-search-widget-content-color: #f1f5f9;\n    --halo-search-widget-hit-bg-color: #090a11;\n    --halo-search-widget-modal-bg-color: #15172a;\n    --halo-search-widget-modal-layer-color: #000000cc;\n    --halo-search-widget-base-bg-color: #090a11;\n    --halo-search-widget-divider-color: #1e293b;\n    --halo-search-widget-kbd-border-color: #334155;\n    --halo-search-widget-kbd-shadow: 0px 2px 0px 0px #ffffff1a;\n  }\n}\n\n.color-scheme-dark,\n.dark,\n[data-color-scheme='dark'] {\n  color-scheme: dark;\n  --halo-search-widget-muted-color: #cbd5e1;\n  --halo-search-widget-content-color: #f1f5f9;\n  --halo-search-widget-hit-bg-color: #090a11;\n  --halo-search-widget-modal-bg-color: #15172a;\n  --halo-search-widget-modal-layer-color: #000000cc;\n  --halo-search-widget-base-bg-color: #090a11;\n  --halo-search-widget-divider-color: #1e293b;\n  --halo-search-widget-kbd-border-color: #334155;\n  --halo-search-widget-kbd-shadow: 0px 2px 0px 0px #ffffff1a;\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## Credits\n\n- [Algolia DocSearch](https://github.com/algolia/docsearch): 搜索组件的 UI 设计灵感来源于 DocSearch。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalo-dev%2Fplugin-search-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhalo-dev%2Fplugin-search-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalo-dev%2Fplugin-search-widget/lists"}