In AnQiCMS template development, we often need to handle various data lists, such as article lists, product displays, or navigation menus.forLoops are the core tools for traversing these lists. However, simply listing data items often does not meet all needs, and we may also need to know the current item being traversed in the list or how many items are left until the end of the list.This is built-in in the AnQiCMS template engine,forloop.Counterandforloop.RevcounterThese loop counters play an important role, they can provide flexible index assistance for our template.

forloop.CounterThe trick: sequential indexing starting from 1

forloop.CounterThis provides the current iteration count of the loop, which starts from 1 and automatically increments with each iteration.This is like the numbering we use in our daily lives, very intuitive and easy to understand.

For example, when displaying an article list on a website, if you want to add a serial number to each article,forloop.Counterit can be easily achieved:

{% for item in archives %}
    <li>
        <span>{{ forloop.Counter }}.</span> <a href="{{item.Link}}">{{item.Title}}</a>
    </li>
{% endfor %}

The code snippet will add an incremental serial number starting from 1 to each article in the list, making the structure clearer.

forloop.CounterIt is not limited to displaying numbers, it can also help us achieve some dynamic style control.For example, we may want the first element in the list to have a special style to attract the user's attention.By combining conditional judgment, we can easily achieve:

{% for item in archives %}
    <li class="{% if forloop.Counter == 1 %}first-item-highlight{% endif %}">
        <a href="{{item.Link}}">{{item.Title}}</a>
    </li>
{% endfor %}

When, here,forloop.CounterWhen the value equals 1, the list item<li>is assignedfirst-item-highlightThis CSS class, thereby achieving special styles for the first item

forloop.RevcounterUnique perspective: from the end in reverse index

withforloop.Counterto form a contrast,forloop.RevcounterIt provides the remaining count of the current item to the end of the list.Its count starts from the total number of items in the list, decreasing in each loop until the last element is 1.This counter is particularly useful in some scenarios where "countdown" or "remaining" information is needed.

Imagine that we hope to display a prompt like 'Current article X, remaining Y articles' next to each article title.'forloop.CounterYou can provide information such as 'Current article X,' butforloop.RevcounterThen it can provide the dynamic data of "remaining Y articles":

{% for item in archives %}
    <li>
        <a href="{{item.Link}}">{{item.Title}}</a>
        <span>（当前第 {{ forloop.Counter }} 篇，剩余 {{ forloop.Revcounter }} 篇）</span>
    </li>
{% endfor %}

If the list has 10 items, the first item is:forloop.RevcounterIt will be 10, and the last item will be:forloop.RevcounterIt will be 1. This is very effective for creating dynamic progress indicators or emphasizing the end of a list.

Furthermore,forloop.RevcounterIt can also be conveniently used to determine whether it is the last item in the list. This is very useful when special content needs to be added at the end of the list or when a separator should be avoided at the end.

{% for item in archives %}
    <a href="{{item.Link}}">{{item.Title}}</a>
    {% if forloop.Revcounter > 1 %}
        <span> | </span> {# 在非最后一项后添加分隔符 #}
    {% endif %}
{% endfor %}

This, the article title will be separated by separators, but there will be no extra separators after the last title.

Actual application scenarios and combination

These two loop counters can be flexibly combined to meet the needs of various complex template designs:

  • Alternating row background color: Althoughforloop.Counter0cooperatecycleLabels are often used here, butforloop.Countercan also be achieved by judging parity:{% if forloop.Counter % 2 == 0 %}odd-row{% else %}even-row{% endif %}.
  • Content truncation and restrictionIf you only want to display summaries or thumbnails in the first few items of the list, you can use{% if forloop.Counter <= 3 %}...{% endif %}to control.
  • Generate specific markers for ordered lists: When you need to generate an ordered list with custom markers (such as stars, icons, etc.), you can dynamically switch markers according to the counter.

By using these built-in counters, we can directly implement many dynamic displays and controls related to list indices at the template level without increasing the complexity of the backend logic, making the AnQiCMS template more flexible and expressive.

Summary

In the template development practice of AnQiCMS,forloop.Counterandforloop.RevcounterThese are two powerful and practical auxiliary tags. One provides a positive count starting from 1, and the other provides a count from the end of the list in reverse.They can help us accurately control the display order, style, and interaction logic of list elements, thereby improving user experience while maintaining the conciseness and efficiency of template code.Master and apply these two counters, and it will make your AnQiCMS template development twice as effective.

Frequently Asked Questions (FAQ)

  1. forloop.Counterandforloop.Counter0What is the difference? forloop.CounterStarting from 1, it is more in line with the expression of 'first item', 'second item', which is more in line with human daily habits. Andforloop.Counter0Counting starts from 0, which is more applicable when it is necessary to be consistent with array indices based on zero in programming languages (such as array indices).You can choose to use it according to your specific needs.

  2. I canforUse outside the loopforloop.Counterorforloop.Revcounter?No.forloop.Counterandforloop.RevcounterIsforLoop context variables, they are only{% for ... %}and{% endfor %}valid within the tag block. Using them outside the loop will cause template parsing errors or inability to obtain the correct value.

  3. How to knowforThe total number of iterations of the loop?InforInside the loop, you can useforloop.lengthto get the current total number of iterations of the loop. For example, you can add inside the loop<span>总共有 {{ forloop.length }} 项。</span>to display the total count. This is usually combined withforloop.Counterandforloop.RevcounterCombine use to provide a more comprehensive list of information.