README

概览

你喜欢用 Kirby CMS 做出出色的项目吗？你是否也觉得在代码片段和蓝图文件夹之间切换很困难？

这个插件将改变你的生活！

观看 视频教程 或查看 示例项目

安装

手动

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

使用 Composer

composer require microman/kirby-components

第一步

1. 创建一个组件文件夹 site/components
2. 为您的组件创建一个子文件夹，例如 components/my_component
3. 创建至少一个与文件夹同名的大纲，例如 my_component/my_component.yml
4. 创建至少一个代码片段。例如 my_component//my_component.php

您可以在您的组件文件夹中创建更多的代码片段和蓝图。（称为子组件）为了以后访问它们，声明位置 my_component/my_subcomponent

您可以在您的蓝图中设置标签、标题和图标。如果您喜欢，还可以设置标签页和列。

在模板中使用

要输出您的组件，请使用 component 助手

component('my_component');

向此组件传递值

component('my_component', $page, ['title' => 'This is a different title.']);

第一个和第二个参数可以是数组或包含内容对象的 Kirby 对象。尝试看看什么对您有效。

在面板中使用

组件字段

my_field:
  type: component
  fieldsets: my_component

您也可以在这里使用 Kirby 块： fieldsets: blocks/heading

$page->my_field()->toComponent();

如上例所示扩展您的组件

$page->my_field()->toComponent(['new_value' => 'My new value']);

组件代码片段中的变量可以通过 $content 访问

$content->field_in_component();

组件选择器

如果您将多个组件添加到字段集中，则会出现一个选择器

my_field:
  type: component
  fieldsets:
    - my_component
    - my_component/my_subcomponent
    - my_other_component

通过选择，所选组件的字段将出现。

要更改选择器中的标签，设置组件的 'title' 属性。

带有图像的组件选择器

将图像添加到您的组件文件夹中（与组件本身同名）

这些图像将显示在选择器中，并且可以使用 selector 属性进行样式设计

my_field:
  type: component
  selector:
    columns: 3
    background: var(--color-yellow-200) 
    ratio: 3/1
    fit: contain
    gap: 1em
  fieldsets:
    - my_component
    - my_component/my_subcomponent
    - my_other_component

图像切换字段

您也可以独立使用组件选择器

images_toggles:
  type: imagetoggles
  root: location/of/the/images
  ratio: 2/1
  fit: cover
  gap: 1.2em
  options:
    - text: Text1
     value: value1
     image: image1.png
    - text: Text2
     value: value2
     image: image2.png
    - text: Text3
     value: value3
     image: image3.png

它遵循与 toggles 字段相同的规则。

输出组件字段

使用 toComponent() 方法。

$page->my_field()->toComponent();

或者您可以使用数组或 Kirby 对象扩展值

$page->my_field()->toComponent(['my_component_field' => 'My existing or new value']);
$page->my_field()->toComponent($page->any_section());

toComponent() 方法提供所选组件。

如果您想使用组件字段中所有可用的组件，请使用 toComponents()

<?php foreach ($page->my_field()->toComponents() as $component): ?>
  <?= $component ?>
<?php endforeach ?>

组件字段

通过使用 components 字段添加多个组件。它遵循与 Kirby blocks 字段相同的规则。

multiple_components:
  type: components
  fieldset:
    - my_component
    - my_component/my_subcomponent
    - my_other_component
    - blocks/heading
    - blocks/text
    - blocks/list

标签注入

将带有组件的标签添加到组件字段中。

multiple_components:
  type: components
  tabs:
    my_component/my_subcomponent:
      position: after
      label: Injected tab
  fieldset:
    - my_component

您也可以在那里扩展您的组件

multiple_components:
  type: components
  tabs:
    my_component/my_subcomponent:
      position: after
      label: Injected tab
      fields:
        existing_field:
          label: Another Label
        new_field:
          type: text
  fieldset:
    - my_component

许可

这是Kirby Components插件免费试用版本，允许您用于测试目的。如果您想在一个网站上使用此插件或打算用于商业用途，您必须购买许可证。

需要许可证的用户包括但不限于希望使用插件获得收入的人，例如电子商务网站、联盟营销网站和需要付费才能访问内容的网站。许可证不可转让，且不能与其他用户或网站共享。

通过下载和使用此插件，您同意遵守许可证协议的条款和条件。未能遵守许可证协议的条款可能导致您的许可证被撤销并采取法律行动。

要购买许可证或了解我们的许可选项，请访问我们的网站或通过联系邮箱联系我们。感谢您对Kirby Components插件的关注！