使用fluid_styled_content，如何在TYPO3 7.5和7 LTS中创建自定义内容元素？
有人告诉我，使用新的fluid_styled_content系统扩展，在TYPO3 7.5中为后端设置自定义的结构化内容元素轻而易举。
在看了sysext/fluid_styled_content和sysext/backend之后，我自己也搞不懂。有什么提示吗？
回答 1
Stack Overflow用户
发布于 2015-10-10 23:54:30
信息来源：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
'
];TypoScript
新的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
}
}
}与FLUIDCONTENT对象的初始化相比，lib.fluidContent并不重要。我们只需更改模板名称(确保至少将模板路径添加到lib.fluidContent.templateRootPaths)，并指定要使用的dataProcessors。哦对了，dataProcessors。
DataProcessors
这些都是PHP类，在将数据传递给fluidtemplate之前获取数据。他们可以操作数据或添加要出现在模板中的内容。例如，TYPO3\CMS\Frontend\DataProcessing\FilesProcessor为我们解析所有附加的媒体元素，因此我们可以访问视图中的FileReference对象。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;
}但是，DataProcessors是可选的。
流体模板
拼图中的最后一部分是实际的模板，它最终接收由所有指定的DataProcessors处理的数据。正如我们所知道的(和喜爱的)，这是非常流畅的：
<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>当然，我们也可以在这里使用Layout和Partials。请注意，{data}如何包含来自呈现的内容元素的tt_content行。{files}由TYPO3\CMS\Frontend\DataProcessing\FilesProcessor添加，并包含作为正确对象的附加介质。我们自己的DataProcessor添加了{slider.width}。
可选:在页面模块中预览
我们可能需要在页面模块中为编辑器提供某种形式的预览。有两种值得注意的可能性来实现这一点：
通过PageTSconfig的流体模板
我们可以简单地指定一个要在PageTSconfig中渲染为预览的流体模板：
web_layout.tt_content.preview.fs_slider = EXT:fluid_styled_slider/Resources/Private/Templates/Preview/FluidStyledSlider.html此模板将直接接收tt_content行的所有字段。所以{header}包含头部，{bodytext}包含正文，依此类推。
tt_content_drawItem挂钩
如果我们想做更复杂的事情，比如解析子记录，我们可以像这样注册到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;我们的类必须实现\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的任何内容都将呈现在内容元素内的页面模块中。
https://stackoverflow.com/questions/32993534
复制相似问题
腾讯云开发者
