#公告管理插件使用指南

#目录

• 快速开始
• 公告管理
• 弹窗配置
• 前台展示
• 编辑器扩展
• 最佳实践

#快速开始

#公告管理

#基本设置

#可见范围说明

#弹窗配置

#显示设置

#URL 匹配规则

控制弹窗在哪些页面显示：

/                    # 仅首页
/archives/*          # 所有文章页
/categories/tech/*   # tech 分类下的页面

• 留空或只填 / 表示仅首页弹出
• 支持 * 通配符
• 每行一个规则，匹配任意一个即触发

#按钮配置

每个弹窗支持主按钮和副按钮（可选）：

#JS 回调示例

简单提示：

alert('感谢您的关注！');

跳转并记录：

localStorage.setItem('clicked', Date.now());
window.location.href = '/special-page';

发送统计：

fetch('/api/track', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ event: 'announcement_click' })
});

#前台展示

#公告列表组件

在主题模板中使用 Web Component：

<announcement-list page-size="10"></announcement-list>

属性说明：

• page-size: 每页显示条数，默认 10

#自定义样式

组件使用 CSS 变量，可在主题中覆盖：

announcement-list {
  --likcc-c-primary: #3b82f6;
  --likcc-c-text: #1d2129;
  --likcc-c-border: #e5e6eb;
}

#暗色模式

组件自动适配暗色模式，也可手动指定：

.dark announcement-list,
[data-color-scheme="dark"] announcement-list {
  --likcc-c-text: #e5e5e5;
  --likcc-c-bg: #1f1f1f;
}

#编辑器扩展

在文章编辑器中插入公告列表：

1. 输入 /公告 或 /announcement
2. 选择「公告列表」
3. 设置每页显示条数

发布后，文章中会显示公告列表组件。

#最佳实践

#1. 弹窗使用建议

• 不要滥用弹窗：频繁弹窗会影响用户体验
• 设置合理间隔：建议至少 24 小时间隔
• 提供关闭方式：保持「点击外部关闭」开启
• 内容简洁：弹窗内容不宜过长

#2. 权限配置建议

• 重要通知：使用「所有人」
• 会员专属：使用「登录用户」
• 注册引导：使用「未登录用户」
• 草稿/测试：使用「不显示」

#3. 公告类型规范

建议统一公告类型的使用场景：

#4. URL 匹配技巧

/                     # 首页
/archives/*           # 所有文章
/archives/hello-world # 指定文章
/categories/*         # 所有分类页
/tags/*               # 所有标签页
/*                    # 所有页面（慎用）

#5. JS 回调安全提示

• 回调代码由管理员配置，请确保代码安全
• 避免在回调中执行敏感操作
• 建议先在控制台测试代码

#常见问题

#Q: 弹窗不显示？

1. 检查「启用弹窗」是否开启
2. 检查「可见范围」是否正确
3. 检查「URL 匹配规则」是否匹配当前页面
4. 检查「弹窗间隔」，可能在间隔时间内
5. 清除浏览器 localStorage 重试

#Q: 如何让弹窗每次都显示？

将「弹窗间隔」设置为 0。

#Q: 如何在所有页面显示弹窗？

URL 匹配规则填写 /*。

#Q: 置顶公告没有排在最前面？

确保已开启「置顶显示」开关，刷新页面查看效果。