README

此插件添加了一个代码片段，以便以结构化的方式渲染布局字段。默认情况下，它使用 bulma.io 类来实现。

安装

最佳方式是通过 composer 安装。

composer require femundfilou/kirby-render-layouts

使用方法

无论何时你在蓝图中使用 type: layouts 字段，你都可以使用提供的代码片段来渲染字段。

snippet('render-layouts', ['field' => $page->myLayoutFieldName()]);

这将为你在面板中添加的每个布局渲染以下基本标记。

<section class="section">
  <div class="container">
    <div class="columns">
      <div class="column is-[fraction]">
        <div class="block block-type-[myblock]" data-block-type="[myblock]">
          ...
        </div>
      </div>
    </div>
  </div>
</section>

配置

你可以在 config.php 内部以及在每个代码片段本身中覆盖默认配置。

在 config.php 中覆盖

return [
  'femundfilou.render-layouts.defaults' => [
    'columns' => 12, // Defines the max columns count, used to calculate each columns fraction.
    'sectionClass' => 'section', // Default class used for section
    'containerClass' => 'container', // Default class used for container
    'columnsClass' => 'columns', // Default class used for columns
    'columnClass' => 'column', // Default class used for column
    'blockClass' => 'block',  // Default class uses for block
    'columnWidthClass' => function(int $columnSpan) {
        // Return a string which is used on each indidual column as a width class
        return  'is-' . $columnSpan;
    }
  ],
];

在代码片段中覆盖

snippet('render-layouts', ['field' => $page->myLayoutFieldName(), 'columnsClass' => 'grid']);

这将导致此页面上的以下标记。

<section class="section">
  <div class="container">
    <div class="grid">
      <div class="column is-[fraction]">
        <div class="block block-type-[myblock]" data-block-type="[myblock]">
          ...
        </div>
      </div>
    </div>
  </div>
</section>

自定义属性和布局设置

为了进一步自定义每个布局，此插件提供了一种简单的方法来使用定义为 布局设置 的字段。

预定义字段

有三个保留的字段名称，你可以使用它们为不同的包装器添加类。只需在布局设置字段内部使用它们即可，如下所示

mylayoutfield:
  label: Layout
  type: layout
  layouts:
    - "1/1"
    - "1/2, 1/2"
  settings:
    fields:
      sectionClass:
        label: Section
        type: select
        options:
          'my-section-class' : 'Example'
        ...
      containerClass:
        ...
      columnsClass:
        ...

使用你自己的字段和属性

除了预定义的字段之外，你还可以使用任何你自己的字段来向 section 添加 属性。首先将字段添加到你的布局字段中，例如。

mylayoutfield:
  label: Layout
  type: layout
  layouts:
    - "1/1"
    - "1/2, 1/2"
  settings:
    fields:
      spacingclass:
        label: Spacing
        type: select
        options:
          '' : Default
          'is-medium': Medium
          'is-large': Large
      background:
        label: Background color
        type: toggles
        default: ''
        options:
          'transparent' : No background
          '#000' : Black
          '#fff' : White

然后在 config.php 内部定义你想要使用的字段。在 femundfilou.render-layouts.fields 数组中定义应作为键使用的 字段名 以及作为值使用的 属性 或返回关联数组的函数。

return [
'femundfilou.render-layouts.fields' => [
    // Provide an field name and attribute
    'spacingclass' => 'class'
    // Or use a function to go crazy. You event get access to the current layout.
    'background' => function($layout) {
      // Return attribute and value
      return ['style' => '--background-color: ' . $layout->background(). ';'];
    },
  }
]

这将导致以下标记。

<section class="section is-medium" style="--background-color: #000;">
  <div class="container">
    <div class="columns">
      <div class="column is-[fraction]">
        <div class="block block-type-[myblock]" data-block-type="[myblock]">
          ...
        </div>
      </div>
    </div>
  </div>
</section>