取色器
在 EmDash CMS 中添加取色器字段组件,便于编辑者进行可视化配置。
插件
取色器
在 EmDash CMS 中添加取色器字段组件,便于编辑者进行可视化配置。
产品详情
- 分类
- 编辑器体验
- 状态
- 可用
- 版本
- 测试版内置
Color Picker 是面向编辑体验的小型插件:它增加取色器字段,让管理员用可视化方式配置品牌色,而不必在纯文本字段里手写十六进制。这也说明 EmDash 插件不只用于重型集成——同样能改善日常编辑体验。参见仓库中的 packages/plugins/color。
安装
- 在 EmDash 管理后台启用 Color Picker 插件。
- 在内容模型或模式中,把取色组件挂到需要设计师选色的字段(主题强调色、按钮色、分类徽标等)。
- 预览后台界面,确认取色器能渲染且保存后值能持久化。
配置
通常会定义:
- 默认颜色 — 新条目的品牌安全起点。
- 允许格式 — 视主题消费方式选择 hex、RGB 或 CSS 变量。
- 对比度或可访问性提示 — 某些团队在字段说明中注明,当颜色需在已知背景上满足 WCAG 对比度时。
示例(概念): 营销模板可将 primaryColor 与 secondaryColor 存为 #2563eb 与 #64748b,在 Astro 组件中通过构建期设置的 CSS 变量引用。
使用场景
- 主题定制 — 营销站点希望每次活动略有不同强调色,但不想重新部署。
- 设计体系 — 把调色板约束在结构化字段里,而不是散落的内联样式。
- 白标产品 — 合作伙伴在您设定的护栏内选色。
运维提示
- 文档化颜色如何映射到前端令牌,避免工程师重复硬编码。
- 若需禁止医疗品牌站点出现刺眼的绿色,可在保存时校验。
- 导出内容时把颜色字段纳入迁移清单,以免重新导入丢失样式。