使用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?

问题描述

有人告诉我，使用新的fluid_styled_content系统扩展为TYPO3 7.5中的后端设置自定义结构化内容元素很容易.

I have been told it is a breeze to set up custom, structured content elements for the Backend in TYPO3 7.5, using the new fluid_styled_content system extension.

看了sysext/fluid_styled_content和sysext/backend之后，我自己弄不清楚了.有提示吗?

After looking at at sysext/fluid_styled_content and sysext/backend, I couldn't figure it out myself. Any hints?

推荐答案

信息来源: Github上的fluid_styled_slider

这些信息也可以在这里找到: usetypo3博客

These information are also available here: usetypo3 blog

官方文档也在线.

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

To make our content element appear in the wizard for new content elements, we have to add it via 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中完成):

TCA

Now we need to tell TYPO3 what fields to show in the backend. Therefore we have to extend the tt_content TCA configuration. This stuff is now done in the folder Configuration/TCA/Overrides/. Let's add our new CType first (this could also be done in 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显示哪些字段:

Now we determine what fields to show for our 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
        '
];

TypoScript

新的CType fs_slider需要渲染定义.这很简单:

TypoScript

The new CType fs_slider needs a rendering definition. This is rather simple:

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只不过是FLUIDCONTENT对象的初始化而已.我们只是更改模板名称 (确保至少将模板路径添加到lib.fluidContent.templateRootPaths) 并指定我们要使用的dataProcessor.哦，对，dataProcessors.

The lib.fluidContent is not much more than the initialization of a FLUIDCONTENT object. We just change the template name (make sure to at least add your template path to lib.fluidContent.templateRootPaths) and specify which dataProcessors we are gonna use. Oh right, dataProcessors.

那些是PHP类，它们在将数据传递到FluidTemplate之前获取数据.他们可以操纵数据或向其中添加内容 出现在模板中. TYPO3\CMS\Frontend\DataProcessing\FilesProcessor 例如，为我们解决了所有附加的媒体元素，因此我们可以访问视图中的FileReference对象. DanielGoerz\FluidStyledSlider\DataProcessing\FluidStyledSliderProcessor是一个自定义处理器，用于说明其工作原理.

Those are PHP classes that get the data before it is passed to the fluidtemplate. They can manipulate the data or add stuff to be present in the template. The TYPO3\CMS\Frontend\DataProcessing\FilesProcessor for instance resolves all attached media elements for us, so we can access the FileReference objects in the view. DanielGoerz\FluidStyledSlider\DataProcessing\FluidStyledSliderProcessor is a custom processor to illustrate how this works.

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是可选的.

However, DataProcessors are optional.

难题中的最后一块是实际的模板，该模板最终接收所有指定的DataProcessor处理的数据. 正如我们所知道(和喜欢)的那样，这是普通的流体:

The last piece in the puzzle is the actual template that receives the data processed by all specified DataProcessors in the end. This is plain fluid as we know (and love) it:

<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添加并包含附加的介质 作为适当的对象. {slider.width}由我们自己的DataProcessor添加.

Of course we can use Layouts and Partials here as well. Note how {data} contains the tt_content row from the rendered content element. {files} is added by the TYPO3\CMS\Frontend\DataProcessing\FilesProcessor and contains the attached media as proper objects. {slider.width} is added by our own DataProcessor.

我们可能需要页面模块中的编辑器预览.有两种显着的方法可以实现此目的:

We probably want some kind of preview for our editors in the page module. There are two notable possibilities to achieve this:

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

We can simply specify a fluid template to be rendered as preview in PageTSconfig:

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

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

This template will receive all fields of the tt_content row directly. So {header} contains the header, {bodytext} contains the bodytext and so on.

如果我们想做更复杂的事情，例如解决子记录，我们可以注册到tt_content_drawItem钩子 像这样:

If we want to do more sophisticated stuff like getting child records resolved, we can register to the tt_content_drawItem hook like this:

$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['cms/layout/class.tx_cms_layout.php']['tt_content_drawItem']['fluid_styled_slider']
    = \DanielGoerz\FluidStyledSlider\Hooks\FsSliderPreviewRenderer::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的内容如何，​​都将在内容元素内的页面模块中呈现.

Whatever we write into $itemContent will be rendered in the page module inside our content element.

这篇关于使用fluid_styled_content，如何在TYPO3 7.5和7 LTS中创建自定义内容元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！