As a senior CMS website operation personnel, I know that the details of content presentation are crucial for user experience and website SEO.Page navigation is one of the fundamental and key 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 elegantly display pagination navigation on the list page of Anqi CMS, such as article lists, search result pages, and so on.

An overview of the pagination mechanism in Anqi CMS

In Anqi CMS, implementing pagination is intuitive and efficient.The built-in template tags provide powerful flexibility, allowing us to easily paginate different types of content lists.Whether it is articles, products, documents under tags, or even comment lists, Anqi CMS unifies thetype="page"Parameter coordinationlimitProperties, to indicate that the list label generates a paginated dataset. When the list label is configured astype="page"It will divide the data, and pass all the metadata required 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: Pagination navigation label (pagination) usage

The core of implementing pagination navigation lies in the security provided by Anqi CMSpaginationtag. This tag is specifically used to receive the dataset after pagination processing and render it into a user-friendly pagination link group.

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

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

pagesThe variable contains rich properties that we can call in the template to build a complete pagination navigation:

  • TotalItemsTotal number of articles or records.
  • TotalPages: Total number of pages.
  • CurrentPage: The current page number.
  • FirstPageThe object pointing to the home page containsName(such as "Home") andLink(Home page URL).
  • LastPage: Points to the object at the end page, includingName(such as "End page") andLink(End page URL).
  • PrevPage: Points to the object on the previous page, includingName(such as "Previous page") andLink(URL of the previous page), if it is the first page, it is empty.
  • NextPage: pointing to the object of the next page, includingName(such as "Next page") andLink(URL of the next page), if it is the last page, it is empty.
  • Pages: An array that contains the page number objects in the middle part, each object also contains.Name(page number),Link(Page number URL) andIsCurrent(whether it is the current page) and other properties.

This is a standardpaginationTag rendering code example, it builds a complete pagination navigation that includes home page, previous page, middle page number, 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>

We can beautifully customize the pagination navigation based on the website's CSS style with the above code structure, 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 combine specific scenarios to demonstrate how to integrate the content list tags withpaginationTags are used together. These codes are usually placed in the corresponding list template files in the Anqi CMS template directory, such as the category list page will be{模型table}/list.html, the search page is insearch/index.html, the tag list page is intag/list.htmlortag/index.html.

Page pagination on the article list page

In a typical article category list page, we need to display the articles under the category and provide pagination browsing. This is usually done byarchiveListTag 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>

Page pagination on the search results page

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

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 result template file, we implement the pagination list 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 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. This can be done bytagDataListthe tag.

{# 在 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>

By the above example, we can see that Anq CMS maintains consistency and high reusability in the pagination handling of the content list. It only needs to be used in the content list tag.type="page"The parameter is introduced subsequentlypaginationTags can easily implement a fully functional pagination navigation on various list pages. This modular design greatly simplifies the template development and content management workflow.

Frequently Asked Questions (FAQ)

Why is my pagination navigation not displayed or displayed incorrectly?

First, make sure that you have content list tags such asarchiveList/tagDataListCorrectly set intype="page"Parameter. This is the key to enabling pagination functionality. If this parameter is missing, the list label will not generate the data required for pagination. Next, checklimitWhether the parameter is set properly, it defines how many records are displayed per page. If the total number of records does not exceedlimitthe value, pagination navigation will naturally not appear. Finally, checkpaginationthe variable name in the tag (for examplepagesDoes it match the pagination data variable name generated inside the list tag. Also, please check if the custom CSS is applied correctly in the template.

Can I customize the style and structure of the pagination navigation?

Of course. The Anqi CMS providespaginationThe tag 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 %}freely write HTML code and combinepagesproperties of the variables (such aspages.CurrentPage/item.Link/item.IsCurrentBuild pagination navigation that conforms to your website design style.By adding a custom CSS class, you can implement various styles from simple number pagination to complex navigation including 'First page', 'Last page', and more.

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

The default pseudo-static rules of AnQi CMS have optimized the pagination, usually generating such as/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 of/page/2This usually needs to be configured in the function management -> pseudo-static rules in the AnQi CMS backend. Pseudo-static rules support defining URL structures through variable combinations, such as pagination page numbers can be passed through(-{page})The form of the pseudo-static rule is configured. Please modify the pseudo-static rule with caution, incorrect configuration may lead to the inability to access the page.