README

在面板中显示的色彩调色板，帮助您选择预定义的颜色/调色板。

概览

此插件完全免费，并按照 MIT 许可证发布。但是，如果您在商业项目中使用它，并想帮助我进行维护，请考虑 进行任意金额的捐赠 或通过 我的联盟链接 购买您的许可证。

• 1. 安装
• 2. 设置
• 3. 配置
• 4. 从图片中提取调色板
• 5. 模板使用
• 6. 许可证
• 7. 致谢

1. 安装

下载并将此仓库复制到 /site/plugins/color-palette

或者，您可以使用 composer 安装它：composer require sylvainjule/color-palette

2. 设置

基本设置如下所示

palette:
  label: Pick a color
  type: color-palette
  options:
    - '#135fdc'
    - '#f6917e'
    - '#6a96e4'
    - ...

注意：您可以用任何有效的 CSS 颜色填充它

- '#ffffff'
- rgba(255, 255, 255, 0.5)
- rgb(255, 255, 255)
- white

3. 配置

3.1. options（必需）

插件接受数组或结构化对象。

• 简单颜色

palette:
  type: color-palette
  options:
    - '#135fdc'
    - '#f6917e'
    - '#6a96e4'
    - ...

• 结构化颜色主题

该字段将使用对象中的第一个颜色作为背景色。

palette:
  type: color-palette
  options:
    blue:
      background: '#135fdc'
      border: '#0438c7'
      text: white
    orange:
      background: '#f6917e'
      border: '#ef6a57'
      text: white
    ...

您可以为结构化颜色添加工具提示：任何带有 tooltip 键的颜色在悬停时都会显示工具提示。

...
  options:
    blue:
      background: '#135fdc'
      tooltip: This is a tooltip
    ...

• 动态选项

您可以为动态选项/从不同的字段查询选项。只需确保 value 返回一个有效的 CSS 颜色即可。

例如，使用结构化字段

palette:
  type: color-palette
  options: query
  query:
    fetch: page.mycolors.toStructure
    value: "{{ structureItem.color }}"

...

mycolors:
  type: structure
  fields:
    color:
      type: text

3.2. display

颜色块的显示样式，可选 single 或 duo 。默认为 single。

如果选择的是 duo 样式，并且选项是结构化颜色主题，字段将使用对象的第一个颜色作为左侧颜色，第二个颜色作为右侧颜色。

palette:
  type: color-palette
  display: single

3.3. size

颜色块的尺寸，可选 small、medium 或 large 。默认为 medium。

palette:
  type: color-palette
  size: medium

3.4. unselect

如果设置为 true，则可以选择取消选择已选择的颜色。默认为 false。

palette:
  type: color-palette
  unselect: false

3.5. default

如果字段没有设置值，将使用此默认值。如果不匹配选项，将忽略它。默认为 false。

#simple colors
palette:
  type: color-palette
  default: '#135fdc'
  options:
    - '#135fdc'
    - '#f6917e'

# structured colors
palette:
  type: color-palette
  default: blue
  options:
    blue:
      background: '#135fdc'
      border: '#0438c7'
    orange:
      background: '#f6917e'
      border: '#ef6a57'

4. 从图片中提取调色板

4.1. 手动选择要从中提取颜色的图片

您可以通过激活 extractor 选项从页面图像文件中提取色彩调色板。如果指定了手动选项，它将覆盖这些选项。默认为 false。

palette:
  type: color-palette
  extractor: true
  # no need for options anymore

您可以使用 template 选项将选择限制在特定的文件模板上

palette:
  type: color-palette
  extractor: true
  template: cover

4.2. 当图片匹配模板时自动提取颜色

或者，您可以使用 autotemplate 选项（在这种情况下不要添加上述 extractor 选项）。

如果页面至少有 1 张与给定模板匹配的图片（如果找到 2 张以上，字段将使用第一张），则选项将在加载时自动从其中提取。

请注意，没有实时同步，页面需要重新加载才能让插件检测到新添加的图片。在不手动刷新页面的情况下实现此功能的最佳方法是将此字段和文件部分放在两个不同的选项卡下。

palette:
  type: color-palette
  autotemplate: cover
  # no need for options anymore

4.3. 限制

在这两种情况下，可以使用 limit 选项设置提取颜色的最大数量。默认为 10。

palette:
  type: color-palette
  extractor: true
  limit: 10

5. 模板使用

5.1. 如果 options 是一个简单颜色的数组

该字段只会存储选定的颜色。

$selected = $page->palette();   #(Field object)
$selected = $selected->value(); #(string)

5.2. 如果 options 是一个结构化颜色对象

该字段需要使用 yaml 方法进行解码。例如，如果你的选项看起来像这样

options:
  blue:
    background: '#135fdc'
    border: '#0438c7'

这是获取选定颜色的方法

$palette    = $page->palette()->yaml();
$background = $palette['background']; #(string)
$border     = $palette['border']; #(string)

请注意，在这种情况下，插件会自动添加选定颜色的键，以防你想要处理自定义类等。

$border     = $palette['key']; #(string)

5.3. 如果调色板是从图片中提取的

选定的颜色和提取的调色板都将被存储。该字段的值是一个你需要使用 yaml 方法解码的数组

$palette  = $page->palette()->yaml();
$selected = $palette[0]; #selected color (string)
$palette  = $palette[1]; #extracted palette (array)

6. 许可证

MIT

7. 致谢

• K2 版本: 颜色列表 由 @Thiousi 提供