How to display the article list on the AnQiCMS website and support sorting by publish time in descending order?

When operating a website, efficiently displaying the content list is a key factor in attracting visitors and improving user experience.For friends who use AnQiCMS, the system provides very flexible and powerful template functions that can easily achieve various complex content display requirements.Today, let's discuss how to display the article list on the AnQiCMS website, and ensure that the articles are arranged in order from the most recent to the oldest, while also supporting friendly pagination features.

The AnQiCMS template system has borrowed the syntax of the Django template engine, making it very easy for content developers to get started. You will see tags (with{%and%}Packages are used to control logic, while variables (with{{and}}Packages are used to output data. Master these basic syntaxes, and you can easily handle the content display of AnQiCMS.

Understand the core tags:archiveListSorted by time

The most core tags to display the article list in AnQiCMS are:archiveList. It is specifically used to retrieve document data from websites, including articles, products, etc. This tag has a rich set of parameters that can help us accurately filter, sort, and display content.

To implement descending order sorting by publish time, we need to pay attention toarchiveListlabel'sorderthe parameters. AnQiCMS internally stores the publish time field of each article, usuallyCreatedTime. Therefore, it is set toorder="CreatedTime desc"can achieve the effect we want,descmeans descending. If we want the article to support pagination, we also need totypethe parameter topage.

In addition, sinceCreatedTimeThe field is usually a timestamp, in order to display it in a date format we are familiar with, we also need to usestampToDatetemplate functions for formatting.

Step 1: Prepare the template file

Firstly, you need to enter the template file directory of AnQiCMS. Usually, the article list is stored in a similartemplate/your_theme_name/article/list.htmlortemplate/your_theme_name/list.htmlThe position. If you are creating a new list page, you cantemplate/your_theme_name/create a new HTML file underblog_list.html.

Second step: usearchiveListTags retrieve article data

In your template file, we will usearchiveListTags to pull article data. Here, we specify the retrieval of the article model (usuallymoduleId="1"Representing the article model, please refer to your backend configuration for details) and list all articles in descending order of publication time.

{% archiveList archives with moduleId="1" type="page" order="CreatedTime desc" limit="10" %}
    {# 循环体将在第三步填充 #}
{% endarchiveList %}

In this code block:

• archivesThis is a variable name defined to store the article list data obtained.
• moduleId="1"Instruct the system to retrieve the content under the article model.
• type="page"Enable pagination mode, which prepares for adding pagination navigation later.
• order="CreatedTime desc"It is the key to sorting by published time in descending order.
• limit="10"It means that 10 articles are displayed per page.

Step 3: Loop through the article content and format the time

After obtaining the article data, we need toforLoop througharchivesvariables to display the title, link, and publishing time of each article.

{% archiveList archives with moduleId="1" type="page" order="CreatedTime desc" limit="10" %}
    {% for item in archives %}
    <article class="article-item">
        <h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
        <div class="article-meta">
            <span>发布时间：{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
            <span>浏览量：{{ item.Views }}</span>
            {# 您还可以显示文章简介、分类等信息 #}
            <p>{{ item.Description }}</p>
        </div>
    </article>
    {% empty %}
    <p>抱歉，目前没有找到任何文章。</p>
    {% endfor %}
{% endarchiveList %}

Here:

• {% for item in archives %}Traverse the article list,itemRepresents the current article object being looped over.
• {{ item.Link }}and{{ item.Title }}Outputted the links and titles of the articles separately.
• {{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}UsestampToDateThe function willCreatedTimeFormat the timestamp into a readable form of “Year-Month-Day Hour:Minute”.Please note,"2006-01-02 15:04"Is a date and time formatting template unique to the Go language, representing参考时间Cannot be changed arbitrarily.
• {% empty %}Block is a very practical feature, whenarchivesWhen the list is empty, it will display its content instead of an empty page.

Step 4: Add pagination functionality (optional but highly recommended)

If you have a large number of articles, the pagination feature will greatly enhance the user experience. AnQiCMS providespaginationtags, which can be seamlessly connected witharchiveListoftype="page"parameters.

In{% endarchiveList %}After the tag, add the following pagination code:

{# ... 文章列表循环结束 ... #}

<div class="pagination-container">
    {% pagination pages with show="5" %}
        {# 首页链接 #}
        <a class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
        {# 上一页链接 #}
        {% if pages.PrevPage %}
        <a class="page-link" href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
        {% endif %}
        {# 中间页码 #}
        {% for pageItem in pages.Pages %}
        <a class="page-link {% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
        {% endfor %}
        {# 下一页链接 #}
        {% if pages.NextPage %}
        <a class="page-link" href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
        {% endif %}
        {# 尾页链接 #}
        <a class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
    {% endpagination %}
</div>

Here:

• pagesIspaginationVariable automatically generated by the tag containing pagination information.