README

🤔 这是啥？

设计令牌是一种Craft下拉字段类型，其中选项和值可以通过JSON文件进行控制。

如果你使用Tailwind，JIT过程只针对文件系统中找到的Tailwind值运行。如果你数据库中有像bg-indigo-700这样的类，Tailwind无法找到它（除非你启用项目配置，但你真的希望Tailwind扫描你的项目配置吗？）。

设计令牌允许你通过文件系统上的JSON文件定义值，这使得使用Tailwind的JIT过程并为您添加和编辑下拉框中的新值提供了一种简单的方法。

⚠️ 注意！

编辑这些JSON文件可能会导致数据输出损坏。例如

{
  "standard": "my-12",
+ "tighter": "my-6",
- "tight": "my-6",
  "none": "my-0"
}

将"tight"改为"tighter"将破坏任何使用"tight"的条目！现在当它尝试定位"tight"的值时，将会是空的，直到你更改了所有这些值。

📝 使用方法

要设置配置，请在config/designtokens中创建单独的JSON文件。

单个键/值对（例如：spacing.json）

{
  "standard": "my-12",
  "tight": "my-6",
  "none": "my-0"
}

{{ entry.myTokenField }}
{# Outputs the value of the selected option (my-12, my-6, my-0) #}

{{ entry.myTokenField.key }}
{# Outputs the key of the selected option (standard, tight, none) #}

嵌套的键/值对（例如：hero.json）

{
  "red": {
    "text": "text-red-500",
    "bg": "bg-red-100"
  },
  "green": {
    "text": "text-green-500",
    "bg": "bg-green-100"
  },
  "blue": {
    "text": "text-blue-500",
    "bg": "bg-blue-100"
  }
}

{{ entry.myTokenField.key }}
{# Outputs the key of the selected option (red, green, blue) #}

{{ entry.myTokenField.get('text') }}
{# Outputs the nested value of the selected option (text-red-500, text-green-500, text-blue-500) #}

{{ entry.myTokenField.get('bg') }}
{# Outputs the nested value of the selected option (bg-red-100, bg-green-100, bg-blue-100) #}

您也可以通过字段直接调用配置，而不使用界面。

{# Get the spacing.json config #}
{{ designTokens('spacing') }}

{# Get the value from the `standard` key #}
{{ designTokens('spacing').standard }}

{# Get the value from the `tight` key #}
{{ designTokens('spacing').tight }}

{# Get the value from the `none` key #}
{{ designTokens('spacing').none }}

🪄 示例

与其使用多个Twig条件来渲染正确的颜色，您可以使用设计令牌轻松提取所需的值并将其插入相应的HTML中。

📦 安装

有两种方式可以安装设计令牌

• 通过Craft插件商店安装
• 运行composer require trendyminds/design-tokens，然后从"设置 > 插件"中启用插件

🤝 贡献

如果您想贡献，请提交一个审查拉取请求。我们尽可能地审查和接受贡献！