编辑2

Question

我想整合自定义内容滑块。因此，我已阅读文档：http://docs.typo3.org/neos/TYPO3NeosDocumentation/IntegratorsCookbook/IntegratingJavaScriptSlider.html

我认为这应该渲染幻灯片数组：

<!-- Wrapper for slides -->
{carouselItems -> f:format.raw()}

我现在的问题是如何渲染一张简单的幻灯片。幻灯片可以包含任何NodeType。在示例中，仅渲染图像。但我需要访问任何NodeType。

Html（Sites / Vendor.Site / Private / Templates / TypoScriptObjects / CarouselItem.html）

{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace media=TYPO3\Media\ViewHelpers}
<div{attributes -> f:format.raw()}>
    <f:if condition="{image}">
            <f:then>
                    <media:image image="{image}" alt="{alternativeText}" title="{title}" maximumWidth="{maximumWidth}" maximumHeight="{maximumHeight}" />
            </f:then>
            <f:else>
                    <img src="{f:uri.resource(package: 'TYPO3.Neos', path: 'Images/dummy-image.png')}" title="Dummy image" alt="Dummy image" />
            </f:else>
    </f:if>
    <div class="carousel-caption">
            <f:if condition="{hasCaption}">
                    {neos:contentElement.editable(property: 'caption')}
            </f:if>
    </div>
</div>

修改

我的内容滑块具有以下DOM结构： jkslide div中的所有内容都与滑块无关。

<div class="jkslider">
    <div class="jkslide">
        <p>The first slide element could be an image with a header underneath</p>
        <img src="layout/wallpaper-1-1600-900.jpg">
        <h2>Wallpaper 1, Width: 1600, Height: 900</h2>
    </div>
    <div class="jkslide">
        <div class="row">
            <div class="span6>
                <p>First column text</p>
            </div>
            <div class="span6>
                <p>Second column text</p>
            </div>
        </div>
    </div>
    <div class="jkslide fade">
        Some Text<br>
        <div class="someclass2">
            <div class="somelcass3">
                  Text
            </div>
        </div>
    </div>
</div>

一个幻灯片项应该以这种方式呈现：一个幻灯片项目也应该是我认为的内容集合！？！？

<div class="jkslide">
    Here i want to print the raw node type / content collection? 
</div>

使用该代码我将获得幻灯片项目。

sliderItemArray = ${q(node).children('sliderItems').children()

所以现在我需要展示这些孩子。但请记住，孩子可以是从图像到普通文本或两列元素的任何东西。

希望我现在更好地解释了我的问题。

Answer 1

编辑2

这可以解决您的问题吗？

第1步：更新Page

中的Vendor.Site/Configuration/NodeTypes.yaml nodetype

'TYPO3.Neos.NodeTypes:Page':
  childNodes:
    firstContainer:
      type: 'TYPO3.Neos:ContentCollection'
    secondContainer:
      type: 'TYPO3.Neos:ContentCollection'
    thirdContainer:
      type: 'TYPO3.Neos:ContentCollection'

第2步：更新body

中Page个错误标题模板的Vendor.Site/Resources/Private/TypoScripts/Library/Root.ts2部分

content {
    firstContainer = ContentCollection {
        nodePath = 'firstContainer'
    }
    secondContainer = ContentCollection {
        nodePath = 'secondContainer'
    }
    thirdContainer = ContentCollection {
        nodePath = 'thirdContainer'
    }
}

第3步：通过在您想要的div类中添加容器来更新模板文件

<div class="jkslider">
    <div class="jkslide">
        {content.firstContainer -> f:format.raw()}
    </div>
    <div class="jkslide">
        <div class="row">
            {content.secondContainer -> f:format.raw()}
        </div>
    </div>
    <div class="jkslide fade">
        {content.thirdContainer -> f:format.raw()}
    </div>
</div>

第4步：使用./flow node:autocreatechildnodes --node-type TYPO3.Neos.NodeTypes:Page

如果你想在你的容器中有额外的div（比如<div class="span6">）你可以扩展你想要使用的节点类型以获得额外的字段/变量，并将html中的那个变量用作{{1} }。

Typo3 Neos：如何构建自定义内容滑块？

修改

1 个答案:

编辑2