README

如果激活此插件，则需要所有 Kirby 模板使用基于 Teein/Html 虚拟DOM的模板引擎。

安装

composer require diesdasdigital/kirby-3-teein

基本使用

安装后，所有 Kirby 模板都需要显式返回一个 Teein/HTML 元素。

<?php

use function Teein\Html\Elements\div;
use function Teein\Html\Text\text;

return div()(
  text('Hello, World!')
);

添加自己的组件

您可以添加自己的组件，这些组件输出 Teein/Html 元素。

首先，命名并保存您的组件 PHP 文件。我们将使用示例 grid.php。

其次，在组件文件顶部添加一个命名空间。例如，这可以是项目名称。在示例 grid.php 文件中，我们将使用 namespace Test\Components。

<?php

namespace Test\Components;

第三，在组件文件中，使用 use 关键字导入相关的 Teein/Html 函数并输出它们。

<?php

namespace Test\Components;

use function Teein\Html\Text\text;
use function Teein\Html\Elements\div;
use function Teein\Html\Attributes\class_;

function grid(array $children)
{
  return div(class_("grid"))(
    div(class_("grid__column"))(
      ...array_map(function ($child) {
        return $child;
      }, $children)
    ));
}

为了在其他文件中引用此组件，您需要将文件路径添加到 composer.json 文件中的 autoload files。

"autoload": {
  "files": [
    "site/templates/components/grid.php"
  ]
}

接下来，运行 composer dump-autoload 使组件在其他文件中可用。

现在，您可以在其他模板中引用此组件。

<?php

use function Test\Components\grid;
use function Teein\Html\Elements\div;
use function Teein\Html\Text\text;

return div()(
    grid([
        div()(text('Column')),
        div()(text('Column')),
        div()(text('Column'))
    ])
);

由 diesdas.digital 创建

diesdasdigital / kirby-3-teein

维护者

详细信息

README

安装

基本使用

添加自己的组件