81e77724ca
- 将 cwd-comments.js 脚本链接从本地路径更新为 CDN 地址 docs: 删除冗余的 tsconfig.json 配置文件 - 移除 docs 目录下不必要的 TypeScript 配置文件
76 lines
3.1 KiB
Markdown
76 lines
3.1 KiB
Markdown
# 前端配置
|
||
|
||
**这里仅提供一套开箱即用的方案，如果是个人开发者可以根据 API 文档自行编写前端评论组件。**
|
||
|
||
[接口 API](../api/public.md)
|
||
|
||
## 初始化
|
||
|
||
在初始化 `CWDComments` 实例时，可以传入以下配置参数：
|
||
|
||
```html
|
||
<script src="https://cwd-comments.zishu.me/cwd-comments.js"></script>
|
||
```
|
||
|
||
```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: '博主'
|
||
});
|
||
comments.mount();
|
||
</script>
|
||
```
|
||
|
||
## 参数说明
|
||
|
||
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
||
| -------------- | ----------------------- | ---- | ----------------------------- | -------------------------- |
|
||
| `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://cravatar.cn/avatar` |
|
||
| 自定义镜像 | `https://your-mirror.com/avatar` |
|
||
|
||
## 实例方法
|
||
|
||
| 方法 | 说明 |
|
||
| ---------------------- | ------------------------------ |
|
||
| `mount()` | 挂载组件到 DOM |
|
||
| `unmount()` | 卸载组件 |
|
||
| `updateConfig(config)` | 更新配置（支持动态切换主题等） |
|
||
| `getConfig()` | 获取当前配置 |
|
||
|
||
## 使用示例
|
||
|
||
```javascript
|
||
// 动态切换主题
|
||
comments.updateConfig({ theme: 'dark' });
|
||
|
||
// 切换文章
|
||
comments.updateConfig({ postSlug: 'another-post' });
|
||
```
|