0

我想集成一个自定义内容滑块。因此我已经阅读了文档：http ://docs.typo3.org/neos/TYPO3NeosDocumentation/IntegratorsCookbook/IntegratingJavaScriptSlider.html

我认为这应该呈现幻灯片数组：

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

我现在的问题是如何渲染简单的幻灯片。Slide 可以包含任何 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()

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

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

4

1 回答 1

1

编辑 2

这可以解决您的问题吗？

第 1 步：更新Page节点类型Vendor.Site/Configuration/NodeTypes.yaml

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

第 2 步：更新中的打字稿模板body部分PageVendor.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 class="span6">在你的容器中有额外的 div（比如），你可以扩展你想要使用的节点类型来拥有一个额外的字段/变量，并在 html 中使用该变量作为{class}.

于 2013-12-28T12:03:46.493 回答