How to control the style of each element within a loop in AnQiCMS templates (such as odd and even rows differently)?

In website content display, we often need to present data in a list form, such as article lists, product lists, or category navigation.To make the page more attractive or to better organize information, we often want each element in the list to have a different style, such as the common even-odd row background **division.AnQiCMS provides a powerful and flexible template system, making it very simple to achieve these fine style controls.

AnQiCMS's template system borrows the syntax of the Django template engine, which is characterized by the use of double curly braces for variables{{ 变量 }}Show it, while logical control (such as conditional judgment, loop, etc.) uses single curly brackets and the percentage sign{% 标签 %}To implement. Understanding this foundation, we can arrange content and style freely in the template.

The core of implementing style control for elements within a loop lies in cleverly utilizing.forThe loop tag comes with its own.forloopVariable. When we use in AnQiCMS template{% for item in collection %}such structure to traverse data set,forloopVariables are automatically generated and provide rich information about the current loop state. Among them,forloop.Counteris a very useful attribute that records the number of iterations of the current loop, starting from1Start incrementing. By this counter, we can accurately determine the position of the current element in the list, and then apply different styles.

Then, how to useforloop.CounterHow to implement alternating row style distinction? The principle is actually very simple: for odd rows,forloop.CounterThe remainder when 2 is divided by1(or not equal to),0), and for even rows it is,0. We can combineifThe logical judgment tag is used to dynamically add CSS classes to list items.

Suppose we have a list of articles.archivesI hope the background color of odd rows is light gray, and even rows are white. You can write the template code like this:

<ul class="article-list">
    {% for item in archives %}
    <li class="article-item {% if forloop.Counter % 2 != 0 %}odd{% else %}even{% endif %}">
        <a href="{{ item.Link }}">
            <h3>{{ item.Title }}</h3>
            <p>{{ item.Description }}</p>
        </a>
    </li>
    {% empty %}
    <li>目前还没有文章。</li>
    {% endfor %}
</ul>

In this code, we add<li>tags dynamicallyoddorevenwith class names. Then, in the CSS style file, we define the specific presentation of these class names, such as:

.article-item.odd {
    background-color: #f9f9f9; /* 浅灰色背景 */
}

.article-item.even {
    background-color: #ffffff; /* 白色背景 */
}

This way, wheneverforWhen rendering a list item in a loop, the system will always be based onforloop.CounterThe value to determine whether it is an odd item or an even item, and automatically adds the corresponding CSS class, thus realizing the differentiation of odd and even row styles.

In addition to the control of odd and even rows,forloopVariables can also help us achieve more advanced styling needs. For example, you may want the first or last element of the list to have a special style.forloop.Counter == 1It can easily be judged that the first element isforloop.Revcounter == 1(forloop.RevcounterThe number of remaining elements starting from the end of the list can then determine the last element.

<ul class="product-grid">
    {% for product in products %}
    <li class="product-card
        {% if forloop.Counter == 1 %}first-item{% endif %}
        {% if forloop.Revcounter == 1 %}last-item{% endif %}
        {% if forloop.Counter % 3 == 0 %}third-column{% endif %}">
        <img src="{{ product.Thumb }}" alt="{{ product.Title }}">
        <h4>{{ product.Title }}</h4>
    </li>
    {% endfor %}
</ul>

In this example, we not only controlled the style of the first and last elements, but also throughforloop.Counter % 3 == 0Controlled every third element (for example, in a three-column layout, special margins or separators may be needed).

When handling these dynamic styles, it is usually recommended to define the styles in an external CSS file and dynamically add them through class names.This can better separate content, structure, and presentation, which is convenient for maintenance and management.If certain special cases indeed require inserting style code directly into HTML tags, please note that you must use it.|safeA filter to prevent HTML content from being escaped, ensuring that styles can work correctly.

The AnQiCMS template system throughforloopSuch built-in variables enable us to finely control the element styles in loops. Whether it's simple alternating odd and even rows, or complex multi-condition style combinations, we can flexibly use them.forLoop and conditional judgment tags make your website interface more expressive.

Frequently Asked Questions (FAQ)

Q1: Besides alternating rows and the first and last elements, can I control the style of which elements within the loop?

A1: Besides odd and even rows and the first and last elements, you can alsoforloop.Countermake various complex conditional judgments based on the value. For example, you can apply a style every N elements.{% if forloop.Counter % N == 0 %}），or according toforloop.Counterto apply styles within a range（{% if forloop.Counter > 5 and forloop.Counter < 10 %}），even combining business logic to judge specific data attributes for style application.

Q2: If my list of data is very large, usingforloop.CounterDoes style judgment affect performance?

A2: For most common website application scenarios,forloop.CounterThe impact of calculation and conditional judgment on performance can be ignored.AnQiCMS template engine has been optimized at the bottom layer, these lightweight logic processing will not become a bottleneck for website performance.Compared to this, excessive database queries, unoptimized image resource loading, or complex JavaScript are the more important performance optimization points to focus on.

Q3: Why do CSS class names or inline styles sometimes not take effect when added dynamically?

A3: There may be multiple reasons why dynamic styles do not take effect.

1. CSS priority issueThe newly added class name may be overridden by other CSS rules with higher priority.Please check your CSS file and ensure that the new rule has sufficient priority or use a more specific selector.
2. Spelling errorSpelling errors in class names or style properties can cause styles not to apply. Please check the template code and the names in the CSS file carefully.
3. |safeFilter missingIf you try to output a string containing HTML tags or CSS attributes directly in the template without using|safeA filter, so these strings may be escaped, causing the browser to be unable to parse them as valid HTML/CSS. Ensure that all dynamically generated HTML or style content is processed|safeby the filter.
4. Template logic error: CheckifIs the condition judgment correct, make sure that the correct class name has been generated under the expected conditions. You can confirm this by checking the element inspector in the browser developer tools.<li>Did the element add correctly?odd/evenOr other custom class names.