How to retrieve and display the article list in the template and control the number of articles displayed per page?

When using AnQiCMS to manage website content, it is an everyday need for operators to flexibly display article lists on the front-end page.Whether it is the latest dynamic on the homepage, the collection of articles under the category page, or the content aggregation page with pagination functionality, AnQiCMS provides powerful and easy-to-use template tags to help us achieve these functions.Today, let's delve into how to efficiently retrieve and display article lists in the AnQiCMS template and precisely control the number of articles displayed per page.

Core:archiveListTag, the 'scheduler' of content display

The core tool for displaying article lists in AnQiCMS templates isarchiveListThe tag is like an intelligent content scheduler that can filter out the target content from a large number of articles according to the conditions we set and present it in the way we expect.

We start with the most basic usage. If you just want to display a certain number of articles on the page, such as the latest 5 articles, you can use it like thisarchiveListTags:

{% archiveList archives with type="list" limit="5" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            <p>{{item.Description}}</p>
            <div>
                <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>阅读量：{{item.Views}}</span>
            </div>
        </a>
    </li>
    {% else %}
    <li>暂时没有相关文章。</li>
    {% endfor %}
{% endarchiveList %}

In this code block,archiveListTag throughtype="list"Specified the list type as a fixed list, andlimit="5"then explicitly tells the system to only retrieve the latest 5 articles.archivesis the variable name we give to the retrieved article list, in subsequentforIn the loop, we can display the detailed information of each article byitem.Title/item.LinkAccess the title, link, and other information of each article in this way.stampToDateThe tag is used to format the timestamp of the article into a readable date format.

Advanced:type="page"withpaginationTag to implement pagination of article lists

When your content is large and requires users to click on page numbers to browse more articles,archiveListwith the tag andpaginationthe combination of tags is particularly important.

first, archiveListtags need to betypethe parameter to"page"This will inform the system that the article list we expect to get is for pagination display, and the system will automatically handle the current page number and the total number of articles.

Next, we need to introducepaginationTags to generate page navigation.paginationThe label will be based onarchiveListProcessed pagination data, automatically generates 'Home', 'Previous page', 'Next page', and specific page number links.

Let us understand how they work together through a complete example:

{# 假设这是一个文章列表页，通过URL参数可传递分类ID或搜索关键词 #}

<div class="article-list-container">
    {% archiveList archives with type="page" limit="10" moduleId="1" %} {# 获取文章模型下每页10篇文章，准备分页 #}
        {% for item in archives %}
        <article class="article-item">
            <a href="{{item.Link}}">
                {% if item.Thumb %}
                <div class="article-thumb">
                    <img src="{{item.Thumb}}" alt="{{item.Title}}">
                </div>
                {% endif %}
                <div class="article-info">
                    <h3>{{item.Title}}</h3>
                    <p class="article-description">{{item.Description}}</p>
                    <div class="article-meta">
                        <span class="category-name">分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                        <span class="publish-date">发布于：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                        <span class="views">浏览：{{item.Views}}</span>
                    </div>
                </div>
            </a>
        </article>
        {% else %}
        <p class="no-content">当前分类下没有文章。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

{# 分页导航区域 #}
<div class="pagination-nav">
    {% pagination pages with show="5" %} {# 显示最多5个页码链接 #}
        {% if pages.TotalPages > 1 %} {# 只有当总页数大于1时才显示分页 #}
        <ul>
            {% if pages.FirstPage %}
            <li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
            {% endif %}

            {% if pages.PrevPage %}
            <li><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
            {% endif %}

            {% for pageItem in pages.Pages %}
            <li class="{% if pageItem.IsCurrent %}active{% endif %}"><a href="{{pageItem.Link}}">{{pageItem.Name}}</a></li>
            {% endfor %}

            {% if pages.NextPage %}
            <li><a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a></li>
            {% endif %}

            {% if pages.LastPage %}
            <li class="{% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a></li>
            {% endif %}
        </ul>
        <p>总共 {{pages.TotalItems}} 篇文章，当前第 {{pages.CurrentPage}} / {{pages.TotalPages}} 页。</p>
        {% endif %}
    {% endpagination %}
</div>

In this example:

  • archiveListlabel'slimit="10"Defined to display 10 articles per page.
  • moduleId="1"Ensure that we only retrieve the content with ID 1 (usually the article model).
  • pagination pages with show="5"Instruct the system to generate page navigation,pagesis the variable name we define for pagination data,show="5"This indicates that at most 5 page number links will be displayed in the middle section, and the excess part will be automatically omitted.
  • InpaginationWe make use of it within the tagpages.FirstPage/pages.PrevPage/pages.Pages(This is an array containing the middle page numbers,)pages.NextPageandpages.LastPageproperties, flexibly building a complete page navigation structure.pageItem.IsCurrentcan help us highlight the current page we are on.

By this combination, we can very conveniently create a fully functional, user-friendly article pagination list.

Enrich the article list:archiveListCommon parameters of the tag

In addition to controlling the display quantity and pagination,archiveListTags also support various parameters for refined filtering and sorting of articles, making your content display more diverse and accurate:

  • moduleId:When your AnQiCMS website has various content models such as articles and products, you canmoduleId="1"(article model ID) ormoduleId="2"(Product Model ID) to specify the list of articles under a specific model.
  • categoryId:Want to only display articles under a specific category,categoryId="10"(Category ID 10 can be used). You can also separate multiple category IDs with commas, for example,categoryId="1,3,5". If you willcategoryIdis set to"0"This means not to automatically read the current page category ID, which is very useful when you need to get the hot articles of the entire site.
  • order:The sorting method of the content can also be flexibly controlled.order="id desc"Indicates sorting by the latest release (ID descending),order="views desc"Indicates sorting by views from high to low,order="sort desc"Then, it is sorted according to the sorting value manually set in the background.
  • flag:By coordinating the recommended attributes of the background articles (such as头条[h], recommendation[c]), you canflag="h"to obtain a list of articles with the headline attribute.
  • q:on the search results page,qParameter