How to use the `add` filter in a loop to implement alternating row colors or dynamically concatenate different CSS class names?

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 area, by giving list items different styles, such as alternate row coloring or applying different class names based on specific conditions, it can significantly enhance the readability and aesthetics of the page.AnQiCMS's powerful template engine provides flexible tools to implement these dynamic style requirements, among whichforin the loopcycleTags andaddThe filter is our powerful assistant.

Understanding the dynamic style needs in the loop.

Imagine browsing through a long list of articles when each article has the same background color; it's easy for the eyes to tire and difficult to distinguish between adjacent entries.At this time, if the list can implement 'alternating row colors', that is, one row is light and the next row is dark, the reading experience will immediately become smooth many times.

In addition to simple alternate line 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, read count), like "post-id-123".These requirements all point to a core feature: to be able to flexibly concatenate a unique or specific regular CSS class name for each list item in a loop.

AnQiCMS's template language borrows the syntax of the 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 toforImplement these dynamic styles in the loop.

Loop base in AnQiCMS template

We usually use in AnQiCMS template,{% for item in list %}Tags to traverse the dataset, for example, an article list(archiveList) or a category list(categoryListIn this loop, the system provides several very useful special variables to help us obtain the current state of the loop:

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

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.CounterWill output 1, 2, 3, 4, 5, providing the basic numerical basis for dynamic style control.

UsecycleTags implement alternating row coloring.

For the most common alternating row color requirement, AnQiCMS providescyclea tag that allows you to repeat a set of values in a loop according to a preset 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. UsecycleLabel, 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 block,{% cycle 'even' 'odd' %}This will output alternately in each loop'even'and'odd'strings. The first article will getevenCategory, the second one isodd, the third one is againeven, proceeding in this manner, it perfectly achieves the effect of alternating colors between rows. You can even provide more values tocycle, so that it repeats in a longer sequence:{% cycle 'class-a' 'class-b' 'class-c' %}.

Use cleverlyaddFilter for dynamic class name concatenation

cycleThe tag is very suitable for repeated patterns, but when we need more flexible, numeric or mixed content-based 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.

addusing a filter{{ obj|add:obj2 }}format, you can convertobjandobj2The value is appended. If they are numbers, perform mathematical addition; if one or both are strings, perform string concatenation.

Scenario 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, to facilitate JavaScript or more refined 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 will combine with an empty string''performaddOperation is to ensureforloop.CounterTreated as a string for concatenation, thus generatedpost-item-1/post-item-2Class names such as. Of course, according to AnQiCMSaddThe flexibility of the filter, even if directly{{ 'post-item-'|add:forloop.Counter }}It will also automatically convert numbers to strings for concatenation, the effect is the same.

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

We can also useaddthe filter meetsifLogical judgment andcycleCombine labels to create more complex dynamic class names.

Assuming our requirement is:

1. All list items have a base classlist-item.
2. The first item in the list has an extrais-firstClass.
3. List item alternate row coloring, usingdarkandlightClass.
4. Each item also has a class based on its position in the loop, such asitem-num-1.

We can write the template code like this:

`twig {% archive