如何在循环输出列表项时交替应用不同的CSS类或样式？
在网站设计中，为了提升视觉美观度和用户体验，我们经常会遇到需要对列表项（如文章列表、产品列表、导航菜单等）交替应用不同CSS类或样式的情境。例如，让奇数行和偶数行背景色不同，或者每隔几项应用一种独特的布局样式。安企CMS（AnQiCMS）凭借其灵活的模板引擎，提供了多种简洁高效的方法来实现这一需求。
安企CMS采用类似Django模板引擎的语法，在循环处理数据时，我们可以轻松地利用内置的循环变量和标签来控制列表项的样式。核心在于利用循环过程中项的序号，通过条件判断或特定标签来分配不同的CSS类。
核心功能：for 循环与 forloop.Counter
在安企CMS的模板中，当我们使用 {% for item in items %} 这样的结构遍历列表数据时，模板引擎会自动提供一些特殊的循环变量，其中最常用且对样式交替至关重要的就是 forloop.Counter。
forloop.Counter 表示当前循环的序号，它从 1 开始递增。这意味着在循环的第一项，forloop.Counter 的值为 1；第二项为 2，以此类推。利用这个特性，我们便能实现各种复杂的样式交替逻辑。
方法一：利用 cycle 标签高效交替CSS类
cycle 标签是安企CMS模板中实现样式交替最直接、最优雅的方式之一。它可以在每次循环中按顺序输出预定义的字符串列表，当列表用尽时会自动循环回到第一个。这非常适合用于奇偶行样式或按固定模式循环多种样式。
实现奇偶行交替样式：
假设我们希望列表项的奇数行使用 odd-row 类，偶数行使用 even-row 类。
{# 假设 archives 是通过 {% archiveList archives ... %} 获取的文档列表 #}
<ul class="article-list">
{% for item in archives %}
<li class="{% cycle 'odd-row' 'even-row' %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
<p>{{ item.Description }}</p>
</li>
{% endfor %}
</ul>
对应的CSS样式可以这样定义：
.odd-row {
background-color: #f9f9f9;
border-left: 3px solid #007bff;
}
.even-row {
background-color: #ffffff;
border-left: 3px solid #6c757d;
}
实现多类（N种样式）循环：
如果我们需要循环应用三种或更多种不同的CSS类，cycle 标签同样适用。
<ul class="product-grid">
{% for item in products %}
<li class="product-item {% cycle 'style-one' 'style-two' 'style-three' %}">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
<h3>{{ item.Title }}</h3>
<p>价格: {{ item.Price }}</p>
</li>
{% endfor %}
</ul>
对应的CSS样式：
.product-item.style-one {
background-color: #e0ffe0;
border: 1px solid #28a745;
}
.product-item.style-two {
background-color: #e0e0ff;
border: 1px solid #007bff;
}
.product-item.style-three {
background-color: #fffde0;
border: 1px solid #ffc107;
}
方法二：使用 forloop.Counter 进行条件判断（奇偶样式）
虽然 cycle 标签更简洁，但有时我们可能需要基于明确的条件进行判断，尤其是在不只是简单循环交替，而是当某个条件成立时应用特定样式。最常见的场景是判断奇偶数。
<div class="category-items">
{% for item in categories %}
<div class="category-card {% if forloop.Counter % 2 == 1 %}is-odd{% else %}is-even{% endif %}">
<h4><a href="{{ item.Link }}">{{ item.Title }}</a></h4>
<p>{{ item.Description }}</p>
</div>
{% endfor %}
</div>
对应的CSS样式：
.category-card.is-odd {
background-color: #f0f8ff;
}
.category-card.is-even {
background-color: #f8f8f8;
}
方法三：基于 forloop.Counter 生成递增的定制类名
在某些设计中，我们可能需要为列表中的每一项生成一个基于其序号的独特类名，例如 item-1, item-2, item-3 等。这在需要针对特定位置的项进行精细控制时非常有用。
<ol class="ordered-list">
{% for item in navigation %}
<li class="list-item-{{ forloop.Counter }}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
</li>
{% endfor %}
</ol>
对应的CSS样式：
.ordered-list li {
padding: 10px;
margin-bottom: 5px;
}
.ordered-list .list-item-1 {
font-weight: bold;
color: #dc3545;
}
.ordered-list .list-item-3 {
border-bottom: 1px dashed #cccccc;
}
/* 甚至可以结合伪类实现更多效果 */
.ordered-list .list-item-{{ forloop.Counter }}:hover {
background-color: #e9ecef;
}
方法四：高级条件判断，实现更多样式的复杂循环
当交替逻辑不仅仅是简单的奇偶或循环几种固定样式，而是基于特定序号（例如每第3项、第5项有特殊样式）时，forloop.Counter 的条件判断能力便能发挥作用。
<div class="gallery">
{% for image in gallery_images %}
<div class="gallery-item
{% if forloop.Counter == 1 %}first-item{% endif %}
{% if forloop.Counter % 4 == 0 %}last-in-row{% endif %}
{% if forloop.Counter > 5 and forloop.Counter < 10 %}highlighted{% endif %}">
<img src="{{ image.src }}" alt="{{ image.alt }}">
<p>{{ image.caption }}</p>
</div>
{% endfor %}
</div>
对应的CSS样式可以这样定义：
.gallery-item {
float: left;
width: 24%; /* 假设每行4个 */
margin-right: 1%;
margin-bottom: 15px;
box-sizing: border-box;
border: 1px solid #eee;
}
.gallery-item.first-item {
background-color: #ffeb3b;
border-color: #ff9800;
}
.gallery-item.last-in-row {
margin-right: 0; /* 清除每行最后一个的右边距 */
}
.gallery-item.highlighted {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
实用技巧与建议
- 语义化类名： 尽量使用描述样式用途而非具体视觉效果的类名（例如
featured-item而