How to implement pagination for the article list display function?

As an experienced website operator who deeply understands the operation of AnQiCMS, I understand that it is crucial to organize and present a large number of articles efficiently in content display.The pagination feature not only greatly enhances the user's browsing experience, but also avoids the visual fatigue caused by too much content on a single page, and is an indispensable part of SEO strategy.To implement pagination display of article lists in AnQiCMS, it benefits from its flexible template engine and dedicated tag system, making the whole process clear and efficient.

The core principle of implementing pagination display of the article list

The AnQiCMS content management system allows us to control the display of the website's frontend by defining template files. The pagination display function of the article list is essentially completed through the collaborative work of two core template tags: archiveListThe tag is responsible for retrieving article data from the database and performing pagination, andpaginationThe tag is responsible for generating pagination navigation links on the user interface. This clear division of labor ensures the effective separation of data logic from display logic, making template development more intuitive.

AnQiCMS template files follow a syntax similar to the Django template engine, variables are enclosed in double curly braces{{变量}}Definition, while conditional judgments, loop controls, and other logical operations use single curly braces and percent signs{% 标签 %}Definition, and tags usually appear in pairs. This provides strong support for us to build dynamic article lists and pagination navigation.

Template file preparation

In AnQiCMS, the article list page usually selects the corresponding template file based on the model type and category ID. According to the template production conventions, the list page template files are generally stored in/templateTemplates should be followed in the folder{模型table}/list.htmlor{模型table}/list-{文档分类ID}.htmlThe naming format. For example, if your article model table name isarticleand the list page is not bound to a specific category, then you may need to editarticle/list.htmlAdd pagination logic to the file. If your website uses a flat file organization mode, it may bearticle_list.htmlMake sure you are editing the correct list page template file.

Retrieve paginated article list data

Firstly, we need to utilize in the list page templatearchiveListThe tag is used to retrieve the article data that needs to be displayed in a paginated manner. This tag is the core tool used by AnQiCMS to query and display the article list. In order to implement pagination, we must converttypethe parameter to"page".

This is an example of retrieving a paginated list of article data:

{% archiveList archives with type="page" moduleId="1" limit="10" %}
    {% for item in archives %}
    <div class="article-item">
        <a href="{{item.Link}}">
            {% if item.Thumb %}
            <img src="{{item.Thumb}}" alt="{{item.Title}}">
            {% endif %}
            <h3>{{item.Title}}</h3>
            <p>{{item.Description}}</p>
        </a>
        <div class="article-meta">
            <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
            <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            <span>阅读量：{{item.Views}}</span>
        </div>
    </div>
    {% empty %}
    <p>当前分类下没有找到任何文章。</p>
    {% endfor %}
{% endarchiveList %}

In this code block, we define a variable namedarchivesto store the article list data.type="page"Make sure to inform the system that pagination is required for this list.moduleId="1"Specified the model ID of the article (for example, 1 usually represents the article model).limit="10"Then it set the display of 10 articles per page.forIn the loop, we traversedarchiveseach article in theitem），and displayed the thumbnail, title, description, category, publish date, and reading volume of the article.emptyBlock displays a prompt message when there is no article.

Render pagination navigation

After successfully obtaining and displaying the paginated article list, the next step is to generate clickable pagination navigation links. AnQiCMS provides for thispaginationLabel. This label is usually followed byarchiveListlabel's{% endarchiveList %}.

The following is an example of rendering a pagination navigation:

<div class="pagination-container">
    {% pagination pages with show="5" %}
    <ul class="pagination">
        {# 首页链接 #}
        <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
            <a class="page-link" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
        </li>
        {# 上一页链接 #}
        {% if pages.PrevPage %}
        <li class="page-item">
            <a class="page-link" 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 class="page-link" href="{{item.Link}}">{{item.Name}}</a>
        </li>
        {% endfor %}
        {# 下一页链接 #}
        {% if pages.NextPage %}
        <li class="page-item">
            <a class="page-link" href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
        </li>
        {% endif %}
        {# 末页链接 #}
        <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
            <a class="page-link" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
        </li>
    </ul>
    <div class="pagination-info">
        总计 {{pages.TotalItems}} 篇文章，共 {{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页。
    </div>
    {% endpagination %}
</div>

In this example, we will store the pagination information inpagesthe variable and setshow="5"To control the maximum number of middle page number links displayed in the pagination navigation. We generatepages.FirstPage/pages.PrevPage/pages.NextPageandpages.LastPagelinks for the home page, previous page, next page, and last page through the object. At the same time, throughpages.PagesThe array iterates to generate the middle page number links and passes throughIsCurrentAttribute determines the current page and addsactiveClass. In addition, it also displays the total number of articles, total number of pages, and current page number, etc., to enhance the user's perception of the page content.

Code interpretation and optimization suggestions

The code snippet provides the basic framework for implementing pagination of article lists in AnQiCMS.In practical applications, you can further customize and optimize according to the design of the website and user experience requirements.

archiveListlabel'slimitThe parameter is the key to controlling the number of articles displayed per page, and you can adjust it based on content density and user habits.categoryIdThe parameter allows you to create pagination for a list of articles in a specific category. If you want to display all categories of articles, you can specify it or configure it in the background.orderThe parameter can change the sorting method of the articles, for example, in reverse chronological order (id desc) or by view count (views desc).

In the article list, we usecategoryDetailLabels to obtain the name of the article category it belongs to, making the article information more complete. Timestamp formatting is done throughstampToDateTag implementation, you can adjust the date and time display format as needed.

About SEO, AnQiCMS static rules (help-plugin-rewrite.mdMentioned) Can ensure that pagination link generation produces a friendly URL structure, for example/category/list-1.html//category/list-2.htmlWait, this helps search engines better crawl and index your pagination content. Although the document does not directly mention setting pagination tags inrel="prev"andrel="next"However, modern search engines are already able to handle pagination content well, it is important to ensure that pagination links are crawlable and content uniqueness.

By combining these tags, AnQiCMS makes it a direct and flexible task to implement article list pagination display, helping you build a user-friendly and SEO-optimized website.

Frequently Asked Questions (FAQ)

1. How to adjust the number of articles displayed per page?You can modify byarchiveListin the labellimitThe parameter to adjust the number of articles displayed per page. For example, if you want to display 15 articles per page, you can setlimit="10"is modified tolimit="15".

2. How is the URL structure of pagination links determined?The pagination link URL structure is mainly determined by the 'pseudo-static rules' setting in the AnQiCMS backend.The system provides multiple preset modes, such as "numeric mode" or "categorized naming mode", and you can also customize the rules.In these rules, it usually includes a{page}Use variables to represent the page number. Make sure your pseudo-static rules are correctly configured to generate friendly pagination URLs.

3. Does the pagination feature support SEO optimization?Yes, AnQiCMS's pagination feature is SEO-friendly.The system supports pagination by generating clear, SEO-friendly static URLs.This means that each page of content has a unique URL, which is convenient for search engine indexing.Although modern search engines have become more intelligent in handling pagination content, they no longer require itrel="prev/next"But the static URL structure of AnQiCMS is beneficial for SEO, ensuring the visibility and accessibility of content.