In modern web design, the visual presentation of list content has an important impact on user experience.Whether it is an article list, product display, or comment section, by giving different styles to list items, such as alternate row coloring or applying different class names based on specific conditions, it can significantly improve the readability and aesthetic appeal of the page.forIn the loopcycleTags andaddFilter is our powerful assistant.

Understanding dynamic style requirements in loops

Imagine browsing through a long list of articles, if the background color of each article is the same, it is easy for the eyes to get tired and difficult to distinguish between adjacent entries.This is when if the list can implement 'alternating row colors', that is, one row is light and the next row is dark, the reading experience will become smooth immediately.

In addition to simple alternating row coloring, sometimes we also need more fine-grained control.For example, add a special 'first-item' class name to the first item in the list, or dynamically generate a class name containing a number based on some data (such as an article ID, number of reads), such as 'post-id-123'.These requirements point to a core feature: the ability to flexibly concatenate unique or patterned CSS class names for each list item during loop traversal.

AnQiCMS's template language borrows the syntax of Django template engine, allowing us to easily embed logic control and data output in the HTML structure. Next, let's take a look at how to...forImplementing these dynamic styles in the loop.

Loop basics in AnQiCMS template

We usually use in AnQiCMS template,{% for item in list %}Label to iterate over the dataset, such as article list (archiveList) or category list (categoryList）。In this loop, the system provides several very useful special variables to help us get the current loop state:

  • forloop.Counter: The current iteration number of the loop,1.
  • forloop.Revcounter: The number of remaining elements in the current loop, counted in reverse from the total.

A simple article list loop might look like this:

{% archiveList archives with type="list" limit="5" %}
    {% for item in archives %}
    <li>
        <span>这是第 {{ forloop.Counter }} 篇文章</span>
        <a href="{{item.Link}}">{{item.Title}}</a>
    </li>
    {% endfor %}
{% endarchiveList %}

Hereforloop.CounterThe number 1, 2, 3, 4, 5 will be output separately, providing the basic numerical basis for dynamic style control.

UsecycleLabels implement alternating row coloring.

For the most common row alternating color needs, AnQiCMS providescycletags, which allow you to repeatedly output a set of values in a predefined order. This is better than manual judgmentforloop.CounterThe parity is much more concise.

Suppose we define two CSS class namesevenandoddto represent the styles of odd and even rows.cycletags, we can implement it like this:

{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
    <li class="{% cycle 'even' 'odd' %}">
        <a href="{{item.Link}}">{{item.Title}}</a>
        <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
    </li>
    {% endfor %}
{% endarchiveList %}

In this code,{% cycle 'even' 'odd' %}Will be alternately output in each loop'even'and'odd'String. The first article will receiveevenCategory, the second isodd, the third is againevenThis also applies, perfectly realizing the effect of alternating row colors. You can even provide more values tocycleto repeat it in a longer sequence:{% cycle 'class-a' 'class-b' 'class-c' %}.

use cleverlyadddynamically concatenate class names with a filter

cycleThe label is very suitable for repetitive patterns, but when we need more flexible, numeric-based, or mixed-content class names,addThe filter comes into play.addThe filter is mainly used for adding (appending) numbers or strings.In the template, it can concatenate different values (including numbers and strings) to generate a new string.This is very useful for dynamically concatenating CSS class names.

addFilter usage{{ obj|add:obj2 }}in the form of,objandobj2If they are numbers, perform mathematical addition; if either or both are strings, perform string concatenation.

Scene one: Generate class names with serial numbers for list items

For example, we want to generate a similar one for each articlepost-item-1/post-item-2The class name, for easy JavaScript or more fine-grained CSS control.

{% archiveList archives with type="list" limit="5" %}
    {% for item in archives %}
    <li class="post-item-{{ forloop.Counter|add:'' }}">
        <a href="{{item.Link}}">{{item.Title}}</a>
    </li>
    {% endfor %}
{% endarchiveList %}

Here,forloop.CounterIt will output numbers (1, 2, 3…), which we match with an empty string''performingaddOperation, the purpose is to ensureforloop.CounterTreated as a string for concatenation, thus generatingpost-item-1/post-item-2And other class names. Of course, according to AnQiCMSaddThe flexibility of the filter, even if directly{{ 'post-item-'|add:forloop.Counter }}The number will also be automatically converted to a string for concatenation, with the same effect.

Scenario two: Combine multiple conditions and data to concatenate complex class names

We can also takeaddFilter is related toiflogic judgments andcycleTags combined to create more complex dynamic class names.

Suppose our requirement is:

  1. All list items have a base classlist-item.
  2. The first item in the list has additionalis-firstclass.
  3. List item alternating colors, usingdarkandlightclass.
  4. Each item also has a class based on its index in the loop, likeitem-num-1.

We can write template code like this:

`twig {% archive