README

这是Sylvain的调色板插件的一个快速而粗糙的分支。它不包含图像颜色提取功能，但与Kirby 4兼容。我并不积极支持此插件，它仅适用于旧项目。请使用新的核心颜色字段。下面的README可能已过时。

composer require tobimori/kirby-color-palette:dev-master

Kirby Color-Palette

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

概述

此插件完全免费，并遵循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提供