As an experienced website operations expert, I know the importance of content presentation for user experience and information delivery.In such an efficient and flexible content management system as AnQiCMS, mastering its powerful template tag functions is the key to our refined content operation.{% for ... in ... reversed %}Look at how it plays a role in the reverse iteration of the data list.

Advanced development of AnQi CMS template: Easily master the secrets of reverse iteration of data lists.

How to efficiently and flexibly display website data in today's increasingly rich digital content is a challenge that every website operator needs to face.Auto CMS provides great convenience with its high-performance architecture based on the Go language and excellent support for Django template engine syntax.It allows us to present backend data to the frontend page in various ways that are in line with business logic and user habits through concise and intuitive template tags.

Data list traversal is one of the most common operations in template development.Whether it is an article list, product display, user comments, or various dynamic data, we need to present them one by one through loop structures.{% for ... in ... %}Looping tags, they can easily iterate over any iterable data collection, such asarchiveList(Document List),categoryList(Category list) data for tags. Usually, these list data will be sorted according to the default order of the database (such as ascending order by ID) or the sorting rules explicitly specified in the tags (such asorder="id desc"Indicates ID in descending order for traversal.

However, in some specific content operation scenarios, we may need to display the list data we have obtained in reverse.For example, we may need to display the "earliest published" articles instead of the default "latest published"; or in the comment section, although the data itself is stored in chronological order, we hope to present it in reverse chronological order (latest comments at the top) on the frontend.At this point, if the database query logic is modified again, it may increase unnecessary complexity and even fail to meet the requirements of other modules for data order.reversedThe modifier comes into play, acting like a magic switch that instantly reverses the display order of the data list.

UnveilingreversedModifier: Magic for reverse traversal

{% for ... in ... reversed %}the tag inreversedIt is a powerful modifier, its function is very direct:It willinreverse the traversal order of the data set behind the keyword from the default forward to reverse.This means, if your data list was originally sorted in ascending order,reversedAfter that, it will start traversing from the last element of the list until the first element; conversely, if the data list itself is in descending order,reversedIt will then start traversing from the first element (which is the smallest at this point).

The introduction of this modifier greatly enhances the flexibility of the front-end template, allowing us to meet various content display needs simply by modifying the template code without touching the backend data query logic.It operates on the dataset that has already been fetched from the backend and passed to the template engine, therefore it does not impose any additional burden on the database query itself.

Application scenarios and code examples

Let's feel it through several specific examples.reversedThe convenience and practicality of the modifier. Suppose we have a list of article data, through{% archiveList articles with type="list" limit="5" order="id asc" %}we obtained 5 articles sorted by ID from small to large (i.e., from early to late).

1. Default or specified order traversal (sorted by ID in ascending order, i.e., the earliest articles first):

<div class="article-list">
    <h3>按发布顺序显示（最早的文章在前）</h3>
    {% archiveList articles with type="list" limit="5" order="id asc" %}
        {% for article in articles %}
            <p>{{ forloop.Counter }}. {{ article.Title }} - 发布时间: {{ stampToDate(article.CreatedTime, "2006-01-02") }}</p>
        {% empty %}
            <p>暂无文章内容。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

This code will display articles by ID from small to large, i.e., the earliest published articles at the top.

2. UsereversedPerform reverse traversal (obtain by ID in ascending order, but display with ID in descending order, so the earliest article is at the end):

<div class="article-list-reversed">
    <h3>按反向发布顺序显示（最早的文章在后）</h3>
    {% archiveList articlesReversed with type="list" limit="5" order="id asc" %} {# 假设我们获取到的数据仍然是ID升序 #}
        {% for article in articlesReversed reversed %} {# 这里加入了 reversed 修饰符 #}
            <p>{{ forloop.Counter }}. {{ article.Title }} - 发布时间: {{ stampToDate(article.CreatedTime, "2006-01-02") }}</p>
            {# 您可以使用 forloop.Revcounter 来获取倒序的计数，例如： #}
            {# <p>倒数第 {{ forloop.Revcounter }}. {{ article.Title }}</p> #}
        {% empty %}
            <p>暂无文章内容。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

Now, even though the data we get from the backend is in ascending order by ID,reversedThe modifier's role, the article list displayed on the page will be sorted in descending order of ID.That is to say, the first article in the list is now the last article originally obtained, and so on.

Application scenarios example:

  • Historical review column:When you want to create a page for 'Website Development Timeline' or 'Historical Event Review', you may wish to display it in chronological order (from the distant past to the recent past). If your data is defaulting to the most recent at the front, then after obtaining the data, you should addreversed.
  • Product clearance/old model display:On some promotional or product archive pages, you may need to prioritize the display of old model products.reversedThis can help you quickly meet this need.
  • Comment list sorting adjusted: Even though many comment systems default to showing the latest comments at the top, but sometimes in order to provide a different reading experience, or when the backend data is sorted in chronological order by default, you can usereversedEasily switch the display order.

Passforloop.Counter(Forward counting) andforloop.Revcounter(Reverse counting), you can better control the numbering or style of list items, which is more convenient when you usereversedIt is especially useful when performing reverse traversal, as it can help you verify whether the data display order meets your expectations.

Attention Points and **Practice

When usingreversedThere are a few points to note when using modifiers:

  • Data source and sorting: reversedIt modifies the currentforThe collection being iterated over. This means it is when the data isarchiveListAfter the tags are obtained and prepared, the reversal is performed. Therefore, if you have strict requirements for the original sorting of the data, it is best to do it inarchiveListWhy