在HTML列表中使用分组字段时，是否有方法确定呈现的当前内容的组/循环号？

Question

我希望能够确定当前正在处理的组号，这样我就可以将第一个组的输出与后续组的输出区别对待。

与行不同，我看不到通过视图找到组或循环当前计数的方法，例如，我可以执行如下操作(即按组迭代对组内容进行分类)-

<div class="item-list">
  <h3 class="group-1">{{ title }}</h3>
  <ul class="group-1">
    {% for row in rows %}
      <li{{ row.attributes }}>
        {{- row.content -}}
      </li>
    {% endfor %}
  </ul>
</div>
<div class="item-list">
  <h3 class="group-2">{{ title }}</h3>
  <ul class="group-2">
    {% for row in rows %}
      <li{{ row.attributes }}>
        {{- row.content -}}
      </li>
    {% endfor %}
  </ul>
</div>
...
<div class="item-list">
  <h3 class="group-n">{{ title }}</h3>
  <ul class="group-n">
    {% for row in rows %}
      <li{{ row.attributes }}>
        {{- row.content -}}
      </li>
    {% endfor %}
  </ul>
</div>

Answer 1

我不知道从分组模板(例如views-view-list)中获取组号的方法，但是我希望在两个模板之间进行分割：views-view和views-view-list。

首先，在views-view模板中，例如views-view--my-view-id.html.twig。

{# ... etc ... #}
{# Loop through the rows, aka groups, and add a wrapper with index identifier. #} 
{% for row in rows %}
  <div class="item-list group--{{ loop.index }}">
    {{ row }}
  </div>
{% endfor %}
{# ... etc ... #}

其次，创建views-view-list模板，例如为每个组构建内容的views-view--my-view-id.html.twig：

<h3>{{ title }}</h3>
<ul>
  {% for row in rows %}
  <li{{ row.attributes }}>
      {{- row.content -}}
    </li>
  {% endfor %}
</ul>

然后，您可以针对css中每个组的内容，例如：

.group--1 h3 { }
.group--1 ul { }
.group--2 h3 { }
.group--2 ul { }
.etc { }