Hugo循环渲染中如何为首元素后项修改HTML类与轮播属性

直接利用 Hugo 模板range循环自带的索引变量判断当前轮播项位置即可，不需要复杂的后置DOM操作，模板渲染阶段就能直接输出正确结构：

• 外层循环接收迭代索引，索引值为0时就是首个幻灯片
• 首个幻灯片的carousel-item节点追加active类，单独配置data-bs-interval值
• 其余索引对应的幻灯片节点不输出active类，使用统一的普通轮播间隔属性

修改后的可直接复用的模板代码如下：

{{ range $slideIdx, $startPos := seq 1 3 (len site.Data.reviews) }}
  {{/* 按当前轮播顺序拼接class和属性 */}}
  <div 
    class="carousel-item {{ if eq $slideIdx 0 }}active{{ end }}"
    {{ if eq $slideIdx 0 }}
      data-bs-interval="5000"
    {{ else }}
      data-bs-interval="3000"
    {{ end }}
  >
    <div class="row g-4">
      {{ range seq $startPos (add $startPos 2) }}
        {{ with (index site.Data.reviews (string .)) }}
          <div class="col-md-4">
            <div class="card h-100 p-3">
              {{ .des }}
            </div>
          </div>
        {{ end }}
      {{ end }}
    </div>
  </div>
{{ end }}

补充说明：如果你的评价总条数不是3的整数倍，内层循环的with判断会自动跳过不存在的评价条目，不会渲染空结构，不需要额外写边界判断逻辑。如果需要调整轮播间隔，直接修改对应data-bs-interval的数值即可，单位是毫秒。
如果想要统一管理轮播参数，可以把间隔值写到站点配置文件的参数块里，模板里通过.Site.Params.xxx读取，不用每次调整都修改模板文件。

内容的提问来源于stack exchange，提问作者Riokei