Use AnQiCMS template to easily obtain the "first" and "Nth" indices in a loop

In website content operation, we often need to display a series of contents on the page, such as article lists, product displays, navigation menus, etc.To better present these contents, we often need to fine-tune each item in the list, such as adding special styles to the first item, or displaying the sequence number of each item in the list.forLooping to obtain the index of the current iteration item is a very practical skill that can greatly enhance the flexibility of the template.

AnQiCMS uses a template engine syntax similar to Django, which allows content developers to easily build dynamic pages. When dealing with list data, we usually useforLoop tags to iterate over a collection of data. To get the index of each element in the loop, AnQiCMS provides a built-in special variable that makes this requirement very easy.

Knowforloop.CounterYour 1-based loop counter

When you use in AnQiCMS template{% for item in collection %}such a structure to iterate over a list (such as a collection of articles, category list, or image group) when the template engine silently provides a special variable namedforloopthisforloopThe variable contains a lot of practical information related to the current loop state, the most core of which is today's main character -forloop.Counter.

forloop.CounterIn short, it is a counter. What makes it unique is that, it starts from1start counting. This means that, when the loop runs for the first time,forloop.CounterThe value is 1; the second is 2, and so on until the loop ends. This is very convenient for scenarios where you need to number list items starting from 1.

Let's look at a simple example, suppose we are displaying a product list, and we want to show the serial number for each product:

{% archiveList products with type="list" limit="5" %}
    {% for product in products %}
    <div class="product-item">
        <span class="product-number">{{ forloop.Counter }}.</span>
        <h3><a href="{{ product.Link }}">{{ product.Title }}</a></h3>
        <p>{{ product.Description }}</p>
    </div>
    {% endfor %}
{% endarchiveList %}

In this code,{{ forloop.Counter }}The first product in the list will be displayed as “1.”, the second product as “2.”, and so on.This intuitive 1-based counting method perfectly fits human reading habits and many business logic needs.

Masterforloop.RevcounterCounting backwards from the 'tail':

In addition to positive counting, AnQiCMS also provides for usforloop.Revcounterthis variable. Withforloop.CounterOn the contrary,forloop.RevcounterThe one provided isthe reverse order, starting from 1 as wellThe index of. This means, the last item in the list, itsforloop.Revcountervalue is 1; the second to last is 2, up to the first item in the list, itsforloop.Revcountervalue is equal to the total length of the list.

forloop.RevcounterIn some specific scenarios, it can work wonders, such as when you need to perform special processing on the last few items in the list, or display the numbers in reverse order.

Combine these two counters, we can build more complex logic:

{% categoryList categories with moduleId="1" parentId="0" %}
    {% for category in categories %}
    <li class="category-item {% if forloop.Counter == 1 %}first{% endif %} {% if forloop.Revcounter == 1 %}last{% endif %}">
        <span class="index">{{ forloop.Counter }}</span>. 
        <a href="{{ category.Link }}">{{ category.Title }}</a>
        <span class="remaining-items">（还有{{ forloop.Revcounter - 1 }}个）</span>
    </li>
    {% empty %}
    <li>暂无分类。</li>
    {% endfor %}
{% endcategoryList %}

In this example, we not only added positive sequence numbers for each category, but also made use of:forloop.Counter == 1Added for the first element:firstEnglish, utilizeforloop.Revcounter == 1Added for the last elementlastEnglish.forloop.Revcounter - 1Then it cleverly shows how many elements are behind the current item.

Practical scenarios and skills

forloop.Counterandforloop.RevcounterThese two variables are very useful in actual development:

  1. Serial number displayThe most common use is to add serial numbers to list items, such as "1. Title A
  2. Condition Style: You can use according toforloop.Counterorforloop.RevcounterThe value to add different CSS classes to elements at specific positions, such as the first, last, or every Nth element in a list. This istag-/anqiapi-other/3498.htmlandtag-/anqiapi-archive/141.htmlThe example also illustrates it, such as{% if forloop.Counter == 1 %}active{% endif %}.
  3. Unique ID generation: Combined with other variables, it can generate a unique ID on the page, convenient for JavaScript operations or anchor links.
  4. Loop exit/limitAlthoughforloop.CounterDoes not control the loop directly, but you can combineifStatement, to perform special handling or interrupt the logic when reaching a certain count.
  5. Handling empty dataIt is worth mentioning that, AnQiCMS'sforThe loop also supports{% empty %}When the traversed collection is empty, it will executeemptythe content of the block, at this timeforloopthe variable does not exist naturally.

By using flexibilityforloop.Counterandforloop.RevcounterAnQiCMS content operators and template developers can easily implement various complex list displays and interaction logic, making the website content more vivid and organized.

Common Questions (FAQ)

Q1: What is AnQiCMS?forin the loop,forloop.CounterThe index is provided from 0 or from 1?

A1: AnQiCMS'sforloop.CounterThe one provided isCounting starts from 1index. This means that the first element of the listforloop.CounterThe value is 1, the second is 2, and so on. If you need 0-based indexing, you can simply use{{ forloop.Counter - 1 }}to achieve.

Q2: Besides positive indexing, can I get the reverse index of the list item?

A2: Of course. AnQiCMS inforthe loop also providesforloop.RevcounterA variable that provides the reverse index of the current iteration item in the list, counting from 1. For example, the last element in the list is 1, and the second-to-last is 2.forloop.RevcounterThe value is 1, and the second-to-last is 2.

Q3: How do I apply a special style to the first or last item in a list?

A3: You can useforloop.Counterandforloop.RevcounterCombineifCondition judgment to implement. For example, to add style to the first item, you can use{% if forloop.Counter == 1 %}; To add style to the last item, you can use{% if forloop.Revcounter == 1 %}This can very accurately control the performance of specific position elements.