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循环, the specific attributes or states of the data.For example, odd and even rows in the list need different background colors, specific types of products need special marking, or when a field is empty, the corresponding area should be hidden.

English CMS with its flexible and powerful Django-like template engine makes these requirements simple and easy to handle. 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 judgments

Firstly, 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's an article list, product category, or navigation menu,fortags can help you access each element in the collection one by one. For example, you can use{% archiveList archives with type="page" limit="10" %}Retrieve the list of articles and then{% for item in archives %}iterate over these articles.

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

2. Conditional judgment tags ({% if ... %}SeriesThis is the key to implementing “conditionality”. Anqi CMS provides{% if 条件 %}/{% elif 其他条件 %}[else if abbreviation] and{% else %}Tags, allowing you to determine which content will be rendered and which styles will be applied based on the truth value of the expression. For example,{% if item.Thumb %}you can determine if 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 number, starting from 1.
• forloop.Revcounter: Current number of remaining elements in the loop.
• forloop.First: True if the current element is the first in the loop.
• forloop.Last: If it is the last element of the loop, then it is True.

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

Practice Exercise: Flexible Use of Conditional Display

Here are some common demand scenarios and their implementation methods:

Scenario 1: 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:2Will 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 element or the 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-highlightCategory and "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 condition judgment.

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

`twig {% for item in archives %}

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