在行之间进行模板交替设计

Question

我有一个获取博客文章列表的简单模板：

<div class="row">
    <div class="cell">
        {{range .Pages}}

        <p class="dialogue dialogue--wide">
            <a href="{{.Slug}}">{{.Title}} </a>
        </p>

        {{end}}
        <br />
        <br />
        <br />
    </div>
</div>

我想在帖子之间交替设计，例如第一个将使用某个

class like

和第二条记录（如果您愿意，也可以是偶数和奇数记录）另一个 p。

谢谢！

Answer 1

我建议用 CSS 来解决这个问题，这样可以省去一些麻烦。您可以在 nth-child:

中使用 odd 或 even

.dalogue:nth-child(odd) {
    // CSS Property   
}

或者，您可以使用项目的索引。下面，我使用 modulo 运算符来确定它是奇数还是偶数。

{{ range $index, $page := .Pages }}
 {{ if eq (mod $index 2) 0 }} odd {{ else }} even {{ end }}
{{end}}

注意，我正在切换奇数和偶数。因为索引从 0 而不是 1 开始。但是当查看 table 时，您从 1 开始计数，这也是 CSS 的行为方式。

我已经使用 template.Funcs 实现了 mod 功能。

t.Funcs(map[string]any{"mod": func(a, b int) int { return a % b }})

https://go.dev/play/p/aAupH-4CugV

在行之间进行模板交替设计

go template alternating design between rows

go