How to implement complete pagination functionality for the article list in AnQiCMS template?

As an expert well-versed in the operation of AnQiCMS, I know that a smooth, user-friendly website experience is crucial for attracting and retaining users.The pagination feature of the content list is the foundation of any content-intensive website, it not only optimizes the user's browsing experience, but is also an important part of search engine optimization.In AnQiCMS, implementing the complete pagination feature of the article list becomes efficient and flexible through its powerful template tag system.

Overview of article list pagination feature

In AnQiCMS templates, the complete pagination functionality for the article list mainly depends on the collaborative work of two core template tags: archiveListUsed to retrieve article data from the database and divide it into pages;paginationIt is responsible for generating and displaying page navigation links, guiding users to switch between different pages.Understanding the usage of these two tags and the data passing mechanism between them is the key to building an efficient pagination list.

The introduction of pagination feature, splitting the long article list into manageable multiple pages.This significantly improves page loading speed, as the browser does not need to load all article data at once.At the same time, it also improved the user experience, allowing users to easily find the content they are interested in and avoid endless scrolling.For search engine optimization, a clear pagination structure helps crawlers better index website content, avoid duplicate content, and ensure that each page's content can be discovered and indexed.

Retrieve article data:archiveListThe application of tags

First, we need to usearchiveListtags to retrieve article data. To implement pagination, this tag must be configuredtype="page"The parameter tells the AnQiCMS system that we want to retrieve article data prepared for pagination, the system will automatically handle the current page number and total number of pages and other information.

In the template,archiveListLabels usually define a variable name to store the list of articles retrieved. For example, we can name itarchives.limitParameters are used to specify the number of articles displayed per page, which is the key to controlling the granularity of pagination. In addition, we can also use parameters such asmoduleIdandcategoryIdto filter articles under specific models or categories, or to useorderParameters to define the sorting method of articles (for example, sorted by publication time in reverse orderid descor by view countviews desc)

A basicarchiveListUsage is as follows, it will retrieve 10 articles per page under the specified category:

