docs(config): 重构配置文档结构并简化前端使用说明

- 删除 widget/CONFIG.md,将配置参数统一到 docs/guide/frontend-config.md
- 简化 widget/README.md,移除详细代码示例并指向完整文档链接
- 更新前端配置说明,优化注释并移除冗余参数
This commit is contained in:
anghunk
2026-01-14 13:31:16 +08:00
parent d3ca6a0bfa
commit 94653bfac8
3 changed files with 4 additions and 102 deletions

View File

@@ -15,16 +15,9 @@
```html
<script>
const comments = new CWDComments({
el: '#comments',
apiBaseUrl: 'https://your-api.example.com',
postSlug: 'my-post',
postTitle: '文章标题',
postUrl: 'https://example.com/my-post',
theme: 'light',
pageSize: 20,
avatarPrefix: 'https://gravatar.com/avatar',
adminEmail: 'admin@example.com',
adminBadge: '博主'
el: '#comments', // 容器 id
apiBaseUrl: 'https://your-api.example.com', // 你部署的api地址
postSlug: 'my-post', // 当前页面路径,可使用博客程序支持的 url 模板路径
});
comments.mount();
</script>

View File

@@ -1,78 +0,0 @@
# CWDComments 配置参数
## 前端 Widget 配置
在初始化 `CWDComments` 实例时,可以传入以下配置参数:
```javascript
const comments = new CWDComments({
el: '#comments',
apiBaseUrl: 'https://your-api.example.com',
postSlug: 'my-post',
postTitle: '文章标题',
postUrl: 'https://example.com/my-post',
theme: 'light',
pageSize: 20,
avatarPrefix: 'https://gravatar.com/avatar',
adminEmail: 'admin@example.com',
adminBadge: '博主'
});
comments.mount();
```
### 参数说明
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------------- | ----------------------- | ---- | ----------------------------- | ------------------------- |
| `el` | `string \| HTMLElement` | 是 | - | 挂载元素选择器或 DOM 元素 |
| `apiBaseUrl` | `string` | 是 | - | API 基础地址 |
| `postSlug` | `string` | 是 | - | 文章唯一标识符 |
| `postTitle` | `string` | 否 | - | 文章标题,用于邮件通知 |
| `postUrl` | `string` | 否 | - | 文章 URL用于邮件通知 |
| `theme` | `'light' \| 'dark'` | 否 | `'light'` | 主题模式 |
| `pageSize` | `number` | 否 | `20` | 每页显示评论数 |
| `avatarPrefix` | `string` | 否 | `https://gravatar.com/avatar` | 头像服务前缀 |
| `adminEmail` | `string` | 否 | - | 博主邮箱,用于显示博主标识 |
| `adminBadge` | `string` | 否 | `博主` | 博主标识文字 |
### 头像服务前缀示例
常用的 Gravatar 镜像服务:
| 服务 | 前缀地址 |
| --------------- | -------------------------------- |
| Gravatar 官方 | `https://gravatar.com/avatar` |
| Cravatar (国内) | `https://gravatar.com/avatar` |
| 自定义镜像 | `https://your-mirror.com/avatar` |
## 后端环境变量
在 Cloudflare Workers 中配置以下环境变量:
| 变量名 | 说明 | 必填 |
| ------------------- | ------------------------------- | ---- |
| `ADMIN_NAME` | 管理员用户名 | 是 |
| `ADMIN_PASSWORD` | 管理员密码 | 是 |
| `ALLOW_ORIGIN` | CORS 白名单(逗号分隔多个域名) | 是 |
| `RESEND_API_KEY` | Resend 邮件服务 API 密钥 | 否 |
| `RESEND_FROM_EMAIL` | 发件邮箱地址 | 否 |
| `EMAIL_ADDRESS` | 站长接收通知的邮箱 | 否 |
## 实例方法
| 方法 | 说明 |
| ---------------------- | ------------------------------ |
| `mount()` | 挂载组件到 DOM |
| `unmount()` | 卸载组件 |
| `updateConfig(config)` | 更新配置(支持动态切换主题等) |
| `getConfig()` | 获取当前配置 |
### 示例
```javascript
// 动态切换主题
comments.updateConfig({ theme: 'dark' });
// 切换文章
comments.updateConfig({ postSlug: 'another-post' });
```

View File

@@ -2,17 +2,4 @@
## 使用方法
```html
<!-- 评论组件容器 -->
<div id="comments"></div>
<script src="dist/cwd-comments.js"></script>
<script>
new CWDComments({
el: '#comments', // 容器 ID
apiBaseUrl: 'https://message.zishu.me', // 部署的后端地址
postSlug: '/message', // 当前页面路径,可使用博客程序支持的 url 模板路径
}).mount();
</script>
```
文档:[https://cwd-comments.zishu.me/guide/frontend-config.html](https://cwd-comments.zishu.me/guide/frontend-config.html)