Template Toolkit [% FOREACH %] ループを取得して、特定の範囲内のアイテムを分割して別の行にレンダリングしようとしています。
私がこれまでに持っているもの:
<ul>
<ul class="row-top">
[% FOREACH news IN newsfeeds %]
[% IF loop.index() < 3 %]
[% INCLUDE content_news/news_item.tt %]
[% END %]
[% END %]
</ul>
[% FOREACH news IN newsfeeds %]
[% IF loop.index() > 3 %]
[% INCLUDE content_news/news_item.tt %]
[% END %]
[% END %]
</ul>
これまでの出力(最初の行が正しい):
<ul>
<ul class="row-top">
<li class="item featured"></li>
<li class="item"></li>
<li class="item last"></li>
</ul>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
理想的な出力マークアップ:
<ul class="top-row">
<li class="item featured"></li>
<li class="item"></li>
<li class="item last"></li>
</ul>
<ul class="row">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item last"></li>
</ul>
<ul class="row">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item last"></li>
</ul>
<ul class="row">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item last"></li>
</ul>
状況:
リスト項目は高さが異なる場合があるため、左にフロートすることはできません。それらは異なる行にレンダリングする必要があります。foreach ループは、上記のマークアップに示されているように、タグを開いたり閉じたりする必要があります。
おすすめのアイテムはデフォルト アイテムの 2 倍の幅があるため (4 列のグリッドと考えてください)、最初の行 (.top-row) には 3 つのアイテムしかありません。
データは同じソースから来ているため、これらすべてを同じ foreach ループからレンダリングすることが望ましいです。
Template Toolkit でこれを実行することを意図していますが、アイデアの背後にあるロジックを示す方法があれば幸いです。
乾杯、W.