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.In order to highlight visually, achieve unique layout design, or give the first article higher attention, AnQiCMS provides flexible and powerful template tags to help us easily achieve this goal.

AnQiCMS uses a syntax similar to the Django template engine, when processing content lists, its loop traversal tagforplays a core role. When we usearchiveListTag to obtain the list of articles and utilizeforWhile looping through these articles, the system will provide an embedded one for each iterationforloopAn object, this object contains some very practical properties, including the judgment of the current loop positionCounter.

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.

Use this simple judgment, and 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 differentiate its style from the subsequent articles;Or, we can directly render a completely different HTML structure to achieve more diverse display effects.

The following is a specific example of how toarchiveListLoop and highlight the first article:

Assuming 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 usearchiveListThe tag got the first 5 articles.
• Next, inforThrough the loop, by{% if forloop.Counter == 1 %}Determine whether the current article is the first in the list.
• If it is the first one, we will add an external one for it.divto the elementfeatured-articleThis CSS class, and rendered a<h2>title, onefirst-imagecategory image and onefirst-desccategory description.
• If it is not the first one, then it is rendered according to the usual<h3>The title and paragraph tags are rendered.

This method allows you to customize the first article in the list according to your actual design needs, whether it is to modify the text content, add additional images, videos, or adjust the overall layout, all of which can be achieved through simple conditional judgments.In this way, the homepage or article list page of the website can show richer layers and better visual guidance effects.

Frequently Asked Questions (FAQ)

1. In addition toforloop.CounterAre there other ways to determine the last, or the second-to-last article in the loop?

Of course. In addition toforloop.Counter(Counting from 1), AnQiCMS'sforloopThe object also providesforloop.Revcounterproperty, it indicates how many iterations are left until the current loop ends (the last element'sRevcounterThe 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 the list (for example, the first 3 articles)?

You can useforloop.CounterPerform a range judgment. Simply change the condition to{% if forloop.Counter <= 3 %}It can be. In this way, the first three articles in the loop will be considered as "highlighted" articles, and you can apply the same special style or structure to them.

3. What are the main scenarios where this technique of highlighting the first article is applicable?

This skill is very practical in many content operation scenarios.For example, in the article list area on the homepage of the website, you can highlight the latest published or most important headline article to attract the user's 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 display, place the main product or new items in the most prominent position.In this way, it can effectively enhance the importance of content and the user experience.