十月 CMS |用 'show more' 创建一个投资组合，但在 twig 上苦苦挣扎

Question

我想实现的是，当项目超过6个时，剩余的项目自动进入'show more'部分。

{% 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

您可以制作两个循环并使用 slicing techniques:

{% 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}

或者您可以使用 loop variables 和 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}

十月 CMS |用 'show more' 创建一个投资组合，但在 twig 上苦苦挣扎

October CMS | Creating a portfolio with 'show more' but struggling with twig

html

twig

octobercms