公告管理插件使用指南

目录

快速开始

1. 配置公告类型

进入「插件设置」→「公告类型」，可以自定义公告类型：

  • 通知（蓝色）
  • 更新（绿色）
  • 警告（橙色）
  • 重要（红色）

每个类型可设置名称和颜色，前台列表会显示对应的类型标签。

2. 创建第一个公告

  1. 进入「工具」→「公告管理」
  2. 点击「新建公告」
  3. 填写标题和内容
  4. 选择类型和可见范围
  5. 点击「发布」

公告管理

基本设置

选项说明
类型选择公告类型，前台显示对应颜色标签
可见范围控制谁能看到这条公告
置顶显示开启后公告在列表中优先显示
启用弹窗开启后公告会以弹窗形式展示

可见范围说明

选项列表可见弹窗触发
所有人所有访客所有访客
登录用户所有访客仅登录用户
未登录用户所有访客仅未登录用户
不显示不可见不触发

注意：同一时间只能有一个「所有人」弹窗，或者一个「登录用户」弹窗 + 一个「未登录用户」弹窗。

弹窗配置

显示设置

选项说明
弹窗图标选择 Iconify 图标，留空使用默认喇叭图标
图标背景色图标圆形背景的颜色
弹窗位置居中、左上、右上、左下、右下
自动关闭设置秒数后自动关闭，0 表示不自动关闭
弹窗间隔用户关闭后多少小时再次弹出，0 表示每次访问都弹
点击外部关闭是否允许点击弹窗外部区域关闭
礼花效果弹窗出现时播放礼花动画

URL 匹配规则

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

/                    # 仅首页
/archives/*          # 所有文章页
/categories/tech/*   # tech 分类下的页面
  • 留空或只填 / 表示仅首页弹出
  • 支持 * 通配符
  • 每行一个规则，匹配任意一个即触发

按钮配置

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

事件类型说明
关闭公告点击后关闭弹窗
跳转链接点击后在新窗口打开链接
确认后跳转弹出确认框，确认后跳转
JS 回调执行自定义 JavaScript 代码

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: 置顶公告没有排在最前面？

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