diff --git a/README.md b/README.md index b83d534..0b3f179 100644 --- a/README.md +++ b/README.md @@ -205,3 +205,53 @@ Halo 插件的详细开发文档可查阅 [插件开发](https://docs.halo.run/c 1. `auto`:自动模式,根据系统的暗黑模式自动切换。 2. `dark`:强制暗黑模式。 3. `light`:强制明亮模式。 + +## 作为组件使用 + +此插件的 UI 部分采用 [Lit Element](https://lit.dev/) 编写,并最终编译为 Web Component,所以理论上可以在任何 JS 框架中使用。这非常适用于将 Halo 作为 Headless CMS 使用的场景。例如使用 Vue、React、Astro 等框架编写网站,并调用 Halo 的 API 来渲染网页,这个时候文章评论的解决方案就可以直接使用此组件。 + +安装: + +```bash +pnpm install @halo-dev/comment-widget +``` + +### Vue + +在 Vue 组件中使用时,需要在 Vue 的编译选项中设置将此组件标记为非 Vue 组件,以下是 Vite 的配置示例: + +```js +import vue from '@vitejs/plugin-vue' + +export default { + plugins: [ + vue({ + template: { + compilerOptions: { + isCustomElement: (tag) => tag === 'comment-widget' + } + } + }) + ] +} +``` + +然后在 SFC 中使用即可: + +```vue + + + +``` + +## React + +TODO + +## Astro + +TODO