How to implement the pagination display function of AnQiCMS article list, as well as how to customize the pagination style and logic?

In content operation, the pagination display of the article list is a basic and critical function, which not only affects the user's browsing experience, but also is closely related to the performance and SEO performance of the website.AnQiCMS as an efficient and customizable content management system provides us with a flexible way to implement and beautify the pagination function of the article list.

Page through articles in AnQiCMS: easily master display and customization

Today with the rich content on websites, how to efficiently organize and display a large number of articles while ensuring a smooth user experience is a challenge that every operator needs to face.The pagination feature of the article list is the key to solving this problem.AnQiCMS as a modern CMS developed based on the Go language, with its concise and efficient architecture, provides us with an intuitive and powerful pagination display function for article lists, and allows for deep customization of its style and logic.

Implement basic pagination display for article lists

In AnQiCMS, to implement pagination for article lists, the core is to use its built-in template tags. We mainly use two tags: archiveListUsed to retrieve article data, as wellpaginationused to generate pagination navigation.

First, in your template file (such as, the article list pagearchive/list.htmlor category list pagecategory/list.htmlIn it, you can usearchiveListTag to retrieve articles that require pagination. This tag is very flexible, you can settype="page"parameters to tell the system that you need to get a paged list, while utilizinglimitParameters to specify the number of articles to display per page.

For example, if we want to display 10 articles per page, we can write the code like this:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <div class="article-item">
            <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
            <p>{{item.Description}}</p>
            <span class="date">{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            <span class="views">{{item.Views}} 阅读</span>
        </div>
    {% empty %}
        <p class="no-content">当前分类暂无任何文章。</p>
    {% endfor %}
{% endarchiveList %}

In the above code snippet,archiveListThe tag will store the article data for the current page.archivesIn the variable, then we go throughforLoop through and display each article's title, link, introduction, publication date, and reading volume. It is worth mentioning that,{% empty %}Tags are very useful, they allow us to elegantly display a prompt when the article list is empty, rather than leaving a blank.

Build pagination navigation bar

It is not enough to just display a list of articles; we also need to provide users with intuitive pagination navigation so that they can easily switch between different pages. At this point,paginationthe tag comes into play.

paginationTags usually follow.archiveListAfter the label is used, it will automatically retrieve the pagination information of the current list and generate a series of pagination links. You canshowThe parameter controls how many page number links are displayed before and after the current page, for exampleshow="5"It will display 2 page numbers on each side of the current page, plus the current page, totaling 5.

Here is an implementation of a standard pagination navigation bar:

<div class="pagination-controls">
    {% pagination pages with show="5" %}
        <a href="{{pages.FirstPage.Link}}" class="page-link first-page {% if pages.FirstPage.IsCurrent %}active{% endif %}">首页</a>

        {% if pages.PrevPage %}
            <a href="{{pages.PrevPage.Link}}" class="page-link prev-page">上一页</a>
        {% endif %}

        {% for item in pages.Pages %}
            <a href="{{item.Link}}" class="page-link page-number {% if item.IsCurrent %}active{% endif %}">{{item.Name}}</a>
        {% endfor %}

        {% if pages.NextPage %}
            <a href="{{pages.NextPage.Link}}" class="page-link next-page">下一页</a>
        {% endif %}

        <a href="{{pages.LastPage.Link}}" class="page-link last-page {% if pages.LastPage.IsCurrent %}active{% endif %}">尾页</a>

        <span class="page-info">
            共 {{pages.TotalItems}} 条 / {{pages.TotalPages}} 页 / 当前第 {{pages.CurrentPage}} 页
        </span>
    {% endpagination %}
</div>

In this example,pagesThe variable contains all the pagination-related data, such aspages.FirstPage(Home page information),pages.PrevPage(Previous page information),pages.Pages(Middle page number list),pages.NextPage(Next page information) andpages.LastPage(End page information). Each page number object (item) all containLink(link address),Name(Display name, i.e., page number) andIsCurrent(Whether it is the current page) and other properties, these are important bases for us to customize styles and logic.

You can directly display the total number of items, total number of pages, and current page number, such as{{pages.TotalItems}}/{{pages.TotalPages}}/{{pages.CurrentPage}}These data can help users clearly understand the overall situation of the list.

Customize pagination style and logic

The template engine syntax of AnQiCMS is similar to Django, which provides us with great flexibility to customize the display and behavior of pagination.

Custom pagination style:The attractiveness of pagination navigation directly affects user experience. By adding custom CSS classes to pagination links, you can easily implement various styles of pagination. For example, in the above code, we added links for different pagespage-link/first-page/prev-page/page-number/next-page/last-pageespecially.{% if item.IsCurrent %}active{% endif %}Such conditional judgment can add to the current page numberactiveclass to highlight the current page, which can easily define its background color, font color, and other properties through CSS.

Custom pagination logic:The AnQiCMS template system is not limited to simple content display, it also supportsifLogical judgment andforLoop traversal, which means you can implement more complex logic at the template level.

• Conditional display:You can usepages.PrevPageorpages.NextPageWhether it exists determines whether to display the "Previous page" or "Next page" button, which is particularly important when paginating to the first or last page, as it can avoid displaying unusable links.
• Integrated search and filtering:When your article list needs to combine search functionality,archiveListtags that can acceptqParameters to handle search keywords. For example, if the user enters a keyword in the search box, the page URL will contain?q=关键词. AnQiCMS's pagination system will automatically pass these URL parameters into the pagination links, ensuring that search results can also be paginated correctly.
• Similarly, for those who go througharchiveFiltersLabel generated complex filtering conditions, pagination links will also automatically inherit these filtering parameters, ensuring that users can smoothly page through the filtering results.
• Flexible URL structure:AnQiCMS supports pseudo-static rule management. If you have special requirements for the URL structure of pagination links, for example, if you want the link format to be/list-p2.htmlThis is not the default one/category/1?page=2You can customize the "pseudo-static rules" in the background.AnQiCMS powerful static function can automatically adapt the standard pagination links generated in the template to the URL pattern you define, providing a more SEO-friendly link structure.

By these flexible configurations and powerful template tags, AnQiCMS makes the pagination display of article lists simple and powerful. Whether it is the basic content display or complex search filtering scenarios