As an experienced website operations expert, I am well aware of the importance of content presentation for user experience and information communication.In AnQiCMS (AnQiCMS) such an efficient and flexible content management system, mastering its powerful template tag function is the key to our content精细化 operation.Today, let's delve deeply into a seemingly simple but extremely practical template tag modifier -{% for ... in ... reversed %}Look at how it plays a role in reverse traversal of the data list.

Advanced development of AnQi CMS template: Easily master the mystery of reverse traversal of data lists.

Today, with the rich digital content, how to efficiently and flexibly display website data is a subject that every website operator needs to face.AnQi 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 the backend data 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.The AnQi CMS template engine provides powerful{% for ... in ... %}Loop label, it can easily iterate over any iterable data collection, such asarchiveList(Document list),categoryList(Category list) data returned by tags. By default, these list data are usually sorted according to the database's default order (such as ID in ascending order) or the sorting rules we specify in the tags (such asorder="id desc"Descending ID is traversed.

However, in certain specific content operation scenarios, we may need to display the list data we have obtained in reverse order.For example, we may need to display the article with the earliest release, rather than the default latest release;Or in the comments section, although the data is stored in chronological order, we want to display it in reverse chronological order on the frontend, with the latest comments at the top.At this point, if the database query logic is modified again, it may increase unnecessary complexity, and may even not meet the needs of other modules for data order. At this time,reversedThe modifier comes into play, like a magic switch, instantly reversing the order of the data list display.

RevelationreversedModifier: The magic of reverse traversal.

{% for ... in ... reversed %}in the labelreversedis a powerful modifier, its function is very direct:It will changeinthe 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, you would addreversedAfter that, it will start traversing from the last element of the list until the first element; conversely, if the data list is already in descending order,reversedIt will 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 the diverse content display needs simply by modifying the template code without touching the back-end data query logic.It operates on a dataset that has already been retrieved from the backend and passed to the template engine, therefore it does not impose any additional burden on the database query itself.

Actual application scenarios and code examples

Let's feel it through a few specific examples.reversedThe convenience and practicality of modifiers. Suppose we have a list of article data, through{% archiveList articles with type="list" limit="5" order="id asc" %}obtained 5 articles sorted by ID (i.e., from the earliest to the latest publication time).

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 in ascending order, i.e., the earliest published articles first.

2. UsereversedPerform a reverse traversal (obtained in ascending order by ID, but displayed with ID in descending order, that is, 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 of ID, becausereversedThe 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 one obtained from the data, and so on.

Examples of application scenarios:

  • Historical Review Column:When you want to create a 'Website Development Timeline' or 'Historical Event Review' page, you may want to display the information in chronological order (from the distant past to the recent past). If your data is defaulting to the most recent at the front, then you need to add the data after obtaining itreversedJust do it.
  • Product clearance/old model display:On some promotional or product archive pages, you may need to prioritize the display of old model products,reversedwhich can help you quickly meet this need.
  • Comment list sorting adjustment:Although many comment systems default to the latest comments at the top, but sometimes in order to provide a different reading experience, or when the backend data is defaulting to chronological order, you can usereversedEasily switch the display order.

Byforloop.Counter(Count up) andforloop.Revcounter(Count down), you can better control the numbering or style of list items, which is useful when you usereversedIt is particularly useful when traversing in reverse, as it can help you verify whether the display order of the data meets expectations.

Cautionary notes and **practice

While usingreversedThere are several points to note when using modifiers:

  • Data source and sorting: reversedIt modifies the currentforThe collection being traversed. This means, it is when the data isarchiveListAfter the tags are obtained and prepared, they are then reversed. Therefore, if you have strict requirements for the original sorting of the data, it is best to do it inarchiveListetc