TYPO3 >=11：自定义内容元素后端预览如何用FLUID/Extbase实现

可以通过自定义预览数据提供者（PreviewDataProvider）结合Fluid渲染器，复用前端的Extbase模型与逻辑，实现类似前端的自动数据处理，无需手动编写QueryBuilder。具体步骤如下：

1. 创建Extbase-aware的预览数据提供者 #

自定义数据提供者类，注入对应内容元素的Extbase仓库，直接用仓库方法获取模型数据，替代官方的手动数据库查询：

<?php
namespace Vendor\YourExtension\Backend\Preview;

use TYPO3\CMS\Backend\Preview\PreviewDataProviderInterface;
use Vendor\YourExtension\Domain\Repository\CustomContentRepository;
use Vendor\YourExtension\Domain\Model\CustomContent;
use TYPO3\CMS\Core\Utility\GeneralUtility;

class CustomContentPreviewDataProvider implements PreviewDataProviderInterface
{
    protected CustomContentRepository $contentRepository;

    public function __construct()
    {
        // 注入Extbase仓库（TYPO3 11+也可通过构造注入实现依赖注入）
        $this->contentRepository = GeneralUtility::makeInstance(CustomContentRepository::class);
    }

    public function getPreviewData(array $row): array
    {
        // 用Extbase仓库获取内容元素模型
        /** @var CustomContent $contentModel */
        $contentModel = $this->contentRepository->findByUid($row['uid']);
        
        // 返回模型或拆解后的字段，供Fluid模板使用
        return [
            'content' => $contentModel,
            'headline' => $contentModel->getHeadline(),
            'bodytext' => $contentModel->getBodytext()
        ];
    }
}

2. 注册后端预览配置 #

在ext_localconf.php中注册数据提供者与Fluid渲染器，指定模板路径：

// 注册自定义内容元素的后端预览
$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['cms/layout/class.tx_cms_layout.php']['tt_content_drawItem']['your_custom_content_type'] = [
    'renderer' => \TYPO3\CMS\Backend\Preview\FluidPreviewRenderer::class,
    'dataProvider' => \Vendor\YourExtension\Backend\Preview\CustomContentPreviewDataProvider::class,
    'options' => [
        'templateRootPaths' => [
            10 => 'EXT:your_extension/Resources/Private/Templates/Backend/Preview/',
        ],
        'templateName' => 'CustomContent',
    ],
];

3. 编写Fluid预览模板 #

在指定路径下创建Fluid模板，直接使用Extbase模型的属性，和前端模板写法一致：

<!-- EXT:your_extension/Resources/Private/Templates/Backend/Preview/CustomContent.html -->
<div class="custom-content-preview">
    <h4 class="t3-preview-header">{content.headline}</h4>
    <div class="t3-preview-body">
        <f:if condition="{content.bodytext}">
            <p>{content.bodytext -> f:format.crop(maxCharacters: 150)}</p>
        </f:if>
        <f:if condition="{content.image}">
            <img src="{f:uri.image(image: content.image, maxWidth: 250)}" 
                 alt="{content.image.alternative}" 
                 class="t3-preview-image" />
        </f:if>
    </div>
</div>

关键优势 #

• 复用前端的Extbase模型、仓库逻辑，无需重复编写数据查询与字段映射
• 用Fluid统一前后端模板风格，降低维护成本
• 自动继承Extbase的字段处理（如关系型数据、文件对象的封装）

内容的提问来源于stack exchange，提问作者Chris