Files
cwd/docs/guide/frontend-config.md
anghunk 0485b1320c refactor(widget): 简化前端配置并重构核心逻辑
移除前端配置中的 postSlug 和 avatarPrefix 参数,改为从后端接口获取
重构 CWDComments 核心类,自动推导 postSlug 等参数并异步加载服务端配置
更新文档和示例页面以反映配置变更
2026-01-20 10:39:48 +08:00

47 lines
2.0 KiB
Markdown

# 前端配置
**这里仅提供一套开箱即用的方案,如果是个人开发者可以根据 API 文档自行编写前端评论组件。**
## 评论组件初始化
在初始化 `CWDComments` 实例时,可以传入以下配置参数:
```html
<script src="https://cwd-comments.zishu.me/cwd-comments.js"></script>
<div id="comments"></div>
<script>
const comments = new CWDComments({
el: '#comments',
apiBaseUrl: 'https://your-api.example.com',
});
comments.mount();
</script>
```
### 参数说明
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------------ | ----------------------- | ---- | ---------------------------------------------------------------- | ------------------------- |
| `el` | `string \| HTMLElement` | 是 | - | 挂载元素选择器或 DOM 元素 |
| `apiBaseUrl` | `string` | 是 | - | API 基础地址 |
| `theme` | `'light' \| 'dark'` | 否 | `'light'` | 主题模式 |
| `pageSize` | `number` | 否 | `20` | 每页显示评论数 |
头像前缀、博主邮箱和标识等信息由后端接口 `/api/config/comments` 提供,无需在前端进行配置。
## 实例方法
| 方法 | 说明 |
| ---------------------- | ------------------------------ |
| `mount()` | 挂载组件到 DOM |
| `unmount()` | 卸载组件 |
| `updateConfig(config)` | 更新配置(支持动态切换主题等) |
| `getConfig()` | 获取当前配置 |
## 使用示例
```javascript
// 动态切换主题
comments.updateConfig({ theme: 'dark' });
```