In website content management, it is often necessary to meet such requirements: that the first or last element of the article list, product list, or other data list has a special style, such as the first article title being particularly prominent, or the last product detail not having a bottom separator line.This not only helps to highlight the key points, but also makes the visual effect of the page richer in layers.The powerful template engine of AnQiCMS (AnQiCMS) provides us with a simple and efficient way to implement these customized needs.
In the template system of Anqi CMS, we usually use{% for ... in ... %}tags to loop display articles, products, or other data lists. ThisforLoop tags can not only iterate over data, but also come with several very useful variables that can help us easily determine the position of the current element in the list or how many elements are left before the end of the list.
Identify the first element in the list: usingforloop.Counter
To determine if the current element is the first in the list, we can useforloop.Counterthis built-in variable. Inforeach iteration of the loop,forloop.Counterauto1autoforloop.Counter == 1auto
For example, suppose you are displaying a series of articles in a loop, and you want to add a specialfirst-itemCSS class to the first article:
{% archiveList articles with type="list" limit="10" %}
{% for item in articles %}
<div class="article-item {% if forloop.Counter == 1 %}first-item{% endif %}">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description | truncatechars:100 }}</p>
<span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</div>
{% empty %}
<p>暂时没有文章发布。</p>
{% endfor %}
{% endarchiveList %}
In the above code,{% if forloop.Counter == 1 %}Determine whether the current article is the first. If it is, it will indivElement with additional additionfirst-itemThis class name.
Identify the last element in the list: usingforloop.Revcounter
Withforloop.Counteris similar,forloop.RevcounterVariable returns how many elements are left until the current element is at the end of the list. Whenforloop.Revcounter == 1If, then it means that the current element is the last in the list.
If you want to add alast-itemCSS class, in order to remove the bottom border, for example, the template can be written like this:
{% archiveList articles with type="list" limit="10" %}
{% for item in articles %}
<div class="article-item {% if forloop.Revcounter == 1 %}last-item{% endif %}">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description | truncatechars:100 }}</p>
<span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</div>
{% empty %}
<p>暂时没有文章发布。</p>
{% endfor %}
{% endarchiveList %}
In this way, only the last article element in the list will receivelast-itemClass, you can control its style precisely with CSS.
Combined use: more complex style control.
You can also use these two variables with{% if %}/{% elif %}/{% else %}Combine logic labels to achieve more complex style control, for example, applying different styles to the first, last, and middle elements separately:
{% archiveList articles with type="list" limit="10" %}
{% for item in articles %}
<div class="article-item
{% if forloop.Counter == 1 %}first-item
{% elif forloop.Revcounter == 1 %}last-item
{% else %}middle-item
{% endif %}">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description | truncatechars:100 }}</p>
<span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</div>
{% empty %}
<p>暂时没有文章发布。</p>
{% endfor %}
{% endarchiveList %}
Once the judgment logic in the template adds a special class name to the corresponding HTML element, you only need to define the styles of these class names in your CSS file. For example:
/* style.css */
.article-item {
padding: 10px;
margin-bottom: 15px;
border-bottom: 1px dashed #eee;
}
.article-item.first-item {
background-color: #f9f9f9; /* 第一个元素背景色不同 */
border-top: 2px solid #007bff; /* 顶部加粗边框 */
padding-top: 20px;
}
.article-item.last-item {
margin-bottom: 0; /* 最后一个元素移除底部外边距 */
border-bottom: none; /* 最后一个元素移除底部边框 */
}
.article-item.middle-item {
/* 中间元素的通用样式 */
}
This method is highly versatile, it is not only suitable forarchiveListtags, but also for all uses in the Anqin CMS templateforscenarios where data is traversed in a loop, for examplecategoryList/pageList/navListetc. By using it flexibly,forloop.Counterandforloop.Revcounter，You can fine-tune the style of each list display on the website, greatly enhancing the user experience and visual effect.
Common Questions and Answers (FAQ)
Q1: Does this method apply to all?forLoop?
A: Yes,forloop.Counterandforloop.RevcounterIs in the AQ CMS template engine.forThe built-in variables of the loop, they are universal in all types offorloops, whether you are iterating over articles (archiveList), categories (categoryList) of navigation items (navList) or any other data list, both of these methods can be used to determine the loop position of the current element.
Q2: I want to apply special styles to even or odd items in the list, can it be done?
A: Of course, you can still combineforloop.CounterTo implement modular arithmetic. For example, to add styles to even-numbered items (e.g., the 2nd, 4th, 6th items, etc.), you can use{% if forloop.Counter % 2 == 0 %}even-item{% endif %}; To add styles to odd-numbered items, you can use{% if forloop.Counter % 2 != 0 %}odd-item{% endif %}.
Q3: If my article list may be empty, how can I avoid displaying incorrect styles or empty labels?
A: Secure CMSforLoop tags support a{% empty %}Branch. When the data you loop through is empty,{% empty %}and{% endfor %}the content between them will be rendered,forThis content within the loop will not be displayed. This can effectively avoid unnecessary HTML structures or style issues when there is no data, ensuring the cleanliness of the page and the user experience. For example:
{% archiveList articles with type="list" limit="10" %}
{% for item in articles %}
<!-- 这里是文章内容，如果列表不为空则显示 -->
{% empty %}
<p>暂无相关内容。</p> <!-- 如果列表为空，则显示这条消息 -->
{% endfor %}
{% endarchiveList %}