十月内容管理系统 |创建具有'show more'但与树枝作斗争的投资组合

Question

我想要实现的是，当项目超过6个时，剩余的项目会自动进入"显示更多"部分。

{% for item in portfolioItems %}
<div class="col-md-4">
<img src="{{ item.portfolioItemsImage |media }}" alt="">
<h5>{{item.portfolioItemsTitle}}</h5>
</div>
After 6 items have been displayed above the rest of the items should be shown below.
<!-- HIDDEN -->
<div id="showmore" class="collapse">
<img src="{{item.portfolioItemsImage|media}}" alt="">
<h5>{{item.portfolioItemsTitle}}</h5>
</div>
{% endfor %}
<button class="btn btn-primary" data-toggle="collapse" data-target="#showmore">Show More</button>

Answer 1

您可以制作两个循环并使用切片技术：

{% for item in portfolioItems[:6] %}
<div class="col-md-4">
<img src="{{ item.portfolioItemsImage|media }}" alt="">
<h5>{{ item.portfolioItemsTitle }}</h5>
</div>
{% endfor %}
{% for item in portfolioItems[6:] %}
<!-- HIDDEN -->
<div id="showmore" class="collapse">
<img src="{{ item.portfolioItemsImage|media }}" alt="">
<h5>{{ item.portfolioItemsTitle }}</h5>
</div>
{% endfor %}

^{这里的简单演示：https://twigfiddle.com/6olcw2}

---

或者您可以将循环变量与if/else一起使用

{% for item in portfolioItems %}
{% if loop.index <= 6 %}
<div class="col-md-4">
<img src="{{ item.portfolioItemsImage|media }}" alt="">
<h5>{{ item.portfolioItemsTitle }}</h5>
</div>
{% else %}
<!-- HIDDEN -->
<div id="showmore" class="collapse">
<img src="{{ item.portfolioItemsImage|media }}" alt="">
<h5>{{ item.portfolioItemsTitle }}</h5>
</div>
{% endif %}
{% endfor %}

^{这里的简单演示：https://twigfiddle.com/6olcw2/2}