How to implement pagination display of the article list in AnQiCMS?

In AnQiCMS, the pagination display of the article list is a very common and important function in content operation.It not only makes it easier for visitors to browse a large amount of content, improve the user experience, but also plays an indispensable role in search engine optimization (SEO), helping search engines better crawl and index website content.

AnQiCMS as an efficient and customizable content management system took this into consideration from the beginning of its design, which is why the implementation of the article list pagination feature is very intuitive and flexible. This is mainly due to its powerful template tag system, especiallyarchiveListandpaginationthese two core tags.

Core Tag: Article List and Pagination

To display an article list with pagination navigation on your website, you need to use two main template tags:

  1. archiveListTagThis tag is used to retrieve a list of articles (or other custom model content) from the database.When implementing pagination, we need to tell it to retrieve data in 'pagination mode' and specify how many items to display per page.
  2. paginationTagThis tag is responsible for according toarchiveListThe data provided generates a beautiful and functional pagination navigation link, including home page, previous page, next page, last page, and page numbers in the middle.

Next, we will learn in detail how to apply these tags in your AnQiCMS template.

Step 1: Prepare your template file.

Generally, the article list page corresponds to your category page, or it may be a dedicated search results page, tag page, etc. Template files are usually stored in AnQiCMS./templateIn the directory of the template folder you have selected. For example, if you want to create a template for the article list of a category, it may be located in{模型table}/list.htmlsuch asarticle/list.html.

In these template files, you will use the syntax of the Django template engine supported by AnQiCMS to write code.

Second step: usearchiveListTags retrieve article data

To implement pagination, you first need to usearchiveListtags to get the list of articles. The key is to settype="page"A parameter that tells the system you need paginated data instead of listing all data at once. At the same time, throughlimita parameter to define the number of articles displayed per page, for examplelimit="10"means 10 articles per page.

a basicarchiveListThe tag usage might look like this:

{# page 分页列表展示 #}
<div>
{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            <div>{{item.Description}}</div>
            <div>
                <span>{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                <span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>{{item.Views}} 阅读</span>
            </div>
        </a>
        {% if item.Thumb %}
        <a href="{{item.Link}}">
            <img alt="{{item.Title}}" src="{{item.Thumb}}">
        </a>
        {% endif %}
    </li>
    {% empty %}
    <li>
        该列表没有任何内容
    </li>
    {% endfor %}
{% endarchiveList %}
</div>

In this example:

  • archiveList archives with type="page" limit="10"We define a variable namedarchivesA variable to store the list of article data, and specify the pagination mode (type="page") and 10 items per page (limit="10")
  • {% for item in archives %}: We traversearchivesarray,itemThe variable represents each article.
  • {{item.Link}}/{{item.Title}}/{{item.Description}}These are common fields of articles, corresponding to article links, titles, and summaries. The AnQiCMS article model also provides such rich fields asViews(Views),Thumb(thumbnail) for you to call.
  • {{stampToDate(item.CreatedTime, "2006-01-02")}}:CreatedTimeIt is usually a timestamp, here we use the built-in of AnQiCMSstampToDateto format it into年-月-日date format, making the display more friendly.

If there are no articles under the current category,{% empty %}The content within the label will display, telling visitors that 'this list has no content'.

Third step: usepaginationThe label constructs pagination navigation

InarchiveListBelow the label, use it immediatelypaginationThe label, it will be based onarchiveListThe pagination data obtained, automatically generates pagination navigation.

    {# 分页代码 #}
    <div>
        {% pagination pages with show="5" %}
            {# 首页 #}
            <a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
            {# 上一页 #}
            {% if pages.PrevPage %}
            <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
            {% endif %}
            {# 中间多页 #}
            {% for item in pages.Pages %}
            <a class="{% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
            {% endfor %}
            {# 下一页 #}
            {% if pages.NextPage %}
            <a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
            {% endif %}
            {# 尾页 #}
            <a class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
        {% endpagination %}
    </div>

Here:

  • {% pagination pages with show="5" %}We define a variable namedpagesVariable to carry pagination information.show="5"The parameter indicates that at most 5 page number links are displayed in the pagination navigation (excluding the home page, previous page, next page, and last page), which helps to maintain the conciseness of the pagination navigation.
  • pagesThe variable contains rich pagination information, such as:
    • pages.FirstPage: Link and name of the home page.
    • pages.PrevPage: Link and name of the previous page, displayed only when there is a previous page.
    • pages.Pages: An array containing all the links of intermediate page numbers, we go through{% for item in pages.Pages %}Loop to display them one by one.
    • pages.NextPage: The link and name of the next page, only displayed when there is a next page
    • pages.LastPage: The link and name of the last page.
  • {% if pages.FirstPage.IsCurrent %}active{% endif %}:IsCurrentThe attribute can help you determine the current page number, so that you can add CSS styles to the current page, such as highlighting.

Combine these tags together, and your article list pagination feature will be basically completed.Don't forget to add appropriate CSS styles to the pagination navigation to make it visually consistent with your website design.

Advanced Applications

  • Combined with filtering and search:archiveListTags also supportqPerform keyword search and customize field filtering through URL query parameters (for examplemoduleId/categoryId). When you use the search page or a list page with filtering conditionstype="page"then,paginationThe label also intelligently retains these filtering and search parameters to ensure the correctness of pagination links.
  • Sort control: PassorderParameters, you can control the sorting method of articles, such as by publication time (order="id desc"Or page views(order="views desc"Sorted.
  • Flexible pseudo-static configuration: AnQiCMS provides powerful static rule management functions, you can customize the URL structure of pagination links, which is very beneficial for SEO.You can configure the "Feature Management" -> "Static Rules" in the background.

Through these flexible tags and configuration options, AnQiCMS makes the pagination display of website content simple and efficient. Whether you are managing a small and medium-sized enterprise website, a self-media platform, or multi-site management, you can easily handle it and provide a smooth browsing experience for users.

Frequently Asked Questions (FAQ)

1. Why is my article list pagination not displaying?

Usually, this could be due to the following reasons:

  • archiveListTags not settype="page"Make sure yourarchiveListtags containtype="page"Parameter. If this parameter is not provided, the system will default to retrieving a list of data without pagination,paginationthe label cannot find pagination information to generate navigation.
  • archiveListandpaginationthe label variable name does not match:paginationThe tag depends onarchiveListPage data generated by the tag. Please check if two tags use the same variable name to pass data, for examplearchivesandpages.
  • Not enough content to trigger paginationIf the number of your articles is less thanlimitThe number of items displayed per page is set, or if there is only one page in total, the pagination navigation will not be displayed. Please make sure you have enough articles to test the pagination function.

How to adjust the number of articles displayed per page and the number of pagination links?

  • **Adjust the number of articles displayed per page