When building a website, as the amount of content grows, the document list page becomes long, which not only affects the page loading speed but also makes it difficult for visitors to efficiently find the information they need.At this time, adding pagination to the document list has become a key link to improve user experience.paginationLabel,配合Document List LabelarchiveListcan easily achieve this goal, making your website content display more professional and easy to use.

Optimize user experience: AnQiCMSpaginationTag implementation of document list pagination display in detail

The effective organization and presentation of website content is one of the core elements for improving user experience.Faced with a vast amount of documents, articles, or product information, if you pile them all on a single page, it not only causes the page to load slowly but also greatly increases the difficulty of users searching for information, thereby affecting their willingness to browse.paginationTag, you can add professional pagination navigation to various document list pages, significantly improving user experience.

The core of pagination implementation:archiveListwithpaginationCoordination

To implement document list pagination in Anqi CMS, usually two core steps are required: first is to usearchiveListLabel to retrieve the data that needs to be displayed in pagination, and inform the system that this data needs to be paginated; next, then usepaginationLabel to render the actual pagination navigation links.

Step 1: Prepare paginated document data

While usingpaginationBefore labeling, you need to usearchiveListlabels to get the document list. The key is that you mustarchiveListto specifytype="page"This will inform the system to generate the data structure required for pagination of these documents. At the same time, throughlimitthe parameter to control how many documents are displayed per page, for examplelimit="10"means 10 records are displayed per page.

{# 假设我们想获取文章模型下的所有文档，每页显示10条 #}
{% archiveList archives with type="page" moduleId="1" limit="10" %}
    {# 在这里循环显示当前页的文档内容 #}
    {% for item in archives %}
        <div class="document-item">
            <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
            <p>{{item.Description|truncatechars:150}}</p>
            <span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            <span>浏览量: {{item.Views}}</span>
        </div>
    {% empty %}
        <p>抱歉，暂时没有更多文档。</p>
    {% endfor %}
{% endarchiveList %}

archiveListThe tag is intype="page"In mode, a namedpagespagination object is generated (if another variable name is not manually specified, it defaults topages), this object contains all the data related to pagination, forpaginationlabel usage

Second step: render pagination navigation

NowarchiveListReadypagesObject, you can usepaginationTag to render pagination navigation. This tag will depend onpagesThe data in the object is automatically generated with 'Home', 'Previous Page', 'Next Page', 'End Page', and page number links in the middle.

paginationThe most commonly used parameter is for the tagshowIt is used to control the maximum number of page number links displayed in the middle page area. For example,show="5"It will make the pagination navigation display up to 5 consecutive page numbers.

<div class="pagination-controls">
    {% pagination pages with show="5" %}
        <ul class="pagination-list">
            {# 首先，您可以选择显示一些总体信息，例如总条数、总页数和当前页码 #}
            <li class="pagination-info">总数：{{pages.TotalItems}}条，共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>

            {# 首页链接，通过 IsCurrent 判断是否为当前页，以便添加样式 #}
            <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
            </li>

            {# 上一页链接，仅当存在上一页时才显示 #}
            {% if pages.PrevPage %}
            <li class="page-item">
                <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
            </li>
            {% endif %}

            {# 中间页码链接，这是通过一个 for 循环来遍历 Pages 数组实现的 #}
            {% for item in pages.Pages %}
            <li class="page-item {% if item.IsCurrent %}active{% endif %}">
                <a href="{{item.Link}}">{{item.Name}}</a>
            </li>
            {% endfor %}

            {# 下一页链接，仅当存在下一页时才显示 #}
            {% if pages.NextPage %}
            <li class="page-item">
                <a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
            </li>
            {% endif %}

            {# 尾页链接 #}
            <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
            </li>
        </ul>
    {% endpagination %}
</div>

Combine the above two code snippets, and a functional and user-friendly pagination document list will appear in front of you.

pagesThe object contains rich information.

paginationwithin the tag,pagesAn object, which is a powerful data structure that contains almost all the information needed to build a complete pagination navigation:

  • TotalItemsTotal number of documents in the document list.
  • TotalPagesTotal number of pages in the document list.
  • CurrentPage: The current page number.
  • FirstPage: A link containing 'Home' (Link) and name (Name) as well as whether it is the current page (IsCurrent) object.
  • LastPageA link to the 'Last Page' contains (Link) and name (Name) as well as whether it is the current page (IsCurrent) object.
  • PrevPageA link to the 'Previous Page' contains (Link) and name (Name) object. If it is the first page, this object is empty.
  • NextPage: A link to the next page (Link) and name (Name) object. If it is the last page, this object is empty.
  • Pages: An array containing a list of middle page numbers. Each element in the array is also an object, containing the link of the page number (Link) and name (Name), which is the page number digit) and whether it is the current page (IsCurrent).

Use this information to flexibly customize the pagination navigation style and display logic according to your design requirements, for example, adding a highlight style to the current page, or hiding the corresponding buttons when there are no previous/next pages.

The value of enhancing user experience

BypaginationPage function implemented by tags, can bring significant user experience improvement to your website:

  1. Faster page loading speed:Pagination distributes a large amount of content across multiple pages, with each page loading only a portion of the data, thereby greatly reducing the loading time of a single page and improving the website's response speed.
  2. Clear navigation guidance:Page navigation clearly shows the user's position in the entire content list and the path to other pages, reducing the user's cognitive burden.
  3. Optimized content organization:Pagination makes the content logically coherent, allowing users to browse page by page, making it easier to understand and absorb information.
  4. Improve search engine friendliness:A reasonable pagination structure helps search engines better crawl and index website content, avoiding low crawling efficiency caused by duplicate content or overly large pages.

In short, the Anqi CMS'spaginationTags are an indispensable tool in content operations. They provide with concise syntax,