README

此包向您的TYPO3 TCA配置添加了新的表单元素预设，允许您向每个记录添加内容元素。它使用隐藏页面为您提供一个完整的页面布局GUI。

要求

• TYPO3 v10
• TYPO3 - 更好的API
• 使用Composer安装

已知问题

• 此扩展没有与工作空间一起测试，可能无法正确工作。
• 在创建内容元素之前，必须保存包含内容字段记录。这是因为否则我会创建很多孤立的页面。

安装

使用composer安装此包

composer require labor-digital/typo3-page-layout-form-element

使用方法

配置TCA

您应该了解如何使用Better API包创建TCA定义来使用此包。

之后，转到您的表配置类，并使用pageLayout()表单预设添加新字段

<?php

use LaborDigital\T3ba\ExtConfig\ExtConfigContext;
use LaborDigital\T3ba\ExtConfigHandler\Table\ConfigureTcaTableInterface;
use LaborDigital\T3ba\Tool\Tca\Builder\Type\Table\TcaTable;

class YourTable implements ConfigureTcaTableInterface
{
    /**
    * @inheritDoc
    */
    public static function configureTable(TcaTable $table, ExtConfigContext $context) : void{
         $type = $table->getType();
         $type->getField('content')->applyPreset()->pageLayout();
        
    }
}

添加内容元素

添加预设后，请确保清除缓存，更新您的SQL数据库并打开记录。如果您创建了新记录，请在继续之前至少保存记录一次。您可以使用“启用元素”按钮启用内容元素页面。这将自动在后台创建一个“隐藏”页面，并在同一位置渲染iframe中的预览。

扩展模型

要在前端使用内容元素，您可能需要从向您的记录模型添加新属性开始。

<?php

namespace LaborDigital\YourExt\Domain\Model;

use LaborDigital\T3plfe\Domain\Model\PageLayout;use TYPO3\CMS\Extbase\DomainObject\AbstractEntity;

class MagazineArticle extends AbstractEntity
{
    /**
     * This field will hold the entity for the page layout
     * @var \LaborDigital\T3plfe\Domain\Model\PageLayout
     */
    protected $content;

    /**
     * Return the page layout, MIND the "?", this could be null, if no page layout is enabled
     * @return PageLayout
     */
    public function getContent(): ?PageLayout
    {
        return $this->content;
    }
}

在FLUID中渲染内容（可选）

在扩展了您的模型后，您可以使用内置的视图助手在fluid中渲染内容元素。为此，请使用$view->assign('yourModel', $model);将您的模型实例传递到您的fluid视图中

然后像这样扩展您的模板

<!-- Render the content elements as HTML -->
<plfe:contentPage>{yourModel.content}</plfe:contentPage>

使用 前端API

页面布局表单元素内置了对前端API扩展的支持。您无需关心任何事情，只需创建您的模型资源，并确保在从API请求记录时将“?include=content”参数添加到您的查询中，然后您就设置好了。

要启用集成，请确保您的API配置注册了页面布局资源包。

<?php

use LaborDigital\T3ba\ExtConfig\SiteBased\SiteConfigContext;
use LaborDigital\T3fa\ExtConfigHandler\Api\ApiConfigurator;
use LaborDigital\T3fa\ExtConfigHandler\Api\BundleCollector;
use LaborDigital\T3fa\ExtConfigHandler\Api\ConfigureApiInterface;
use LaborDigital\T3fa\ExtConfigHandler\Api\Resource\ResourceCollector;
use LaborDigital\T3plfe\Api\Bundle\PageLayoutBundle;

class Api implements ConfigureApiInterface{
  public static function registerBundles(BundleCollector $collector) : void{
        // Now the api knows how to handle page layout elements
        $collector->register(PageLayoutBundle::class);
  }

  public static function registerResources(ResourceCollector $collector,SiteConfigContext $context) : void{ }
  public static function configureSite(ApiConfigurator $configurator,SiteConfigContext $context) : void{ }

}

使用 Vue Framework

由于正在开发新版本并基于nuxt构建，Vue框架现已弃用，此文档适用于此包的v9版本。

作为我们前端API包的官方框架，vue-framework也内置了对页面布局表单元素的支持。在添加了您的模型资源后，您可以通过初始状态查询或资源API加载您的记录。

然后您可以在Vue组件中像处理其他数据一样处理布局。假设您有一个内容元素控制器如下，它为单个元素定义了一个初始状态查询

<?php
use LaborDigital\Typo3FrontendApi\ContentElement\Controller\AbstractContentElementController;
use LaborDigital\Typo3FrontendApi\ContentElement\Controller\ContentElementControllerContext;

abstract class DummyContentElement extends AbstractContentElementController
{ 
    public function handle(ContentElementControllerContext $context): void
    {
        $context->setInitialStateQuery('myModel', [
            'id'      => $context->getRequest()->getQueryParams()['id'],
            'include' => ['content'],
        ]);
    }
}

现在您可以在Vue组件中执行以下操作来渲染内容元素列表

<template>
  <div>
    <!-- Use the content-element-children component to render your layout elements -->
    <content-element-children :children="context.initialState.get('content.children', [])"/>
  </div>
</template>

<script lang="ts">
import {ContentElementContext} from '@labor-digital/typo3-vue-framework/lib/Core/Context/ContentElementContext';

export default {
  name: 'Dummy',
  props: {
    // The context gets automatically injected
    context: null as ContentElementContext
  },
};
</script>

Postcardware

您可自由使用本软件包，但如果它进入了您的生产环境，我们非常感激您从家乡寄给我们一张明信片，注明您正在使用我们哪个软件包。

我们的地址是：LABOR.digital - Fischtorplatz 21 - 55116 Mainz, 德国

我们将所有收到的明信片发布在我们的公司网站上。