{% archiveList archives with type="page" categoryId="1" limit="10" order="id desc" %}
    {# 循环显示当前页的文章列表 #}
    {% for item in archives %}
        <li>
            <a href="{{item.Link}}">
                <h5>{{item.Title}}</h5>
                <p>{{item.Description}}</p>
                <span>发布时间：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>阅读量：{{item.Views}}</span>
            </a>
        </li>
    {% empty %}
        <li>暂无相关文章。</li>
    {% endfor %}
{% endarchiveList %}

In the above code,archivesThe variable contains all the article data on the current page. Byforlooping, we can iterate and display the titles, links, and summaries of these articles.emptyA block is used to display a friendly prompt when there is no article.

Generate pagination navigation:paginationThe implementation of the tag

InarchiveListAfter the tag, we need to introducepaginationtags to generate pagination navigation.paginationThe tag will automatically usearchiveListGenerated pagination data to build page number links. It also defines a variable name, usually aspagesThis is used to store all detailed information related to pagination, such as total number of pages, current page, first page, previous page, next page, and links to the last page.

paginationAn important parameter of the tag isshowIt determines the maximum number of page number buttons displayed in the page number list. For example,show="5"The page will display up to 5 page numbers near the current page, which helps to keep the pagination navigation concise, especially when there are a large number of articles.

Next ispaginationAn example of typical application of tags and their internal structure:

<div class="pagination">
    {% pagination pages with show="5" %}
        <ul>
            <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>

In this structure,pagesThe variable provides everything needed to build a complete pagination navigation.pages.FirstPage/pages.PrevPage/pages.Pages(An array containing middle page numbers),pages.NextPageandpages.LastPageEach provided the corresponding page name (Name) and link (Link) as well as whether it was the current page (IsCurrentThe boolean value, which allows us to flexibly render pagination styles and interactions.

Integrate article list with pagination function

In order to implement the complete pagination function of the article list in the AnQiCMS template, we willarchiveListandpaginationThe tag is integrated in a template file. This template file is usually a list page template for a category, for examplearticle/list.htmlorproduct/list.htmlThis depends on the structure you define in the backend content model and category settings.

This is a complete example showing how to implement a paginated article list for a category with ID 1 in the AnQiCMS template:

{# 假设这是 article/list.html 模板文件 #}

{# 获取页面的TDK信息 #}
<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">

{# 面包屑导航 #}
<div class="breadcrumb">
    {% breadcrumb crumbs with index="首页" title=true %}
        <ul>
            {% for item in crumbs %}
                <li><a href="{{item.Link}}">{{item.Name}}</a></li>
            {% endfor %}
        </ul>
    {% endbreadcrumb %}
</div>

<h1>{{ category.Title }}</h1> {# 显示当前分类标题，假设有 category 变量 #}

<div class="article-list-container">
    {# 使用 archiveList 标签获取文章列表，并启用分页模式 #}
    {% archiveList archives with type="page" categoryId="1" limit="10" order="id desc" %}
        <ul class="article-items">
            {% for item in archives %}
                <li class="article-item">
                    <a href="{{item.Link}}" title="{{item.Title}}">
                        <div class="article-thumb">
                            {% if item.Thumb %}
                                <img src="{{item.Thumb}}" alt="{{item.Title}}">
                            {% else %}
                                <img src="/public/static/images/default-thumb.jpg" alt="默认缩略图">
                            {% endif %}
                        </div>
                        <div class="article-info">
                            <h2 class="article-title">{{item.Title}}</h2>
                            <p class="article-description">{{item.Description}}</p>
                            <div class="article-meta">
                                <span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                                <span>阅读量: {{item.Views}}</span>
                            </div>
                        </div>
                    </a>
                </li>
            {% empty %}
                <li class="no-content">当前分类下暂无文章。</li>
            {% endfor %}
        </ul>

        {# 在文章列表下方显示分页导航 #}
        <div class="pagination-controls">
            {% pagination pages with show="5" %}
                <ul class="pagination-list">
                    <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                        <a href="{{pages.FirstPage.Link}}" class="page-link">{{pages.FirstPage.Name}}</a>
                    </li>
                    {% if pages.PrevPage %}
                        <li class="page-item">
                            <a href="{{pages.PrevPage.Link}}" class="page-link">{{pages.PrevPage.Name}}</a>
                        </li>
                    {% endif %}
                    {% for pageItem in pages.Pages %}
                        <li class="page-item {% if pageItem.IsCurrent %}active{% endif %}">
                            <a href="{{pageItem.Link}}" class="page-link">{{pageItem.Name}}</a>
                        </li>
                    {% endfor %}
                    {% if pages.NextPage %}
                        <li class="page-item">
                            <a href="{{pages.NextPage.Link}}" class="page-link">{{pages.NextPage.Name}}</a>
                        </li>
                    {% endif %}
                    <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                        <a href="{{pages.LastPage.Link}}" class="page-link">{{pages.LastPage.Name}}</a>
                    </li>
                </ul>
                <div class="pagination-summary">
                    共 {{pages.TotalItems}} 篇文章，{{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页
                </div>
            {% endpagination %}
        </div>
    {% endarchiveList %}
</div>

This code first utilizesarchiveListGet the articles on the current page and then throughforLoop to display them. Next,paginationTags are used to render pagination links. ThroughpagesThe various properties of the variable, we can accurately control the display of the home page, previous page, specific page number, next page, and last page, and according toIsCurrentAdd propertiesactiveClass to highlight the current page.

When the user visits this page, AnQiCMS will automatically handle the page number parameter in the URLarchiveListandpaginationLabel, displaying the articles corresponding to the page number and the updated pagination navigation. This design of separating content acquisition and pagination rendering makes the template logic clear and easy to maintain.

The storage location of the template file

According to AnQiCMS template conventions, the template files for list pages are usually stored in/template/{您的模板目录名}/{模型table}/list.html. For example, if your article model is namedarticleand the template directory isdefaultthen the file should be nameddefault/article/list.htmlIn addition, AnQiCMS also supports customizing templates based on category ID, for exampledefault/article/list-{分类ID}.htmlto achieve more refined page design.

By following these steps and examples, you should be able to easily implement the complete pagination function of the AnQiCMS template, thus providing a more professional, efficient, and user-friendly website experience.

Frequently Asked Questions (FAQ)

1. Why did my article list show articles but the pagination navigation did not?This usually happens becausearchiveListlabel'stypethe parameter is not set correctly as"page". Only whenarchiveListoftypeWith"page"When, the AnQiCMS system will generate the necessary pagination data forpaginationUse tags. Please check yourarchiveListTag, make sure it containstype="page"Parameter.

How to set different page display quantities for articles in different categories?You can do this by setting it separately in the correspondingarchiveListtagslimitImplement the value of the parameter. For example, in a category list template, you can setlimit="5"and in another category list template, you can setlimit="20". If you want to use a completely different template for a category, you can also specify a custom category template in the category settings in the background.

3. How is the pagination link URL structure generated? Do I need to manually modify the pseudo-static rules?The pagination link URL structure of AnQiCMS is automatically generated and matches the pseudo-static rules you configure in the background (such as/{module}-{id}.htmlor/{module}-{filename}(-{page})As a matter of fact, you usually do not need to manually modify the static rules to adapt to pagination functions.As long as the static rule is configured correctly, the pagination links will automatically generate friendly URLs containing page number parameters.If you have used custom rewrite rules, make sure that the rules contain{page}parameters to ensure the pagination function works properly.