When operating a website, effectively displaying the content list is a key factor in attracting visitors and enhancing user experience.For friends using AnQiCMS, the system provides very flexible and powerful template functions, which can easily meet various complex content display requirements.Today, let's discuss how to display the article list on the AnQiCMS website, and ensure that these articles are arranged in order from the most recent to the oldest in terms of publication time, while supporting friendly pagination.

AnQiCMS's template system adopts the syntax of Django template engine, which makes it very easy for content developers to get started. You will see tags (with{%and%}Packets）are used for controlling logic, while variables（with{{and}}Packets）are used for outputting data. Mastering these basic syntaxes, you can easily handle the content display of AnQiCMS.

Understand core tags:archiveListWith time sorting

The most core tag to display article lists in AnQiCMS is: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 precisely filter, sort, and display content.

To implement the descending order sorting by publication time, we need to pay attention toarchiveListTagsorderthe parameters. AnQiCMS internally stores the publication time field for each article, usuallyCreatedTime. Therefore, set it toorder="CreatedTime desc"This is what we want to achieve.descMeans descending. If we want the article to support pagination, we also need to.typeparameter settingspage.

In addition,CreatedTimeThe field is usually a timestamp, to make it display in a date format we are familiar with, we also need to use it in conjunction withstampToDatetemplate functions to format.

Step 1: Prepare the template file

First, 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.

Step 2: UsearchiveListTag to get article data

In your template file, we will usearchiveListLabel to pull article data. Here, we specify the retrieval of the article model (usuallymoduleId="1"Represents the article model, please refer to your backend configuration for details. All articles under this model are sorted in descending order of publication time.

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

In this code block:

  • archivesIt is a variable name defined by us, used to store the list of article 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 10 articles are displayed per page.

Third step: Loop through and format the article content.

After obtaining the article data, we need toforto iteratearchivesvariables to display the title, link, publication time, and other information 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,itemrepresenting the current article object being looped over.
  • {{ item.Link }}and{{ item.Title }}Output the article's link and title respectively.
  • {{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}UsestampToDateThe function willCreatedTimeThe format of “year-month-day hour:minute” for readability of timestamp.Please note,"2006-01-02 15:04"Is a date and time formatting template specific to Go language, representing参考时间, and cannot be changed arbitrarily..
  • {% empty %}A block is a very practical feature, whenarchivesThe list will display its content when it is empty, rather than an empty page.

Step 4: Add pagination feature (optional but strongly 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 label, 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:

  • pagesYespaginationThe variable automatically generated by the label containing pagination information.