In website content management, dynamically displaying list data is a basic and crucial feature.Whether it is an article list, product display, or user comments, we need to present data to users efficiently.In this process, how to clearly indicate the order of list items, or inform the user how much content is left to browse, can greatly enhance the user experience and readability of the content.AutoCMS (AutoCMS) offers a flexible template engine, allowing us to easily meet these requirements.
Use flexiblyforLoop through data
In AnQiCMS templates, we mainly use{% for ... in ... %}tags to iterate over array or object lists. For example, to display an article list, we can construct the basic loop like this:
{% archiveList archives with type="list" limit="10" %}
{% for item in archives %}
<li><a href="{{item.Link}}">{{item.Title}}</a></li>
{% empty %}
<li>目前还没有内容发布。</li>
{% endfor %}
{% endarchiveList %}
This code will retrieve the 10 most recently published articles and display their titles and links one by one. If the list is empty,{% empty %}a friendly prompt message will be displayed.
Get loop count:forloop.Counter
To make the list more organized, we often need to add numbers to each list item. In AnQiCMS'sforin the loop,forloop.CounterThis variable can be very useful. It returns the current number of iterations, and it starts counting from1.
For example, we want to add a serial number to each article:
{% archiveList archives with type="list" limit="10" %}
{% for item in archives %}
<li>
<span>{{ forloop.Counter }}.</span>
<a href="{{item.Link}}">{{item.Title}}</a>
</li>
{% empty %}
<li>目前还没有内容发布。</li>
{% endfor %}
{% endarchiveList %}
Here, each article will display a serial number starting from 1, making it clear for users to see the total number of items in the list and their current browsing position.This is particularly important for information that needs to be presented in order (such as step guides, leaderboards, etc.).
Master the remaining quantity:forloop.Revcounter
In addition to positive counting, we sometimes also need to know how much content is left after the current list item.forloop.RevcounterVariables are designed for this. It returns the number of elements remaining after the current loop item, including the current item, that is, the total number minus the current loop count plus 1.
For example, when displaying a list of time-limited promotional products, we may want to emphasize that 'There are X items left':
{% archiveList products with type="list" moduleId="2" limit="5" %}
{% for item in products %}
<li>
<a href="{{item.Link}}">{{item.Title}}</a>
{% if forloop.Revcounter > 1 %}
<span> (还剩 {{ forloop.Revcounter - 1 }} 件)</span>
{% else %}
<span> (这是最后一件了！)</span>
{% endif %}
</li>
{% empty %}
<li>目前没有优惠商品。</li>
{% endfor %}
{% endarchiveList %}
Please note,forloop.RevcounterStatistics isFrom the current item to the last itemThe number of. Therefore, if you want to express 'how many items are left after the current item', we need to subtract 1.forloop.Revcounterwhenforloop.RevcounterWhen equal to 1, it means that the current item is the last item in the list.
Comprehensive application, optimizing user experience
toforloop.Counterandforloop.RevcounterCombining them, we can create more interactive and informative lists. For example, on a product list page, we may need:
- Add a serial number for each product.
- Process the first and last products with special styles.
- Display 'Current X of Y' or 'Remaining Z' in the list.
The following is a more complete example showing the power of these variables:
<ul class="product-list">
{% archiveList products with type="list" moduleId="2" limit="8" %}
{% for product in products %}
<li class="product-item {% if forloop.Counter == 1 %}first-item{% endif %} {% if forloop.Revcounter == 1 %}last-item{% endif %}">
<a href="{{product.Link}}" title="{{product.Title}}">
{% if product.Thumb %}
<img src="{{product.Thumb}}" alt="{{product.Title}}" class="product-thumb">
{% else %}
<img src="/static/images/placeholder.png" alt="无图片" class="product-thumb">
{% endif %}
<h3 class="product-title">{{ forloop.Counter }}. {{product.Title}}</h3>
</a>
<p class="product-meta">
<span>浏览量: {{product.Views}}</span>
{% if forloop.Revcounter > 1 %}
<span class="remaining-items"> (之后还有 {{ forloop.Revcounter - 1 }} 个商品)</span>
{% else %}
<span class="remaining-items"> (已是最后一个)</span>
{% endif %}
</p>
{% if product.Description %}
<p class="product-description">{{ product.Description|truncatechars:80 }}</p>
{% endif %}
</li>
{% empty %}
<li class="no-products-found">抱歉，目前没有找到任何产品。</li>
{% endfor %}
{% endarchiveList %}
</ul>
In this example, we not only achieve numbered display throughforloop.Counterand use it withforloop.RevcounterAdded a special CSS class to the first and last elements of the list (first-itemandlast-itemThis provides great style control flexibility for front-end designers. At the same time, we also friendly prompt the user how many products are left for the current product.
Common Questions (FAQ)
Q1:forloop.Counterandforloop.RevcounterWhat is the difference?
A1:forloop.CounterRepresents the forward count of the current loop item, starting from1and increments until the list ends. For example, in a list with 5 elements,forloop.Counterthey will be, in order,1, 2, 3, 4, 5.forloop.RevcounterThis indicates the total number from the current loop item to the end of the list. In the same 5-element list,forloop.Revcounterthey will be, in order,5, 4, 3, 2, 1In simple terms,Countertells you 'which item this is',RevcounterTell you 'How many items (including the current item) are left.'
Q2: How can I determine if the current element in the loop is the first or last in the list?
A2: To determine if it is the first element, you can checkforloop.Counter == 1. If the condition is met, it means it is the first item in the list. To determine if it is the last element, you can checkforloop.Revcounter == 1. When this condition is met, it indicates that the current element is the last item in the list. You can use these two conditions to apply specific styles or display different content.
Q3: How do I display a custom prompt instead of nothing if the array or object list I loop through is empty?
A3: AnQiCMS'sforThe loop tag has built-in one{% empty %}Sub-label, specifically used to handle this situation. When the list you are looping through is empty,{% empty %}and{% endfor %}the content between them will be displayed. For example:
{% for item in my_list %}
{# 显示列表项内容 #}
{% empty %}
<p>抱歉，这里还没有内容。</p>
{% endfor %}