README

分类

分类是一个实用助手，可以将CSS类添加到Statamic Bard编辑器生成的所有HTML标签。

安装

要求

Statamic v4 || v5
Laravel 10 || 11
PHP 8.2+

安装

使用composer安装Classify

composer require visuellverstehen/statamic-classify

发布配置文件

安装过程将自动将classify.php文件发布到config文件夹。

用法

配置

要添加或更改样式集，只需添加或更改一个数组，其中包含应添加到HTML标签的类。

'default' => [
    'h1' => 'text-2xl',
    'a'  => 'link hover:text-blue',
    'p' => 'mb-5',
    'li p' => 'mb-2 ml-4',
],

此示例使用TailwindCSS，但您可以使用任何类型的CSS。

示例输出

<h1 class="text-2xl">A headline</h1>
<p class="mb-5">Some text</p>

<ul>
    <li><p class="mb-2 ml-4">A list item</p></li>
    <li><p class="mb-2 ml-4">A list item</p></li>
    <li><p class="mb-2 ml-4"><a class="link hover:text-blue" href="#">Click me</a></p></li>
</ul>

<p class="mb-5">Another text</p>

用法

如果您想使用默认样式集，请使用classify修饰符。

{{ bard_text | classify }}

如果您想添加多个样式集，您可以在配置文件中定义这些样式集

'default' => [
    // 
],
'blog' => [
    'a'  => 'link hover:underline',
    'li p' => 'ml-3 font-bold',
    'p' => 'mb-5',
],

// Antlers view
{{ bard_text | classify:blog }}

如果您想获取特定元素的已定义类，您可以直接从配置中获取或使用classify标签

{{ classify:h1 }}
// output: text-2xl

{{ classify element="li p" }}
// output: mb-2 ml-4

{{ classify:a styleset="blog" }}
// output: link hover:underline

嵌套选择器

您可以将选择器嵌套以在不同的上下文中以不同的方式样式化元素。

假设您想以不同的方式样式化列表中的链接，您可以利用嵌套

`ul li p a` => 'my-secial-css-class-for-nested-links-in-lists`,
`a` => `a-general-link-class`,

分类将处理顺序，因此您无需在通用选择器之前定义嵌套选择器。

与CSS框架（如TailwindCSS）一起工作

某些CSS框架使用JIT编译，或使用其他方法从生产构建中清除CSS类以减少文件大小。由于这些类将动态添加，您的分类CSS类可能不会出现在模板文件的任何地方。为了确保您的类将被考虑进行编译，您必须将分类配置文件作为内容包含

module.exports = {
  content: [
    // all of your content files
    // './pages/**/*.{html,js}'
    // './components/**/*.{html,js}',
    './config/classify.php',
  ],
}

关于我们的更多信息

许可证

MIT许可证（MIT）。有关更多信息，请参阅我们的许可证文件。

visuellverstehen / statamic-classify

维护者

详细信息