docs(config): 重构配置文档结构并简化前端使用说明
- 删除 widget/CONFIG.md,将配置参数统一到 docs/guide/frontend-config.md - 简化 widget/README.md,移除详细代码示例并指向完整文档链接 - 更新前端配置说明,优化注释并移除冗余参数
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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' });
|
||||
```
|
||||
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user