How to judge and highlight the first article in the AnQiCMS article list loop?

In website content display, we often encounter the need to handle the first element of the article list specially.To highlight visually, achieve unique layout design, or give more attention to the first article, AnQiCMS provides flexible and powerful template tags to help us easily achieve this goal.

AnQiCMS uses syntax rules similar to Django template engine, and it loops through tags when handling content listsforplaying a core role. When we usearchiveListTag retrieval of article list, and utilizeforWhile iterating over these articles, the system will provide an integratedforloopThis object contains some very practical properties, including the judgment of the current loop position.Counter.

forloop.CounterThis property will start counting from 1, representing the current iteration of the loop. This means that whenforloop.CounterWhen the value is 1, we can determine that the article we are processing is the first article in the list.

Using this simple judgment, we can apply specific styles or structures to the first article in the template.For example, we can add a special CSS class to it to distinguish its style from subsequent articles; or, we can directly render a completely different HTML structure to achieve richer and more diverse display effects.

The following is a specific example of how toarchiveListHighlight the first article in the loop:

Suppose we want the first article in the list to have a more prominent title style and a special background, while subsequent articles use the standard display.

{% archiveList archives with type="list" limit="5" %}
    {% for item in archives %}
        <div class="article-item {% if forloop.Counter == 1 %}featured-article{% endif %}">
            {% if forloop.Counter == 1 %}
                <h2 class="first-title"><a href="{{item.Link}}">{{item.Title}}</a></h2>
                <img src="{{item.Logo}}" alt="{{item.Title}}" class="first-image">
                <p class="first-desc">{{item.Description}}</p>
            {% else %}
                <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
                <p>{{item.Description}}</p>
            {% endif %}
            <span class="read-count">浏览量：{{item.Views}}</span>
            <span class="publish-date">发布于：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
        </div>
    {% empty %}
        <p>暂无文章内容，请稍后再来。</p>
    {% endfor %}
{% endarchiveList %}

In this code block:

• We first usearchiveListLabel got the first 5 articles.
• Then, inforthe loop, through{% if forloop.Counter == 1 %}judging if the current article is the first one in the list.
• If it is the first one, we add an externaldivElement was addedfeatured-articleThis CSS class, and rendered a<h2>Title, afirst-imageCategory image and afirst-descCategory description.
• If not the first one, it is rendered according to the<h3>title and common paragraph tags.

This method allows you to deeply customize the first article in the list according to your actual design requirements, whether it's modifying the text content, adding additional images, videos, or adjusting the overall layout, all of which can be achieved through simple conditional judgments.This way, the homepage or article list page of the website can display more rich levels and better visual guidance effects.

Common Questions (FAQ)

1. Besidesforloop.CounterCan there be other methods to determine the last, or the nth from the last, article in a loop?

Of course. Besidesforloop.Counter(Starting from 1), AnQiCMS'sforloopobject also providesforloop.RevcounterA property, indicating how many more iterations are left until the end of the current loop (the last element),RevcounterThe value is 1). For example, to determine if it is the last article, you can use{% if forloop.Revcounter == 1 %}.

2. How can I highlight the first N articles in a list (e.g., the first 3 articles)?

You can useforloop.CounterPerform a range judgment. Just change the condition to{% if forloop.Counter <= 3 %}This is the translation: [You can apply the same special style or structure to them, as the first three articles in the loop are considered to be 'highlighted' articles.]

What are the main scenarios where this technique of highlighting the first article applies?

This trick is very practical in various content operation scenarios.For example, in the article list area on the homepage of the website, you can highlight the latest released or most important headline articles to attract users' attention; on the category list page, you can place the most popular or recommended articles at the top and beautify them; or in the product showcase, you can put the main products or new products in the most prominent position.In this way, the importance and user experience of the content can be effectively enhanced.