In content operations, the pagination display of article lists is a fundamental and crucial feature, which not only affects the user's browsing experience but is also closely related to the performance of the website and SEO.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.

AnQiCMS article list pagination: Easily master display and customization

With the increasing richness of website content, 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 function of the article list is the key to solving this problem.AnQiCMS as a modern CMS developed based on the Go language, provides us with an intuitive and powerful article list pagination display function, and allows us to deeply customize its style and logic.

Basic pagination display of article list

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

First, in your template file (such as, article list pagearchive/list.htmlor category list pagecategory/list.html), you can usearchiveListLabel to retrieve paginated articles. This label is very flexible, you can use it to settype="page"parameters to tell the system that you need to get a paginated list, and at the same time utilizelimitParameters can be used to specify the number of articles displayed per page.

For example, if we want to display 10 articles per page, the code can be written as follows:

{% 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,archiveListTags will store the article data of the current page.archivesIn the variable, then we go throughforLoop through and display each article's title, link, introduction, publish date, and reading volume. It is worth mentioning that,{% empty %}The tag is very useful, it allows us to elegantly display a prompt message when the article list is empty instead of leaving a blank space.

Build a pagination navigation bar

仅仅展示文章列表是不足够的，我们还需要为用户提供直观的分页导航，让他们能够轻松地在不同页面之间切换。这时，paginationTags come into play.

paginationTags are usually followed byarchiveListTags are used after the label, it will automatically obtain the pagination information of the current list and generate a series of pagination links. You can useshowThe parameter controls how many page number links are displayed before and after the current page, for exampleshow="5"2 page numbers will be displayed on both sides of the current page, plus the current page itself, totaling 5.

The following 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 includes all the data related to pagination, such aspages.FirstPage(Home page information),pages.PrevPage(Previous page information),pages.Pages(Page number list) ,pages.NextPage(Next page information) andpages.LastPage（End page information）。Each page number object (item）containsLink[Link address],Name（Display name, that is, the page number）andIsCurrent（Whether it is the current page）and other properties, all of which are important bases for us to customize styles and logic.

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

Custom pagination style and logic

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

Custom pagination style:The beauty of pagination navigation directly affects user experience.By adding a custom CSS class to pagination links, you can easily implement various pagination styles.page-link/first-page/prev-page/page-number/next-page/last-pageespecially{% if item.IsCurrent %}active{% endif %}Such conditional judgment allows us to addactivea class to highlight the current page, which can be easily defined with CSS for its background color, font color, and so on.

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

  • Condition display:You can choose according topages.PrevPageorpages.NextPageThis exists to decide whether to display the 'Previous page' or 'Next page' button, which is especially important when pagination reaches the first page or the last page, as it can prevent showing non-functional links.
  • Integrate search and filtering:When your article list needs to be combined with the search function,archiveListTags can acceptqParameters are used to handle search keywords. For example, if the user enters a keyword in the search box, the page URL will contain?q=关键词。AnQiCMS 的分页系统会自动将这些URL参数带入到分页链接中，确保搜索结果也能正常分页。
  • 同样，对于通过archiveFiltersThe complex filtering conditions generated by the tag, the pagination links will also automatically inherit these filtering parameters, ensuring smooth page navigation within the filtering results of users.
  • Flexible URL structure:AnQiCMS supports pseudo-static rule management. If you have special requirements for the URL structure of pagination links, for example, you want the link format to be/list-p2.html而不是默认的/category/1?page=2You can customize the configuration in the "pseudo-static rules" in the background.AnQiCMS Powerful pseudo-static function can automatically adapt the standard pagination links generated by the template to the URL pattern you define, providing a more SEO-friendly link structure.

Through 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