如何在Go的html/template中通过条件控制Bootstrap滑块的显示与隐藏？

一、滑块显隐控制逻辑 #

在模板中通过判断图片切片的长度，包裹整个滑块容器，实现数量为0时隐藏滑块：

{{if gt (len .Offers.SliderImages) 0}}
<!-- 完整Bootstrap滑块结构 -->
<div id="carouselExampleIndicators" class="carousel slide">
  <!-- 指示器、幻灯片、控制按钮等内容 -->
</div>
{{end}}

二、无需range的动态渲染实现 #

因为最多只需要渲染5张图片，直接通过索引逐个判断对应位置的图片是否存在，结合with条件渲染对应项：

{{if gt (len .Offers.SliderImages) 0}}
<div id="carouselExampleIndicators" class="carousel slide">
  <!-- 指示器部分 -->
  <div class="carousel-indicators">
    {{if index .Offers.SliderImages 0}}
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    {{end}}
    {{if index .Offers.SliderImages 1}}
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    {{end}}
    {{if index .Offers.SliderImages 2}}
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
    {{end}}
    {{if index .Offers.SliderImages 3}}
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
    {{end}}
    {{if index .Offers.SliderImages 4}}
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 5"></button>
    {{end}}
  </div>

  <!-- 幻灯片内容 -->
  <div class="carousel-inner">
    {{with index .Offers.SliderImages 0}}
    <div class="carousel-item active">
      <img src="/static/images/{{.}}" class="d-block w-100" alt="Slide 1">
    </div>
    {{end}}
    {{with index .Offers.SliderImages 1}}
    <div class="carousel-item">
      <img src="/static/images/{{.}}" class="d-block w-100" alt="Slide 2">
    </div>
    {{end}}
    {{with index .Offers.SliderImages 2}}
    <div class="carousel-item">
      <img src="/static/images/{{.}}" class="d-block w-100" alt="Slide 3">
    </div>
    {{end}}
    {{with index .Offers.SliderImages 3}}
    <div class="carousel-item">
      <img src="/static/images/{{.}}" class="d-block w-100" alt="Slide 4">
    </div>
    {{end}}
    {{with index .Offers.SliderImages 4}}
    <div class="carousel-item">
      <img src="/static/images/{{.}}" class="d-block w-100" alt="Slide 5">
    </div>
    {{end}}
  </div>

  <!-- 控制按钮 -->
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
{{end}}

注：with会自动判断索引对应的元素是否存在，不存在则跳过内部HTML渲染；如果用if，可以搭配lt判断索引是否在切片长度范围内，效果一致。

三、后端数据处理优化 #

确保Offers结构体中的SliderImages为字符串切片，查询数据库时最多取5条数据填充：

type Offers struct {
    // 其他业务字段
    SliderImages []string
}

// 数据库查询逻辑示例
func getOffers() (Offers, error) {
    var offers Offers
    rows, err := db.Query("SELECT image_name FROM slider_images LIMIT 5")
    if err != nil {
        return offers, err
    }
    defer rows.Close()

    var imgNames []string
    for rows.Next() {
        var name string
        if err := rows.Scan(&name); err != nil {
            continue
        }
        imgNames = append(imgNames, name)
    }
    offers.SliderImages = imgNames
    return offers, nil
}

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