As a senior CMS website operation person, I know that the details of content presentation are crucial for user experience and website SEO.Page navigation is one of the fundamental and critical components, which not only helps users efficiently browse a large amount of content but also allows search engines to better crawl and index website information.Today, I will elaborate on how to implement and elegantly display pagination navigation on the list page of AnQi CMS, such as article lists and search results pages.

Anqi CMS pagination mechanism overview

In Anqi CMS, implementing pagination is intuitive and efficient.The system built-in template tags provide powerful flexibility, allowing us to easily paginate through lists of different types of content.type="page"Parameters work togetherlimitProperties, to indicate the list label generates a paged dataset. When the list label is configured astype="page"When it is triggered, it will divide the data and pass all the required metadata for pagination (such as total number of pages, current page number, previous and next page links, etc.) to the special pagination navigation tag for rendering.This design decouples data acquisition with pagination display logic, making the template code clearer and easier to maintain.

Core: Paged navigation label (pagination) usage

The core of implementing pagination navigation lies in the security provided by the CMS.paginationThis tag is specifically used to receive paginated data sets and render them into user-friendly pagination link groups.

The usage syntax of this label is as follows:{% pagination pages with show="5" %}.

Among them,pagesIt is a variable name defined by us, which carries all the data related to pagination.showThe parameter is optional, it determines how many page buttons are displayed in the pagination navigation, for exampleshow="5"It will display 5 page numbers around the current page number. Another advanced parameterprefixAllow URL pattern of page number redefinition, but in most cases, the pseudo-static rules of the security CMS can handle it well, without manual setting.

pagesThe variable contains rich properties, which we can call in the template to build a complete pagination navigation.

  • TotalItems: Total number of articles or records.
  • TotalPages: Total number of pages.
  • CurrentPage：The current page number being accessed.
  • FirstPage：points to the home object, includingName(such as "Home") andLink(home URL).
  • LastPage：points to the end object, includingName(such as “last page”) andLink(end page URL).
  • PrevPage：指向上一个页面的对象，包含Name（如“Previous Page”）和Link（Previous Page URL），如果当前是第一页则为空。
  • NextPage：指向下一个页面的对象，包含Name(such as “next page”) andLink(next page URL), if it is the last page, it is empty.
  • Pages: an array that contains page number objects in the middle part, each object also includesName：(page number),Link(Page URL) andIsCurrent(Whether it is the current page) and other properties.

Below is a standardpaginationa tag rendering code example, which builds a complete pagination navigation including home page, previous page, middle page numbers, next page, and end page:

