How to implement user-friendly pagination navigation display for the article list?

The article list is the core display area of the website content, its user experience directly affects the visitor's stay time and willingness to revisit.When the number of articles is large, a reasonable page navigation design is particularly important.AnQiCMS (AnQiCMS) provides powerful and flexible template tags, helping us easily implement user-friendly article list pagination functions, making content management and display more efficient.

Core feature analysis: Anqi CMS article list and pagination mechanism

In Anqi CMS, the implementation of pagination for article lists mainly relies on two core template tags: archiveListandpagination.archiveListresponsible for retrieving article data from the database and organizing it into a list suitable for template rendering; whereaspaginationthen based onarchiveListThe data provides various links and information required for pagination navigation. Combined with them, it can build a complete and style-controllable article list pagination display.

archiveListThe tag can not only obtain the usual article list but also handle various scenarios such as related articles, search results, etc. When we need to display pagination, we just need to specifytype="page"The parameter, AnQi CMS will automatically handle the current page number, total number of pages, and other data for subsequent pagination tags.

paginationTags focus on generating pagination navigation.It provides rich properties such as the total number of articles, total number of pages, current page number, and links and statuses to the first page, previous page, next page, last page, and middle page numbers, allowing us to finely control the display logic of pagination navigation.

Step 1: Get the pagination article list data

First, we need to use in the template filearchiveListLabel to retrieve the data of articles that need to be displayed in pagination. Suppose we want to display articles under a certain category on a page, showing 10 articles per page, and enable pagination, the code would be something like:

<div class="article-list-container">
    {% archiveList archives with type="page" limit="10" categoryId="1" %}
        {% for item in archives %}
            <article class="article-item">
                <h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
                <p class="article-meta">
                    发布于：{{stampToDate(item.CreatedTime, "2006-01-02")}}
                    浏览量：{{item.Views}}
                </p>
                <p class="article-description">{{item.Description}}</p>
                <a href="{{item.Link}}" class="read-more">阅读全文 &raquo;</a>
            </article>
        {% empty %}
            <p>当前分类下还没有任何文章。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

In this code block,archiveListThe tag assigns the list of articles obtainedarchivesto the variable. The key istype="page", it tells the system that we need to enable pagination mode;limit="10"which limits the number of articles displayed per page;categoryId="1"Specified the article we want to get under the category with ID 1.forIn the loop, we can display the detailed information of each article byitem.Title/item.Linketc.{% empty %}The block handles the prompt information when the article list is empty, improving the user experience.

Step 2: Build user-friendly pagination navigation display.

After the article list data is retrieved, the next step is to usepaginationtags to create pagination navigation. This tag usually followsarchiveListthe tag and usearchiveListGenerated pagination data to render navigation elements. Here is a common pagination navigation structure:

<nav class="pagination-nav">
    {% pagination pages with show="5" %}
        <span class="pagination-info">总计 {{pages.TotalItems}} 篇文章，共 {{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页</span>
        <ul class="pagination-links">
            {# 首页链接 #}
            {% if pages.FirstPage %}
                <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                    <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
                </li>
            {% endif %}

            {# 上一页链接 #}
            {% 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 %}

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

in thispaginationTagged,pagesThe variable contains all pagination-related information.show="5"The parameter indicates that up to 5 page number buttons can be displayed before and after the current page to avoid confusion caused by too many page numbers. We usepages.TotalItems/pages.TotalPagesandpages.CurrentPageto display the total pagination information.

What's more, by usingpages.FirstPage/pages.PrevPage/pages.NextPageandpages.LastPagePerform a conditional judgment ({% if ... %}We can intelligently display or hide navigation buttons such as 'Home', 'Previous Page', 'Next Page', 'End Page' to ensure they only appear when needed.{% for item in pages.Pages %}The loop is used to iterate over the middle page number buttons and according toitem.IsCurrentThe attribute adds to the current page numberactiveThe class to highlight it through CSS, enhancing user recognition.

Integration and Optimization: Enhance User Experience

Place the above two parts of code on the same page template (for examplearticle/list.htmlorsearch/index.htmlIn this way, you can implement pagination for the article list.To make the pagination navigation truly user-friendly, in addition to the above logical implementation, it is also necessary to combine CSS styles for beautification.pagination-linksAdd padding, border, background color, and other properties to the list items andactiveSet a prominent color so that users can identify the current page at a glance.

This label-based design of AnQi CMS decouples data acquisition and pagination logic, making the template code clear and easy to understand, and also more convenient for later maintenance and modification.Whether it is a blog with frequent content updates or an e-commerce website with a large number of products, it can provide visitors with a smooth and intuitive browsing experience in this way.

Frequently Asked Questions (FAQ)

1. How to adjust the number of articles displayed per page?You can modify byarchiveListin the labellimitParameters to adjust the number of articles displayed per page. For example, settinglimit="10"changed tolimit="20"will allow 20 articles to be displayed per page.

2. How to implement pagination on the search results page?Of Security CMSarchiveListThe tag is intype="page"In mode, it will automatically identify the parameters in the URL.qAs search keywords. Therefore, you do not need to configure extra, just make sure the name of the keyword parameter submitted in the search form is.qand then inarchiveListUsed in tagstype="page"You can implement pagination of search results. If you need to specify a search keyword, you can also inarchiveListthe tag throughq="您的关键词"Set the parameters.

3. How can I only display the 'Previous Page' and 'Next Page' buttons without showing the specific page numbers?You can modify it.paginationLoop structure within tags. Just delete or comment out.{% for item in pages.Pages %}to `{% endfor %}`}]