How to conditionally display different content or styles within a loop?

In website content display, we often encounter such needs: to display different content or assign unique styles to elements based on the order of data cycles, specific attributes, or states.For example, the odd and even rows of the list need different background colors, specific types of products need special marking, or the corresponding area should be hidden when a field is empty.

AnQi CMS with its flexible and powerful Django-like template engine makes these requirements simple and easy to implement. By cleverly combining loop tags ({% for ... %}）and conditional judgment tags（{% if ... %}series), you will be able to have precise control over the display of website content.

Core feature analysis: the foundation of loops and conditional judgment.

First, let's review the two core tools for implementing conditional display and style customization:

1. Loop tags ({% for ... %})This is the foundation for you to traverse the dataset. Whether it is an article list, product classification, or navigation menu,fortags can help you access each element in the collection one by one. For example, you can access{% archiveList archives with type="page" limit="10" %}Retrieve the list of articles and then{% for item in archives %}traverse these articles.

Inside the loop,itemThe variable represents the current data object being iterated over, which includes the title (item.Title), link (item.Link) and various properties.

2. Conditional judgment tag ({% if ... %}SeriesThis is the key to implementing 'conditionality'. Anqi CMS provides{% if 条件 %}/{% elif 其他条件 %}(short for else if) and{% else %}Labels, allowing you to decide which content will be rendered and which styles will be applied. For example,{% if item.Thumb %}It can determine whether the current article has a thumbnail.

3. Loop built-in variables (forloop.Counterwithforloop.Revcounter)InforIn the loop, you can also access some special built-in variables that provide information about the current loop state, which is particularly useful for customizing styles:

• forloop.Counter: The current loop iteration number, starting from 1.
• forloop.Revcounter: The remaining number of elements in the current loop.
• forloop.First: If the current is the first element of the loop, then it is True.
• forloop.Last: If the current is the last element of the loop, then it is True.

Having mastered these basic tools, we can start building various practical conditional display scenarios.

Practice Exercise: Flexible Use of Conditional Display

Here are some common scenarios and their implementation methods:

Scenario one: Set different styles for odd/even rows

To make the data list more readable, we often need to apply different background colors or borders to odd and even rows.

Implementation method:Utilizeforloop.CounteranddivisiblebyFilter (used to determine if it can be divided evenly).

{% for item in archives %}
    <div class="list-item {% if forloop.Counter|divisibleby:2 %}even-row{% else %}odd-row{% endif %}">
        <h3>{{ item.Title }}</h3>
        <p>{{ item.Description }}</p>
    </div>
{% endfor %}

here,forloop.Counter|divisibleby:2It will check if the current line number is even. If it is even, then applyeven-rowclass; otherwise applyodd-rowClass.

Scenario two: highlight the first and last elements of the list

Sometimes, you may need to add special visual effects to the first or last element of a list, such as 'latest' or 'recommended' tags.

Implementation method:Utilizeforloop.Firstandforloop.Last.

{% for item in archives %}
    <div class="list-item {% if forloop.First %}first-highlight{% elif forloop.Last %}last-special{% endif %}">
        {% if forloop.First %}
            <span class="badge new-badge">最新</span>
        {% endif %}
        <h3>{{ item.Title }}</h3>
        <p>{{ item.Description }}</p>
    </div>
{% endfor %}

This code will add to the first element of the listfirst-highlightAnd the “Latest” badge; add to the last elementlast-specialClass.

Scenario three: Display different content or style based on specific data values

If you want to display or hide content based on the article ID, category name, or a specific field value, or change the style, this is the most commonly used conditional judgment.

Implementation method:Directly compare the attribute values of data objects.

`twig {% for item in archives %}

<div class="list-item">
    {% if item.