在网站设计与内容展示中，为了提升用户阅读体验，让信息呈现更为清晰，我们常常需要对表格或列表中的奇数行和偶数行施加不同的样式。这种视觉上的区分不仅能打破内容的单调感，更能显著提高数据的可读性。在AnQiCMS中，借助其灵活强大的模板引擎，实现这一效果是相当直接且便捷的。
核心理念：for循环与行计数器
AnQiCMS的模板系统采用了类似Django模板引擎的语法，这使得我们可以在循环遍历数据时，轻松获取当前循环的索引。实现奇偶行差异化样式的关键，就在于利用for循环中内置的forloop.Counter变量。
当我们使用如archiveList、categoryList、pageList等标签来获取数据列表，并通过{% for item in archives %}这样的结构进行循环时，forloop.Counter会自动记录当前循环的次数，并且它的计数是从1开始的。
有了这个计数器，我们就可以判断每一行是奇数行还是偶数行，进而为它们应用不同的样式。
实现奇偶行差异化样式
判断奇偶数最常用的方法是使用取余（Modulo）运算符 %。一个数除以2，如果余数是1，那么这个数就是奇数；如果余数是0，那么这个数就是偶数。
在AnQiCMS的模板中，我们可以这样运用：
- 当
forloop.Counter % 2 == 1时，表示当前是奇数行。 - 当
forloop.Counter % 2 == 0时，表示当前是偶数行。
接下来，我们可以根据这个判断结果，为列表项（例如<li>标签或表格的<tr>标签）动态添加不同的CSS类。
以下是一个在archiveList中为列表项添加奇偶行样式的示例：
假设我们要展示一个文章列表，并让其奇偶行背景色不同。
<ul class="article-list">
{% archiveList archives with type="list" limit="10" %}
{% for item in archives %}
{# 根据 forloop.Counter 的奇偶性，动态添加 CSS 类 #}
<li class="article-item {% if forloop.Counter % 2 == 1 %}odd-row{% else %}even-row{% endif %}">
<a href="{{item.Link}}">
<h3>{{item.Title}}</h3>
<p>{{item.Description}}</p>
<span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
</a>
{% if item.Thumb %}
<img src="{{item.Thumb}}" alt="{{item.Title}}">
{% endif %}
</li>
{% empty %}
<li>暂无文章内容</li>
{% endfor %}
{% endarchiveList %}
</ul>
然后，在你的CSS文件中（通常是 /public/static/你的模板目录/css/style.css 或其他你引用的样式文件），定义这些类的样式：
/* article-list 样式（可选，根据你的布局需求） */
.article-list {
list-style: none;
padding: 0;
margin: 0;
}
/* 奇数行样式 */
.odd-row {
background-color: #f9f9f9; /* 浅灰色背景 */
padding: 15px;
margin-bottom: 10px;
border-radius: 5px;
}
/* 偶数行样式 */
.even-row {
background-color: #ffffff; /* 白色背景 */
padding: 15px;
margin-bottom: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 添加一点阴影增加区分度 */
}
/* 列表项内部链接和文本样式（可选） */
.article-item a {
text-decoration: none;
color: #333;
display: block;
}
.article-item h3 {
color: #0056b3;
margin-top: 0;
margin-bottom: 5px;
}
.article-item p {
font-size: 0.95em;
color: #666;
line-height: 1.6;
margin-bottom: 10px;
}
.article-item span {
font-size: 0.85em;
color: #999;
}
.article-item img {
max-width: 100px;
height: auto;
float: right;
margin-left: 15px;
border-radius: 3px;
}
这样，你的文章列表就会呈现出清晰的奇偶行差异化样式，大大提升了视觉效果和用户体验。
实际应用场景与拓展思路
这个方法不仅限于简单的<ul><li>列表，它同样适用于：
- 表格（
<table>）数据： 在<tr>标签上应用奇偶行样式，使表格数据一目了然。 - 卡片式布局： 每一张卡片作为一个循环项，可以根据奇偶性调整背景、边框等。
- 评论列表： 让用户更容易区分不同的评论条目。
除了奇偶行，forloop.Counter还可以帮助我们实现更多灵活的样式控制，例如：
- 高亮第一个元素：
{% if forloop.Counter == 1 %}first-item{% endif %} - 为特定数量的元素分组：
{% if forloop.Counter % 3 == 0 %}third-item-group-end{% endif %}
通过这些技巧，您可以更好地利用AnQiCMS模板引擎的强大功能，打造出美观、易用且功能丰富的网站界面。
常见问题 (FAQ)
这个奇偶行样式的方法只适用于列表（
<ul>）吗？ 不是的，这个方法适用于AnQiCMS模板中所有使用{% for ... in ... %}标签进行循环遍历的HTML元素。无论是表格的行（<tr>），还是使用div构建的卡片式布局，只要在循环体内部，都可以利用forloop.Counter变量来判断奇偶行并应用不同的样式。如果我想给列表中的第一行添加一个特殊的样式，而不是奇偶行样式，应该怎么实现？ 您可以使用
forloop.Counter来判断当前循环是否是第一次迭代。例如，在您的<li>标签中可以这样判断：<li class="{% if forloop.Counter == 1 %}first-item-style{% elif forloop.Counter % 2 == 1 %}odd-row{% else %}even-row{% endif %}"> <!-- 内容 --> </li>然后定义
first-item-style的CSS样式即可。我应该将这些CSS样式放在AnQiCMS的模板文件中的哪个位置？ 根据AnQiCMS的模板制作约定，模板用到的样式、JS脚本、图片等静态资源通常存放在
/public/static/目录下。所以，您可以在您的模板文件夹内，例如templates/your_template_name/public/static/css/style.css文件中添加这些CSS规则。确保您的HTML模板文件正确引用了这些CSS文件。