使用 fluid_styled_content，如何在 TYPO3 7.5 和 7 LTS 中创建自定义内容元素？

Question

我听说在 TYPO3 7.5 中使用新的 fluid_styled_content 系统扩展为后端设置自定义的结构化内容元素是轻而易举的事。

看了sysext/fluid_styled_content和sysext/backend，我自己也想不通。有什么提示吗？

Answer 1

信息来源：fluid_styled_slider on Github

这些信息也可以在这里找到：usetypo3 blog

official docs也在线。

PageTSconfig

要使我们的内容元素出现在新内容元素的向导中，我们必须通过 PageTSconfig 添加它

mod.wizards.newContentElement.wizardItems.common {
    elements {
        fs_slider {
            iconIdentifier = content-image
            title = LLL:EXT:fluid_styled_slider/Resources/Private/Language/locallang_be.xlf:wizard.title
            description = LLL:EXT:fluid_styled_slider/Resources/Private/Language/locallang_be.xlf:wizard.description
            tt_content_defValues {
                CType = fs_slider
            }
        }
    }
    show := addToList(fs_slider)
}

TCA

现在我们需要告诉 TYPO3 在后台显示哪些字段。因此我们必须扩展 tt_content TCA 配置。这些东西现在在文件夹 Configuration/TCA/Overrides/ 中完成。让我们先添加新的 CType（这也可以在 ext_tables.php 中完成）：

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem(
    'tt_content',
    'CType',
    [
        'LLL:EXT:fluid_styled_slider/Resources/Private/Language/locallang_be.xlf:wizard.title',
        'fs_slider',
        'content-image'
    ],
    'textmedia',
    'after'
);

现在我们确定要为我们的 CType 显示哪些字段：

$GLOBALS['TCA']['tt_content']['types']['fs_slider'] = [
    'showitem' => '
        --palette--;' . $frontendLanguageFilePrefix . 'palette.general;general,
        --palette--;' . $languageFilePrefix . 'tt_content.palette.mediaAdjustments;mediaAdjustments,
        pi_flexform,
        --div--;' . $customLanguageFilePrefix . 'tca.tab.sliderElements,
        media
        '
];

打字稿

新的 CType fs_slider 需要渲染定义。这很简单：

tt_content {
    fs_slider < lib.fluidContent
    fs_slider {
        templateName = FluidStyledSlider
        dataProcessing {
            10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
            10 {
                references.fieldName = media
            }
            20 = DanielGoerz\FluidStyledSlider\DataProcessing\FluidStyledSliderProcessor
        }
    }
}

这个lib.fluidContent不比初始化一个FLUIDCONTENTobject差多少。我们只是更改模板名称（确保至少将模板路径添加到 lib.fluidContent.templateRootPaths）并指定我们要使用的数据处理器。哦对了，数据处理器。

数据处理器

这些是 PHP class 在将数据传递到流体模板之前获取数据的元素。他们可以操纵数据或添加东西存在于模板中。 TYPO3\CMS\Frontend\DataProcessing\FilesProcessor 例如为我们解析所有附加的媒体元素，因此我们可以访问视图中的 FileReference objects。 DanielGoerz\FluidStyledSlider\DataProcessing\FluidStyledSliderProcessor 是一个自定义处理器，用于说明其工作原理。

class FluidStyledSliderProcessor implements DataProcessorInterface
{
    /**
     * Process data for the CType "fs_slider"
     *
     * @param ContentObjectRenderer $cObj The content object renderer, which contains data of the content element
     * @param array $contentObjectConfiguration The configuration of Content Object
     * @param array $processorConfiguration The configuration of this processor
     * @param array $processedData Key/value store of processed data (e.g. to be passed to a Fluid View)
     * @return array the processed data as key/value store
     * @throws ContentRenderingException
     */
    public function process(ContentObjectRenderer $cObj, array $contentObjectConfiguration, array $processorConfiguration, array $processedData)
    {
        // Content of $processedData will be available in the template
        // It can be processed here to your needs.
        $processedData['slider']['width'] = 1000;
        return $processedData;
    }

但是，数据处理器是可选的。

流体模板

拼图中的最后一块是最终接收所有指定DataProcessor 处理的数据的实际模板。正如我们所知（和喜爱）它，这是普通的流体：

<html xmlns:f="http://xsd.helhum.io/ns/typo3/cms-fluid/master/ViewHelpers">
    <div class="fluid-styled-slider" style="width: {slider.width}px; margin: auto">
        <f:for each="{files}" as="file">
            <figure class="fluid-styled-slider-item">
                <f:image image="{file}" height="{data.imageheight}" width="{data.imagewidth}" alt="{file.properties.alt}" title="{file.properties.title}"/>
                <f:if condition="{file.properties.description}">
                    <figcaption>{file.properties.description}</figcaption>
                </f:if>
            </figure>
        </f:for>
    </div>
</html>

当然我们也可以在这里使用Layouts和Partials。请注意 {data} 如何包含呈现的 tt_content 行内容元素。 {files} 由 TYPO3\CMS\Frontend\DataProcessing\FilesProcessor 添加并包含附加媒体作为适当的 objects。 {slider.width}由我们自己的DataProcessor添加。

可选：在页面模块中预览

我们可能希望在页面模块中为我们的编辑器提供某种预览。有两种显着的可能性可以实现这一目标：

通过 PageTSconfig 的流体模板

我们可以简单地在 PageTSconfig 中指定要呈现为预览的流体模板：

web_layout.tt_content.preview.fs_slider = EXT:fluid_styled_slider/Resources/Private/Templates/Preview/FluidStyledSlider.html

此模板将直接接收 tt_content 行的所有字段。所以 {header} 包含 header，{bodytext} 包含正文等等。

tt_content_drawItem 钩子

如果我们想做更复杂的事情，比如解析 child 记录，我们可以注册到 tt_content_drawItem 挂钩像这样：

$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['cms/layout/class.tx_cms_layout.php']['tt_content_drawItem']['fluid_styled_slider']
    = \DanielGoerz\FluidStyledSlider\Hooks\FsSliderPreviewRenderer::class;

我们的 class 必须实施 \TYPO3\CMS\Backend\View\PageLayoutViewDrawItemHookInterface。

class FsSliderPreviewRenderer implements PageLayoutViewDrawItemHookInterface
{
    /**
     * Preprocesses the preview rendering of a content element of type "fs_slider"
     *
     * @param \TYPO3\CMS\Backend\View\PageLayoutView $parentObject Calling parent object
     * @param bool $drawItem Whether to draw the item using the default functionality
     * @param string $headerContent Header content
     * @param string $itemContent Item content
     * @param array $row Record row of tt_content
     * @return void
     */
    public function preProcess(PageLayoutView &$parentObject, &$drawItem, &$headerContent, &$itemContent, array &$row)
    {
        if ($row['CType'] === 'fs_slider') {
            if ($row['media']) {
                $itemContent .= '<h3>Fluid Styled Slider</h3>';
                $itemContent .= $parentObject->thumbCode($row, 'tt_content', 'media') . '<br />';
            }
            $drawItem = false;
        }
    }
}

我们写入 $itemContent 的任何内容都将呈现在内容元素内的页面模块中。

使用 fluid_styled_content，如何在 TYPO3 7.5 和 7 LTS 中创建自定义内容元素？

With fluid_styled_content, how to create custom content elements in TYPO3 7.5 and 7 LTS?

typo3

typo3-7.x

fluid-styled-content

PageTSconfig

TCA

打字稿

数据处理器

流体模板

可选：在页面模块中预览