Typo3 Neos: Как создать собственный слайдер контента?

Question

Я хочу интегрировать пользовательский слайдер контента. Поэтому я прочитал документацию: http://docs.typo3.org/neos/TYPO3NeosDocumentation/IntegratorsCookbook/IntegratingJavaScriptSlider.html

Я думаю, что это должно сделать массив слайдов:

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

Мой вопрос сейчас, как я могу сделать простой слайд. Слайд может содержать любые NodeTypes. В примере представлены только изображения. Но мне нужно получить доступ к любому NodeType.

HTML (Сайты /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: каждая вещь в div jkslide не имеет ничего общего со слайдером.

<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

'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 как {class},