取色器

在 EmDash CMS 中添加取色器字段组件,便于编辑者进行可视化配置。

插件

取色器

在 EmDash CMS 中添加取色器字段组件,便于编辑者进行可视化配置。

  • 分类: 编辑器体验
  • 状态: 可用
  • 版本: 测试版内置
  • 价格: 测试版内置

产品详情

分类
编辑器体验
状态
可用
版本
测试版内置

Color Picker 是面向编辑体验的小型插件:它增加取色器字段,让管理员用可视化方式配置品牌色,而不必在纯文本字段里手写十六进制。这也说明 EmDash 插件不只用于重型集成——同样能改善日常编辑体验。参见仓库中的 packages/plugins/color

安装

  1. 在 EmDash 管理后台启用 Color Picker 插件。
  2. 在内容模型或模式中,把取色组件挂到需要设计师选色的字段(主题强调色、按钮色、分类徽标等)。
  3. 预览后台界面,确认取色器能渲染且保存后值能持久化。

配置

通常会定义:

  • 默认颜色 — 新条目的品牌安全起点。
  • 允许格式 — 视主题消费方式选择 hex、RGB 或 CSS 变量。
  • 对比度或可访问性提示 — 某些团队在字段说明中注明,当颜色需在已知背景上满足 WCAG 对比度时。

示例(概念): 营销模板可将 primaryColorsecondaryColor 存为 #2563eb#64748b,在 Astro 组件中通过构建期设置的 CSS 变量引用。

使用场景

  • 主题定制 — 营销站点希望每次活动略有不同强调色,但不想重新部署。
  • 设计体系 — 把调色板约束在结构化字段里,而不是散落的内联样式。
  • 白标产品 — 合作伙伴在您设定的护栏内选色。

运维提示

  • 文档化颜色如何映射到前端令牌,避免工程师重复硬编码。
  • 若需禁止医疗品牌站点出现刺眼的绿色,可在保存时校验。
  • 导出内容时把颜色字段纳入迁移清单,以免重新导入丢失样式。