In website content display, we often need to highlight specific items in the list visually, whether to attract user attention or to enhance the sense of hierarchy of the content.For example, you may want to add a "top" mark to the latest few articles released, or let the odd and even rows in the list display different background colors to enhance readability.AnQiCMS (AnQiCMS) flexible template engine, which provides strong support for these fine-grained controls.

AnQiCMS's template system adopts the syntax of Django template engine, which means you can control the display logic of content through concise and intuitive tags.forThe loop tag is the most commonly used tool when processing list data, and its built-in counter function is the core of our implementation of special styling for list items.

Core function analysis: for loop and counter

In the template of Anqi CMS, when we usearchiveList/categoryListtags to get the content list and iterate over it,forThe loop itself provides some very useful built-in variables that help us understand the current state of the loop. The most critical one isforloop.Counterandforloop.Revcounter.

forloop.CounterThis variable is used to record the current number of iterations in the loop, it starts from1Incrementing. This means that when you traverse the first item in the list,forloop.CounterThe value is 1; the second item is 2, and so on.

forloop.Revcounter: withforloop.CounterOn the contrary,forloop.RevcounterStarting from the total number of items in the list, decrement until 1.This is very useful when you need to count from the end of the list or handle the last item.forloop.RevcounterIt is 10, and the last one is 1.

Understood these counters, we can add the style we want to specific items in the loop through conditional judgments.

Practical Exercise: Add style to specific items

Next, we will demonstrate through several common scenarios how to cleverly utilizefora loop counter to add special styles to list items.

Scene one: Highlight the first item in the list.

Suppose you have a list of articles and you want the first article in the list to have a special background color or a 'new' corner mark.

{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
    <li class="{% if forloop.Counter == 1 %}highlight-first{% endif %}">
        <a href="{{ item.Link }}">
            <h3>{{ item.Title }}</h3>
            <p>{{ item.Description }}</p>
        </a>
    </li>
    {% empty %}
    <li>暂无文章</li>
    {% endfor %}
{% endarchiveList %}

In this code,{% if forloop.Counter == 1 %}Check if the current item is the first item in the loop. If so, add an item namedhighlight-firstThe CSS class. You just need to define the style of this class in your CSS file, like:

.highlight-first {
    background-color: #ffe0b2; /* 柔和的橙色背景 */
    border-left: 5px solid #ff9800; /* 左侧边框 */
    padding-left: 15px;
}

In this way, the first article in the list will automatically apply this special style.

Scene two: Implement row alternation or cyclic style for lists

In order to improve the readability of long lists, or to add different background patterns to each item, we often use zebra striping or cyclic application of a set of styles. At this time,cycleLabels make it especially convenient and elegant.

cycleLabels allow you to select a value from a predefined set of strings in sequence each time the loop runs.

{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
    <li class="{% cycle 'even-row' 'odd-row' %}">
        <a href="{{ item.Link }}">
            <h3>{{ item.Title }}</h3>
            <p>{{ item.Description }}</p>
        </a>
    </li>
    {% empty %}
    <li>暂无文章</li>
    {% endfor %}
{% endarchiveList %}

Here,{% cycle 'even-row' 'odd-row' %}It will output on the first loop.even-row，Second outputodd-row，Third time backeven-rowThus, the cycle continues. You can define styles separately in CSSeven-rowandodd-rowsuch as:

.even-row {
    background-color: #f9f9f9;
}
.odd-row {
    background-color: #ffffff;
}

If you need more loop styles, such as a carousel style with three different colors, just add more parameters in the tag:cycle标签中添加更多参数即可：{% cycle 'color-a' 'color-b' 'color-c' %}.

Scene three: Add style based on location range or specific numbers

Sometimes, you may need more complex conditions, such as adding styles to the first three articles or adding an advertisement style every five items.

{% archiveList archives with type="list" limit="15" %}
    {% for item in archives %}
    <li class="
        {% if forloop.Counter <= 3 %}highlight-top3{% endif %}
        {% if forloop.Counter % 5 == 0 %}ad-slot{% endif %}
    ">
        <a href="{{ item.Link }}">
            <h3>{{ item.Title }}</h3>
            <p>{{ item.Description }}</p>
        </a>
        {% if forloop.Counter % 5 == 0 %}
            <div class="ad-content">广告内容</div>
        {% endif %}
    </li>
    {% empty %}
    <li>暂无文章</li>
    {% endfor %}
{% endarchiveList %}

This code combines severalifconditions:

  • {% if forloop.Counter <= 3 %}Will add to the first three items in the listhighlight-top3class.
  • {% if forloop.Counter % 5 == 0 %}Will determine if the current item is the 5th, 10th, 15th... item (i.e., the counter is divisible by 5), and add to itad-slotClass, at the same<li>Insert an advertisement content insidediv.

This flexible conditional judgment allows you to perform precise style control and content insertion at any position or regular items in the list according to business requirements.

Combine actual needs, flexible application

In the Anqi CMS, the styling differentiation of list items is not limited to the above examples. You can use your creativity according to the actual website design and operation strategy:

  • Hot Recommendations：Combine article reading volume or recommendation attributes to display special icons or styles in the top positions.
  • Newly released content: Utilizingforloop.CounterMark the latest few published articles.
  • Product promotionIn the product list, add promotional tag styles for products in a specific price range.
  • Content interleavingEnglish: Besides adding style, you can also insert advertisements, recommended content, or other tips at specific locations as shown in the example.

Always recommend separating styles (CSS) from structure (HTML template), by dynamically adding or removing CSS classes in the template to maintain cleanliness and maintainability. The Anqi CMS providedforloop.CounterandcycleEnglish tools, making these operations effortless.

Summary

The powerful template engine of Anqi CMS combined with its built-in.forThe loop counter provides an effective way for us to perform fine-grained style control on specific items when displaying a list.Whether it is simple alternating row coloring or complex conditional triggered styles, they can all be easily achieved through intuitive tag syntax.Take full advantage of these features, which will greatly enhance the visual appeal and user experience of your website content.

Common Questions (FAQ)

Q1: Why?forloop.Counterstarts counting from 1 instead of 0?

A1：In many programming languages, the index of an array or list usually starts from 0. However, in Anqi CMS (and many other template engines, such as Django, Liquid)forIn a loop counter,forloop.CounterThe design is to better conform to human intuitive counting habits, starting from 'the 1st', 'the 2nd', and so on.This makes it more intuitive and convenient to handle requirements such as "first item

Q2：除了classI can modify the propertiesstyleto apply styles?

A2: Theoretically, you canstyleThe style is directly embedded in the HTML tag, for example<li style="background-color: yellow;">...</li>.But this is usually not recommended as it violates the **practice** of separating style and structure, making the template code bulky, difficult to read and maintain.When you need to modify the style, you must modify each template file that contains inline styles.classProperties defined in external CSS files can make your code more modular, easier to manage, and benefit the loading efficiency and SEO performance of your website.

Q3：If I want to add a special style to the last item in the list, what should I do?

A3：To add a special style to the last item in the list, you can useforloop.Revcountervariables. Whenforloop.RevcounterWhen the value is 1, it means that the current loop has reached the last item in the list. For example:

<li class="{% if forloop.Revcounter == 1 %}highlight-last{% endif %}">
    <!-- 列表内容 -->
</li>

Or ifforThere are no items after the loop{% empty %}Block, and you are sure there is at least one item in the list, you can also use `forloop.`