<div class="pagination-container">
    {% pagination pages with show="5" %}
    <ul class="pagination">
        {# 显示总信息，例如总条数、总页码数、当前页码 #}
        <li>总计：{{pages.TotalItems}}条，共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>

        {# 首页链接 #}
        <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 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>

Through the above code structure, we can flexibly beautify pagination navigation based on the website's CSS style, providing intuitive user interaction.

Pagination practice on different list pages

The implementation of pagination navigation is closely integrated with the content list. Below, we will demonstrate how to combine the content list tags with specific scenarios.paginationLabel usage. This code is usually placed in the corresponding list template file in the security CMS template directory, for example, the category list page will be{模型table}/list.html, the search page issearch/index.html, the tag list page istag/list.htmlortag/index.html.

The article list page pagination

In a typical article category list page, we need to display the articles under this category and provide pagination browsing. This is usually done througharchiveListLabel implementation.

{# 在 {模型table}/list.html 模板文件中 #}
<div class="article-list-container">
    {% archiveList archives with type="page" limit="10" %} {# type="page" 启用分页，limit="10" 每页显示10篇文章 #}
        {% for item in archives %}
        <article class="article-item">
            <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
            <p>{{item.Description}}</p>
            <div class="meta">
                <span>发布时间: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>浏览量: {{item.Views}}</span>
            </div>
        </article>
        {% empty %}
        <p>当前分类下暂无文章。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

{# 紧随其后放置分页导航 #}
<div class="pagination-area">
    {% pagination pages with show="5" %}
        {# 这里放置上面提供的标准分页导航代码 #}
        <ul class="pagination">
            {# ... (分页链接代码) ... #}
        </ul>
    {% endpagination %}
</div>

The search results page pagination

The search results page is another common scenario that requires pagination. After users enter keywords to search, the results are usually very long and need to be displayed in pages. The Anqi CMS'sarchiveListTags support throughqParameter receives the search keyword. If the URL already containsq=关键词Query parameters,archiveListIntype="page"mode will automatically read and apply.

Firstly, we usually have a search form:

{# 搜索表单，通常放置在公共头部或侧边栏 #}
<form method="get" action="/search"> {# 假设搜索结果页的URL是 /search #}
    <input type="text" name="q" placeholder="请输入关键词" value="{{urlParams.q}}">
    <button type="submit">搜索</button>
</form>

Then, insearch/index.htmlIn the search results template file, we implement pagination lists like this:

{# 在 search/index.html 模板文件中 #}
<div class="search-results-container">
    <h2>搜索结果：{{urlParams.q}}</h2>
    {% archiveList archives with type="page" limit="10" %} {# q参数会自动从URL中获取 #}
        {% for item in archives %}
        <article class="search-result-item">
            <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
            <p>{{item.Description}}</p>
            <div class="meta">
                <span>发布时间: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            </div>
        </article>
        {% empty %}
        <p>抱歉，没有找到与“{{urlParams.q}}”相关的结果。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

{# 紧随其后放置分页导航 #}
<div class="pagination-area">
    {% pagination pages with show="5" %}
        {# 这里放置上面提供的标准分页导航代码 #}
        <ul class="pagination">
            {# ... (分页链接代码) ... #}
        </ul>
    {% endpagination %}
</div>

Pagination of the Tag document list page

When a user clicks on a tag (Tag), it will jump to the document list page under that tag. This page also needs pagination functionality to display all related articles.tagDataListtags to achieve this.

{# 在 tag/list.html 或 tag/index.html 模板文件中 #}
<div class="tag-documents-container">
    <h2>标签 “{% tagDetail with name="Title" %}” 下的文档</h2>
    {% tagDataList archives with type="page" limit="10" %} {# tagId 会自动从URL中获取 #}
        {% for item in archives %}
        <article class="tag-document-item">
            <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
            <p>{{item.Description}}</p>
            <div class="meta">
                <span>发布时间: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>浏览量: {{item.Views}}</span>
            </div>
        </article>
        {% empty %}
        <p>当前标签下暂无相关文档。</p>
        {% endfor %}
    {% endtagDataList %}
</div>

{# 紧随其后放置分页导航 #}
<div class="pagination-area">
    {% pagination pages with show="5" %}
        {# 这里放置上面提供的标准分页导航代码 #}
        <ul class="pagination">
            {# ... (分页链接代码) ... #}
        </ul>
    {% endpagination %}
</div>

Through the above examples, we can see that the Anqi CMS maintains consistency and high reusability in the pagination processing of the content list. It only needs to be used in the content list tag.type="page"Parameter, and then introducepaginationLabel it, and you can easily implement a functionally complete pagination navigation on various list pages. This modular design greatly simplifies the workflow of template development and content management.

Common Questions (FAQ)

Why is my pagination navigation not displayed, or displayed incorrectly?

First, make sure you have the content list tags (such asarchiveList/tagDataListauto. If the correct setting is made in “等）中type="page"The parameter. This is the key to enabling the pagination feature. If this parameter is missing, the list tags will not generate the data required for pagination. Secondly, checklimitParameter is set properly, it defines how many records are displayed per page. If the total number of records does not exceedlimitvalue, pagination navigation will not appear naturally. Finally, checkpaginationthe variable name in the label (for examplepages）Is the variable name of the pagination data generated internally consistent with the list tag. If you have used custom styles in the template, please also check whether the related CSS is applied correctly.

Can I customize the style and structure of pagination navigation?

Of course, the Anqi CMS providespaginationThe label is responsible for providing the data and links required for pagination, and the specific HTML structure and CSS style are completely controlled by the template developer. You can{% pagination pages with show="5" %}and{% endpagination %}between freely write HTML code, and combinepagesthe various properties of variables (such aspages.CurrentPage/item.Link/item.IsCurrentTo build pagination navigation that matches your website's design style.By adding a custom CSS class, you can achieve various styles ranging from simple numeric pagination to complex navigation including 'First Page', 'Last Page', and more.

How can I remove the page number from the URL or use a different naming convention for the page number?

The default rewrite rule of AnQi CMS has optimized the pagination, usually generating like/list-1.html//list-2.htmlSuch a SEO-friendly URL. If you have more advanced URL customization requirements, such as not displaying the page number of the first page, or using?p=2Instead/page/2This usually needs to be configured in the function management -> pseudo-static rules of the security CMS backend. Pseudo-static rules support defining URL structures through variable combinations, for example, page numbers for pagination.(-{page})The format in the pseudo-static rules is configured. Please be cautious when modifying the pseudo-static rules, as incorrect configuration may lead to inaccessible pages.