How to use the `archiveList` tag to sort and display the article list by view count or publish time?

How to effectively display and organize content in website operation often directly relates to user experience and the effectiveness of content dissemination.AnQiCMS provides a series of powerful and flexible template tags, allowing content managers to easily control the display of articles.archiveListTags, sort and display the article list based on the article's page views or publishing time.

UnderstandingarchiveListtags

archiveListLabels are the core tools in AnQiCMS used for retrieving and displaying article lists.It can filter articles based on multiple conditions and sort them in the way you expect.archiveListAll of them can provide strong support.

When usingarchiveListWhen, you will usually see such a structure:

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

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

Sorted by publish time: display the latest articles

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

Sort by the publication time of the articles in descending order (i.e., the most recent first), you canarchiveListthe label useorder="id desc"In AnQiCMS design, the article ID is auto-incrementing, usually meaning the larger the ID, 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 needs pagination, for example, on the article category page, 10 articles are displayed 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"informarchiveListThis is a paginated list that requires配合paginationLabel to generate page numbers and navigation.

Sorted by views: display popular articles

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

To sort articles by view count in descending order (i.e., the highest view count first), you canarchiveListthe label useorder="views desc".

For example, displaying 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 articles list also needs pagination:

”`twig {# This is the popular articles 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" %}
        {# 分页渲染代码与上述相同