README

概述

包含列块的包装器部分。

由于列块和网格块的成功，我根据您的建议创建了一个改进版本。

特性

⭐️ 使用 blueprints/fields/section.yml 中的自定义字段轻松设置部分

⭐️ 使用 blueprints/fields/columns.yml 中的自定义字段轻松设置列

⭐️ 定义一组可用的列类型：blueprints/columns/*.yml。

⭐️ 为每个列类型设置样式。即使是带有占位符的字段。→ 深入 WYSIWYG。

此插件目前处于测试版：请自行承担风险使用。

需要贡献者！请通过发布您的反馈或进行拉取请求来帮助我改进这个项目。

错误

内容块输入失去焦点

缺少功能

粘贴

Parsley 集成

每个列类型单独的字段集

主要选项栏上的更改类型按钮

与选项卡的兼容性

安装

手动

下载并将插件复制到您的插件文件夹： /site/plugins/

使用 Composer

composer require microman/kirby-section-block:^1.0-beta

如何使用

只需遵循 Kirby Blocks 指令。

设置您的蓝图

my_block:
    type: blocks
    fieldsets:
        - section
        ... even more if you like

设置您的输出

<?php foreach ($page->my_block()->toBlocks() as $block): ?>
   
    <?= $block ?>

<?php endforeach ?>

示例

让我们做一个例子（如截图所示）

设置部分块

假设您想给编辑器设置部分最大宽度的能力。

site/blueprints/fields/sections.yml （请注意：是 fields 文件夹而不是 blocks！）

fields:
  max_width:
    type: number
    after: px

部分块没有定义后端样式的可能性。

设置列块

现在，我们设置背景字段。我们可以稍后使用该值来为后端样式。我们还为内容块设置了一些字段集。

site/blueprints/fields/columns.yml

fields:
  background:
    type: colors
    alpha: true
  content:
    fieldsets:
      - heading
      - text

此设置需要一个颜色字段。查看此。

设置列类型

您可以提供多少种类型就提供多少种。但至少设置一个或删除 blueprints/columns 文件夹以使用 3 个默认值。在这里，我们使用全宽作为例子，并为后端设置样式。背景值来自我们之前定义的颜色字段。

site/blueprints/columns/xxx.yml

title: Full Width
icon: col_1_1
width: "1/1"
style:
    background: background
    border: 1px solid black

自定义输出

最佳做法是将插件文件夹中的 snippets/blocks/section 复制到您的网站文件夹。您将轻松理解那里发生了什么。

让我简单谈谈 $column->column_width() 方法（以 1/2 为例）

没有任何参数时，您将获得如下原始值：1/2
设置一个数字作为参数，宽度将除以该值：column_width(100) → 50 column_width(12) → 6
任何其他字符都是分隔符：column_width('_') → 1_2

继承部分块

通常情况下，你按照上面的方式设置即可。但是有时候，你可能需要在其他地方以不同的设置使用该节区块。让我来展示如何操作。

自定义节区块

比如说，在一个地方你需要为你的节区块添加一个新的字段。我们来试试吧。

my_custom_block:
  type: blocks
  fieldsets:
    section:
      extends: blocks/section
      fields:
        new_section_field:
          type: text

自定义列类型

my_custom_block:
  type: blocks
  fieldsets:
    section:
      extends: blocks/section
      fields:
          columns:
            options:
              custom_type1:
                title: Half and Red Background
                icon: col_1_2
                width: "1/2"
                style:
                    background: red
              custom_type1:
                title: Half and Blue Background
                icon: col_1_2
                width: "1/2"
                style:
                    background: blue

自定义列区块

在这个例子中，我们想向列中添加一个新字段，并覆盖字段集。

my_custom_block:
  type: blocks
  fieldsets:
    section:
      extends: blocks/section
      fields:
          columns:
            fieldsets:
              column:
                extends: blocks/column
                fields:
                  new_column_field:
                    type: text
                  content:
                    fieldsets:
                      - video
                      - image

哇！🥵 有很多缩进。不，为特定列类型设置不同的字段集是不可能的。但是如果你想实现它，请随意并创建一个 pull request。

享受这个过程吧！

许可

MIT

表达你的感激之情，并买我一杯 ☕️

microman / kirby-section-block

维护者

详细信息