How to use the `archiveList` tag to sort and display the article list by views or publication time?

How efficiently to display and organize content in website operation often directly relates to user experience and the propagation effect of content.AnQiCMS provides a series of powerful and flexible template tags, allowing content managers to easily control the display of articles.Today, let's talk about how to usearchiveListTags, articles are displayed in order of their views or publication time.

UnderstandingarchiveListTag

archiveListThe tag is a core tool in AnQiCMS used to retrieve and display article lists.It can filter articles based on various conditions and sort them in the way you expect.Whether it is the latest news of building the homepage or the hot article recommendations on the category page,archiveListAll of them can provide strong support.

While usingarchiveListAt this time, you will usually see the following structure:

{% archiveList 变量名称 with 参数="值" %}
    {% for item in 变量名称 %}
        {# 这里是每篇文章的显示内容 #}
    {% endfor %}
{% endarchiveList %}

Among them,变量名称Is the list variable name you customize,参数="值"It is the key to controlling the behavior of the list. The focus of this article is onorderthis parameter.

Sorted by publish time: Display the latest articles

On many websites, visitors hope to see the latest content published, especially on news, blog, or technology sharing websites.AnQiCMS provides a concise way to achieve this.

Sort articles by publication time in reverse order (i.e., the most recent ones first), you canarchiveListUsed in tagsorder="id desc"In AnQiCMS design, the article ID is auto-incrementing, usually, the larger the ID means the later the article was published.

For example, if you want to display the latest 5 articles on the homepage:

{# 假设这是您的网站首页，显示最新的5篇文章 #}
<div class="latest-articles">
    <h3>最新发布</h3>
    <ul>
        {% archiveList latestArticles with type="list" limit="5" order="id desc" %}
            {% for article in latestArticles %}
                <li>
                    <a href="{{ article.Link }}">{{ article.Title }}</a>
                    <span class="publish-date">发布于: {{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
                </li>
            {% empty %}
                <li>暂无最新文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

If your list requires pagination, for example, on the article category page, displaying 10 articles per page, and sorted by publication time:

{# 假设这是文章分类页，每页显示10篇最新文章 #}
<div class="category-list">
    <h3>分类最新文章</h3>
    <ul>
        {% archiveList latestPaginated with type="page" limit="10" order="id desc" %}
            {% for article in latestPaginated %}
                <li>
                    <h4><a href="{{ article.Link }}">{{ article.Title }}</a></h4>
                    <p>{{ article.Description|truncatechars:100 }}</p>
                    <span class="publish-info">发布于: {{ stampToDate(article.CreatedTime, "2006-01-02 15:04") }}</span>
                </li>
            {% empty %}
                <li>该分类下暂无文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>

    {# 分页标签需要配合 type="page" 使用 #}
    <div class="pagination-controls">
        {% pagination pages with show="5" %}
            {# 这里是分页的渲染代码，例如首页、上一页、页码列表、下一页、尾页 #}
            {% if pages.FirstPage %}<a class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>{% endif %}
            {% if pages.PrevPage %}<a class="page-item" href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
            {% for item in pages.Pages %}<a class="page-item {% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>{% endfor %}
            {% if pages.NextPage %}<a class="page-item" href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
            {% if pages.LastPage %}<a class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">尾页</a>{% endif %}
        {% endpagination %}
    </div>
</div>

here,type="page"TellarchiveListThis is a pagination list that needs to be coordinatedpaginationTags to generate page numbers and navigation.

Sorted by views: Display popular articles.

In addition to the latest content, popular articles are also important elements in attracting visitors. By displaying the articles with the highest views, you can help new visitors quickly understand the精华 content of the website.

Sort articles by the number of views in descending order (i.e., the highest number of views first), you can do it byarchiveListUsed in tagsorder="views desc".

For example, display 5 popular articles on the homepage:

{# 假设这是您的网站首页，显示最热门的5篇文章 #}
<div class="popular-articles">
    <h3>热门文章</h3>
    <ul>
        {% archiveList popularArticles with type="list" limit="5" order="views desc" %}
            {% for article in popularArticles %}
                <li>
                    <a href="{{ article.Link }}">{{ article.Title }}</a>
                    <span class="view-count">浏览量: {{ article.Views }}</span>
                </li>
            {% empty %}
                <li>暂无热门文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

If your popular article list also needs pagination:

"`twig {# This is the popular article category page, displaying 10 popular articles per page #}

<h3>分类热门文章</h3>
<ul>
    {% archiveList popularPaginated with type="page" limit="10" order="views desc" %}
        {% for article in popularPaginated %}
            <li>
                <h4><a href="{{ article.Link }}">{{ article.Title }}</a></h4>
                <p>{{ article.Description|truncatechars:100 }}</p>
                <span class="view-info">浏览量: {{ article.Views }}</span>
            </li>
        {% empty %}
            <li>该分类下暂无热门文章。</li>
        {% endfor %}
    {% endarchiveList %}
</ul>

{# 分页标签 #}
<div class="pagination-controls">
    {% pagination pages with show="5" %}
        {# 分页渲染代码与上述相同