README

一种紧凑、直观的方式来布局字段、元素和矩阵块。

要求

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

安装

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

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

然后告诉Composer加载插件

composer require wbrowar/craft-little-layout

在控制面板中，转到设置 → 插件，并为Little Layout点击“安装”按钮。
为您的元素创建和配置新的Little Layout字段。

Little Layout概览

Little Layout是一个紧凑的字段，使内容作者能够轻松调整其内容或UI以及其他设计元素的布局。它为开发人员提供了使内容在CSS网格布局或一组坐标周围移动变得容易的值。Little Layout字段易于访问且适用于移动设备。

配置Little Layout

在设置新的Little Layout字段时，您需要定义字段中有多少列和行可用。您的字段预览将出现，并会根据您调整的设置进行更新。

在设置列和行之后，您可以在字段预览中设置默认值。它就像作者体验期间字段的操作一样

点击一个框以选择它
点击另一个框以在两个选定点之间绘制一个矩形，选择矩形内的所有点
添加值后，点击右侧的“x”图标以清除字段

使用空白布局设置来确定作者是否可以清除他们设置的布局。注意：将字段设置为required也会移除作者的清除字段布局的能力，无论此设置如何。

使用Little Layout

以下数据可以在您的基于Twig或GraphQL的模板中检索

*坐标以'x|y'格式表示。

在Twig中访问Little Layout值

使用element.fieldHandle.empty如下检查Little Layout字段是否有值

{% if not element.fieldHandle.empty %}
  {# Use layout fields #}
{% endif %}

使用Twig在CSS网格中布局元素

要在一个CSS网格布局中布局元素，您可以这样做以指定确切的网格列和行

<div style="grid-column-start: {{ element.fieldHandle.gridColumnStart }}; grid-column-end: {{ element.fieldHandle.gridColumnEnd }}; grid-row-start: {{ element.fieldHandle.gridRowStart }}; grid-row-end: {{ element.fieldHandle.gridRowEnd }};"></div>

或者，您可以使用grid-column和grid-row属性，并提供起始和跨度值。

<div style="grid-column: {{ element.fieldHandle.gridColumnStart }} / span {{ element.fieldHandle.gridColumnSpan }}; grid-row: {{ element.fieldHandle.gridRowStart }} / span {{ element.fieldHandle.gridRowSpan }};"></div>

更好的是，考虑使用CSS自定义属性

<div class="layout" style="--grid-column-start: {{ element.fieldHandle.gridColumnStart }}; --grid-column-span: {{ element.fieldHandle.gridColumnSpan }}; --grid-row-start: {{ element.fieldHandle.gridRowStart }}; --grid-row-span: {{ element.fieldHandle.gridRowSpan }};"></div>

使用如下CSS

.layout {
   grid-column: var(--grid-column-start) / span var(--grid-column-span);
   grid-row: var(--grid-row-start) / span var(--grid-row-span);
}

如果您使用CSS框架，如Tailwind CSS，您可以这样做

<div class="col-start-[{{ element.fieldHandle.gridColumnStart }}] col-span-[{{ element.fieldHandle.gridColumnSpan }}] row-start-[{{ element.fieldHandle.gridRowStart }}] row-span-[{{ element.fieldHandle.gridRowSpan }}]"></div>

如果您的Twig模板文件包含在Tailwind配置的content模式中，您可能更喜欢使用逻辑和查找表保留完整的类名

{% set columnStartClasses = {
  1: 'col-start-1',
  2: 'col-start-2',
  3: 'col-start-3',
  4: 'col-start-4',
  5: 'col-start-5',
  6: 'col-start-6',
} %}
{% set columnSpanClasses = {
  1: 'col-span-1',
  2: 'col-span-2',
  3: 'col-span-3',
  4: 'col-span-4',
  5: 'col-span-5',
  6: 'col-span-6',
} %}
{% set rowStartClasses = {
  1: 'row-start-1',
  2: 'row-start-2',
  3: 'row-start-3',
  4: 'row-start-4',
  5: 'row-start-5',
  6: 'row-start-6',
} %}
{% set rowSpanClasses = {
  1: 'row-span-1',
  2: 'row-span-2',
  3: 'row-span-3',
  4: 'row-span-4',
  5: 'row-span-5',
  6: 'row-span-6',
} %}

{% set myAttributes = {
  class: [
    columnStartClasses[element.fieldHandle.gridColumnStart],
    columnSpanClasses[element.fieldHandle.gridColumnSpan],
    rowStartClasses[element.fieldHandle.gridRowStart],
    rowSpanClasses[element.fieldHandle.gridRowSpan],
  ],
} %}

<div {{ attr(myAttributes) }}></div>

{# Results look like this: <div class="col-start-1 col-span-3 row-start-1 row-span-2"></div> #}

在GraphQL中获取CSS网格值

可以像这样在GraphQL中检索相同的值

{
  entries(type: "mySection") {
    ... on mySection_mySectionType_Entry {
      fieldHandle {
        empty
        gridColumnStart
        gridRowStart
        gridColumnSpan
        gridRowSpan
      }
    }
  }
}

示例：简单文本对齐字段

您还可以将Little Layout字段中选定的值用于其他目的。例如，您可以将Little Layout字段用作选择文本对齐left、center和right的视觉方式。

要设置此，您可以这样做

设置一个具有3列和1行的新字段。
将空白布局设置为布局无法重置（或在字段布局设计器中将此字段设置为required）。
选择您想用作默认值的单个框。
保存您的字段并将其添加到您的元素中。

然后在前端（假设此处为从左到右的阅读顺序），您可以这样做（注意：此示例使用Twig和Tailwind，但其他配置中的逻辑是相同的）

{% set textAlignClasses = {
  1: 'text-left',
  2: 'text-center',
  3: 'text-right',
} %}

{% set myAttributes = {
  class: [
    textAlignClasses[element.fieldHandle.selectedColumns[0]],
  ],
} %}

<div {{ attr(myAttributes) }}></div>

在这种情况下，element.fieldHandle.selectedColumns给我们一个包含数字1、2或3的数组作为值。

版本发布

发布说明可以在CHANGELOG.md中找到

支持的版本

以下是未来为Little Layout添加和支撑功能的总体目标

新的插件功能将被添加到当前主要插件版本中，该版本针对Craft CMS的当前发布版本。
将支持针对Craft CMS先前发布的主要版本的最新主要插件版本，并在此版本中引入的Craft CMS更新中包含错误修复。
之前的主要插件版本将仅获得安全相关的更新——当需要时。

由Will Browar提供

wbrowar / craft-little-layout

维护者

详细信息