Files
cwd/docs/guide/frontend-config.md
anghunk 1c0c4b5657 docs: 更新文档并添加项目图标
添加项目图标到README和文档首页
重构前端配置文档,移除冗余内容
新增管理后台部署指南文档
修改默认postSlug为完整URL路径
2026-01-20 10:07:30 +08:00

2.2 KiB

前端配置

这里仅提供一套开箱即用的方案,如果是个人开发者可以根据 API 文档自行编写前端评论组件。

评论组件初始化

在初始化 CWDComments 实例时,可以传入以下配置参数:

<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',
		postSlug: window.location.origin + window.location.pathname,
	});
	comments.mount();
</script>

参数说明

参数 类型 必填 默认值 说明
el string | HTMLElement - 挂载元素选择器或 DOM 元素
apiBaseUrl string - API 基础地址
postSlug string 当前页面 URL window.location.origin + window.location.pathname 文章唯一标识符
theme 'light' | 'dark' 'light' 主题模式
pageSize number 20 每页显示评论数

实例方法

方法 说明
mount() 挂载组件到 DOM
unmount() 卸载组件
updateConfig(config) 更新配置(支持动态切换主题等)
getConfig() 获取当前配置

使用示例

// 动态切换主题
comments.updateConfig({ theme: 'dark' });

// 切换文章
comments.updateConfig({ postSlug: 'another-post' });