In AnQiCMS, how to implement pagination display for article lists?

In AnQiCMS, the pagination display of the article list is a very common and important feature in content operation.It not only makes it easier for visitors to browse a large amount of content, enhancing user experience, but also plays an indispensable role in Search Engine Optimization (SEO), helping search engines better crawl and index website content.

AnQiCMS as an efficient and customizable content management system, has taken this into full consideration from the beginning of its design. Therefore, implementing the pagination function of the article list is very intuitive and flexible. This is mainly due to its powerful template tag system, especiallyarchiveListandpaginationThese core tags.

核心标签：文章列表与分页

要在您的网站上展示文章列表并带有分页导航，您需要用到两个主要的模板标签：

  1. archiveListtagsThis tag is used to retrieve a list of articles (or other custom model content) from the database.When implementing pagination, we need to tell it to retrieve data in 'pagination mode' and specify how many items to display per page.
  2. paginationtags：这个标签则负责根据archiveListProvide the data to generate beautiful and complete pagination navigation links, including home page, previous page, next page, last page, and the page numbers in the middle.

Next, we will learn how to apply these tags in your AnQiCMS template.

Step 1: Prepare your template file

通常，文章列表页会对应您的某个分类页面，或者是一个专门的搜索结果页、标签页等。在EnglishCMS中，模板文件通常存放在/templateIn the directory where you have selected the template folder. For example, if you want to create a template for the list of articles in a category, it may be located in{模型table}/list.htmlfor example,article/list.html.

In these template files, you will use the syntax similar to Django template engine supported by AnQiCMS to write code.

Step 2: UsearchiveListTag to get article data

To implement pagination, you first need to usearchiveListtags to get the list of articles. The key is to settype="page"Parameter, this tells the system that you need paginated data, not all data listed at once. At the same time,limita parameter to define the number of articles displayed per page, for example,limit="10"This means 10 articles are displayed per page.

a basicarchiveListLabel usage may be like this:

{# page 分页列表展示 #}
<div>
{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            <div>{{item.Description}}</div>
            <div>
                <span>{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                <span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>{{item.Views}} 阅读</span>
            </div>
        </a>
        {% if item.Thumb %}
        <a href="{{item.Link}}">
            <img alt="{{item.Title}}" src="{{item.Thumb}}">
        </a>
        {% endif %}
    </li>
    {% empty %}
    <li>
        该列表没有任何内容
    </li>
    {% endfor %}
{% endarchiveList %}
</div>

In this example:

  • archiveList archives with type="page" limit="10"We define a variable namedarchivesvariable to store the list of article data, and specifies the pagination mode (type="page") and 10 items per page (limit="10").
  • {% for item in archives %}：“We traverse”}]archivesArray,itemvariable represents each article.
  • {{item.Link}}/{{item.Title}}/{{item.Description}}：These are common fields in the article, corresponding to the article link, title, and introduction. The AnQiCMS article model also provides rich fields such asViews（Views）、Thumb(thumbnail) for you to call.
  • {{stampToDate(item.CreatedTime, "2006-01-02")}}:CreatedTimeThe value is usually a timestamp, here we use the AnQiCMS built-instampToDateThe filter formats it into年-月-日date format, making the display more friendly.

If there are no articles under the current category,{% empty %}Label content will be displayed, telling visitors that “This list has no content”.

Step 3: UsepaginationLabel to build pagination navigation

InarchiveListBelow the label, followed by usingpaginationLabel, it will be based onarchiveListGet the pagination data, automatically generate pagination navigation.

    {# 分页代码 #}
    <div>
        {% pagination pages with show="5" %}
            {# 首页 #}
            <a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
            {# 上一页 #}
            {% if pages.PrevPage %}
            <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
            {% endif %}
            {# 中间多页 #}
            {% for item in pages.Pages %}
            <a class="{% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
            {% endfor %}
            {# 下一页 #}
            {% if pages.NextPage %}
            <a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
            {% endif %}
            {# 尾页 #}
            <a class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
        {% endpagination %}
    </div>

Here:

  • {% pagination pages with show="5" %}We define a variable namedpagesvariable to carry pagination information.show="5"The parameter indicates that up to 5 page number links can be displayed in the pagination navigation (excluding home page, previous page, next page, and last page), which helps to maintain the conciseness of the pagination navigation.
  • pagesThe variable contains rich pagination information, such as:
    • pages.FirstPage: Link and name of the home page.
    • pages.PrevPage: Link and name of the previous page, displayed only when the previous page exists.
    • pages.PagesAn array containing all the intermediate page link, we iterate through them.{% for item in pages.Pages %}By loop to display them one by one.
    • pages.NextPage: The link and name of the next page, displayed only when there is a next page.
    • pages.LastPage：End page link and name.
  • {% if pages.FirstPage.IsCurrent %}active{% endif %}:IsCurrentThe attribute can help you judge the current page number, so that you can add CSS styles to the current page, such as highlighting.

Combine these two tags, and your article list pagination feature will be basically completed.Don't forget to add appropriate CSS styles for pagination navigation to make it visually consistent with your website design.

Advanced Applications

  • Combined with filtering and search.:archiveListTags also supportqParameters are searched for keywords, and custom field filtering is achieved through URL query parameters (for example,moduleId/categoryId). When you use the search page or a list page with filtering conditions,type="page"whenpaginationThe tag will also intelligently retain these filter and search parameters to ensure the correctness of pagination links.
  • Sort control: ThroughorderParameters, you can control the sorting method of articles, such as by publication time,order="id desc"）or page views（order="views desc"）sorted by（
  • Flexible pseudo-static configuration：AnQiCMS provides a powerful pseudo-static rule management feature. You can customize the URL structure of pagination links, which is very beneficial for SEO.You can configure it in the "Feature Management" -> "Rewrite Rules" in the background.

Through these flexible tags and configuration options, AnQiCMS makes the pagination display of website content simple and efficient. Whether you are managing a small and medium-sized enterprise website, a self-media platform, or multi-site management, you can easily handle it and provide users with a smooth browsing experience.

Common Questions (FAQ)

1. Why doesn't my article list pagination show up?

This is usually due to several reasons:

  • archiveListTags not settype="page"Make sure yourarchiveListtags includetype="page"Parameter. If this parameter is not provided, the system will default to retrieving a list of data without pagination.paginationThe label cannot find pagination information to generate navigation.
  • archiveListandpaginationThe label variable name does not match.:paginationThe tag depends onarchiveListThe pagination data generated by the tag. Please check if two tags use the same variable name to pass data, for examplearchivesandpages.
  • The content is not sufficient to trigger paginationIf the number of your articles is less thanlimitThe number of articles displayed per page is set, or if there is only one page in total, the pagination navigation will not be displayed. Please ensure you have enough articles to test the pagination feature.

2. How to adjust the number of articles displayed per page and the number of pagination links?

  • **Adjust the number of articles displayed per page