In website content management, dynamically displaying list data is a basic yet crucial function.Whether it is an article list, product display, or user comments, we need to present data to users efficiently.How to clearly indicate the order of list items or inform the user how much content has not been viewed can greatly enhance the user experience and readability of the content.AnQiCMS (AnQiCMS) with its flexible template engine can help us easily meet these needs.
The AnQiCMS template system uses syntax similar to Django, which allows content operators to quickly get started even without a strong programming background.When dealing with the iteration of arrays or lists of objects, the built-in loop variables in the template provide us with great convenience, especially in terms of easily obtaining the loop count and remaining number.
Flexible applicationforLoop through data
In the AnQiCMS template, we mainly use{% for ... in ... %}tags to traverse 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 most recently published 10 articles and display their titles and links one by one. If the list is empty,{% empty %}a friendly prompt will be displayed.
Get loop count:forloop.Counter
To make the list more organized, we often need to add a serial number to each list item. In AnQiCMS'sforthe loop,forloop.CounterThis variable can be put to good use. It will return the current loop count and it is from1and counting.
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 %}
Such, each article will display a serial number starting from 1, making it clear for the user to see the total number of the list and the 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 the positive counting, sometimes we 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 remaining elements 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 still 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.RevcounterIt is countingFrom the current item to the last oneThe number. Therefore, if we want to express how many items are left after the current item, we need to subtractforloop.Revcounter1. Whenforloop.RevcounterWhen equal to 1, it means that the current item is the last item in the list.
Integrated application, optimizing user experience
toforloop.Counterandforloop.RevcounterUsing them together, we can create a list with more interactivity and information. For example, on a product list page, we might need:
- To add a serial number to each product.
- Handle special styles for the first and last products.
- Display 'Current X of Y' or 'Remaining Z' in the list.
This is a more complete example that shows 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 achieveforloop.Counternumber display, but also make use of it andforloop.RevcounterAdd 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 after the current product.
By these built-in loop variables, AnQiCMS makes the dynamic display of template content more refined and user-friendly.Apply them flexibly; it will help you build a more attractive and practical website.
Frequently Asked Questions (FAQ)
Q1:forloop.Counterandforloop.RevcounterWhat is the difference?
A1:forloop.CounterRepresents the forward count of the current loop item, starting from1and increasing until the end of the list. For example, in a list with 5 elements,forloop.Counterthey will be in order.1, 2, 3, 4, 5Howeverforloop.RevcounterIt represents the total number of items 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,”Revcountertells you “how many items are left (including the current item).
Q2: How do I determine if the current element in the loop is the first or last in the list?
A2: To check if it is the first element,forloop.Counter == 1If 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 conditions to apply specific styles or display different content.
Q3: How do I display a custom prompt if the array or object list I loop through is empty, instead of nothing?
A3: AnQiCMS'forThe loop tag built-in included a{% empty %}sub-tag, specifically used for handling this situation. When the list you loop through is empty,{% empty %}and{% endfor %}the content between them will be displayed. For example:
{% for item in my_list %}
{# 显示列表项内容 #}
{% empty %}
<p>抱歉，这里还没有内容。</p>
{% endfor %}