README

创建灵活且可控的自定义颜色调色板。

为Craft CMS 4+设计的颜色样本插件

不同于提供一个完整颜色选择器，颜色样本是一个可配置的字段类型，它允许管理员提供一组供用户选择的颜色。这使您能够创建具有一组已准备好的类名的品牌颜色调色板，以便在模板中使用。

要求

此插件需要Craft CMS 4.0.0或更高版本。

安装

要安装此插件，请按照以下说明操作。

打开您的终端并转到您的Craft项目
```
 cd /path/to/project
```

然后告诉Composer加载插件

 composer require craftpulse/craft-colour-swatches

在控制面板中，转到设置 → 插件，并点击颜色样本的“安装”按钮。

配置颜色样本

使用字段设置

创建颜色样本字段，并提供标签和十六进制值选项。通过逗号分隔可以添加多个颜色。

当使用字段设置与颜色样本时

您可以在模板中访问标签和颜色。默认情况下，标签将显示

    {{ fieldName }}
    {{ fieldName.label }}
    {{ fieldName.color }}

    {% for color in fieldName.color %}
        {{ color.color }}
    {% endfor %}

如果您想要对颜色调色板有更精细的控制，请使用以下配置文件选项。

使用配置文件

您可以使用一个 config/colour-swatches.php 配置文件来预定义可能的颜色，定义不同的调色板，并添加标签、类名或其他属性到您的颜色。

请参阅此存储库中的配置文件中的示例。

return [

    // Custom  palettes, fixed options [label, default (boolean), colour (array(colour, customOptions)) ]
    'palettes' => [
        'Tailwind' => [  // custom label (required)
            [
                'label'   => 'Red', // custom label (required)
                'default' => true,  // default could be true/false (option is required)
                'color'   =>  [
                    [
                        'color'             => '#ef4444',               // the colour shown in the fieldtype (required)
                        'background'        => 'bg-red-500',            // optional / custom attribute
                        'backgroundHover'   => 'hover:bg-red-700',      // optional / custom attribute
                        'text'              => 'text-white',            // optional / custom attribute
                        'textHover'         => 'hover:text-zinc-200'    // optional / custom attribute
                    ]
                ]
            ],
            [
                'label'   => 'Amber',
                'default' => false,
                'color'   =>  [
                    [
                        'color'             => '#f59e0b',               
                        'background'        => 'bg-amber-500',
                        'backgroundHover'   => 'hover:bg-amber-700',
                        'text'              => 'text-white',
                        'textHover'         => 'hover:text-zinc-200'
                    ]
                ]
            ],
            [
                'label'   => 'Green',
                'default' => false,
                'color'   =>  [
                    [
                        'color'             => '#22c55e',              
                        'background'        => 'bg-green-500',
                        'backgroundHover'   => 'hover:bg-green-700',
                        'text'              => 'text-white',
                        'textHover'         => 'hover:text-zinc-200'
                    ]
                ]
            ],
            [
                'label'   => 'Blue',
                'default' => false,
                'color'   =>  [
                    [
                        'color'             => '#3b82f6',              
                        'background'        => 'bg-blue-500',
                        'backgroundHover'   => 'hover:bg-blue-700',
                        'text'              => 'text-white',
                        'textHover'         => 'hover:text-zinc-200'
                    ]
                ]
            ],
            [
                'label'   => 'Purple',
                'default' => false,
                'color'   =>  [
                    [
                        'color'             => '#a855f7',              
                        'background'        => 'bg-purple-500',
                        'backgroundHover'   => 'hover:bg-purple-700',
                        'text'              => 'text-white',
                        'textHover'         => 'hover:text-zinc-200'
                    ]
                ]
            ],
            [
                'label'   => 'Yellow/Emerald',
                'default' => false,
                'color'   =>  [
                    [
                        'color'             => '#eab308',              
                        'background'        => 'bg-yellow-500',
                        'backgroundHover'   => 'hover:bg-yellow-700',
                        'text'              => 'text-white',
                        'textHover'         => 'hover:text-zinc-200'
                    ],
                    [
                        'color'             => '#059669',               
                        'background'        => 'bg-emerald-600',
                        'backgroundHover'   => 'hover:bg-emerald-800',
                        'text'              => 'text-white',
                        'textHover'         => 'hover:text-zinc-200'
                    ]
                ]
            ],
            [
                'label'   => 'Red/Amber',
                'default' => false,
                'color'   =>  [
                    [
                        'color'             => '#a855f7',              
                        'background'        => 'bg-red-500',
                        'backgroundHover'   => 'hover:bg-red-700',
                        'text'              => 'text-white',
                        'textHover'         => 'hover:text-zinc-200'
                    ],
                    [
                        'color'             => '#f59e0b',               
                        'background'        => 'bg-amber-500',
                        'backgroundHover'   => 'hover:bg-amber-700',
                        'text'              => 'text-white',
                        'textHover'         => 'hover:text-zinc-200'
                    ]
                ]
            ],
            [
                'label'   => 'Sky/Rose',
                'default' => false,
                'color'   =>  [
                    [
                        'color'             => '#0ea5e9',               
                        'background'        => 'bg-sky-500',
                        'backgroundHover'   => 'hover:bg-sky-700',
                        'text'              => 'text-white',
                        'textHover'         => 'hover:text-zinc-200'
                    ],
                    [
                        'color'             => '#e11d48',               
                        'background'        => 'bg-rose-600',
                        'backgroundHover'   => 'hover:bg-rose-800',
                        'text'              => 'text-white',
                        'textHover'         => 'hover:text-zinc-200'
                    ]
                ]
            ],
        ]
    ]

];

然后，在字段设置中，您可以选择使用预定义的颜色。

修改配置文件

如果您有使用颜色样本的条目并且修改了配置文件，您需要重新保存您的条目，以便将配置文件中的新信息拉入条目数据。

从命令行，您可以运行Craft的 ./craft resave/entries，您的条目将被填充来自 colour-swatches.php 配置文件的所有更改。颜色样本使用 label 值来将更改映射到条目，因此请确保您的标签值是唯一的/非空的。

使用颜色样本

您可以在模板中访问标签和颜色。默认情况下，标签将显示

    {{ fieldName }}
    {{ fieldName.label }}
    {{ fieldName.color }}
    {{ fieldName.customAttribute }}

如果您使用多个颜色，您需要遍历您的颜色数组

    {% for field in fieldName.color %}
        {{ field.color }}
        {{ field.customAttribute }}
    {% endfor %}

GraphQL

颜色样本提供了GraphQL支持，您可以构建以下查询

fieldName {
        label
        class
        color
      }

如果使用配置文件，这将给出以下结果

"fieldName": {
          "label": "Black/White",
          "class": "",
          "color": [
            "{\"color\":\"#000000\",\"background\":\"bg-black\"}",
            "{\"color\":\"#ffffff\",\"text\":\"text-white\"}"
          ]
        },

或者在通过设置添加单个值的情况下，您将看到

"fieldName": {
          "label": "Black",
          "class": "",
          "color": [
            "#000000"
          ]
        },

由 Craft Pulse 提供

craftpulse / craft-colour-swatches

维护者

详细信息