How to add pagination and optimize the display effect for document lists in AnQiCMS?

In website operations, how to efficiently display a large amount of content while ensuring smooth user experience is an issue that should not be overlooked.The pagination feature of the document list is the key to solving this problem.AnQiCMS (AnQiCMS) is an efficient and flexible content management system that provides intuitive and powerful template tags, allowing you to easily add pagination features to document lists and optimize the display on this basis, making your website content more attractive.

The core of AnQiCMS pagination:archiveListwithpaginationCollaboration of tags

In Anqi CMS, to implement pagination for document lists, it mainly relies on two core template tags:archiveList(Document list tag) andpagination(Pagination tag). They work together,archiveListResponsible for obtaining document data organized by pages, andpaginationthen generate clickable page navigation based on this data.

Step 1: Prepare the paginated document list

First, you need to go through the template in order toarchiveListLabel to retrieve document data. This label function is powerful, and it can filter and sort documents based on multiple conditions. The most critical thing to enable pagination is to settypethe parameter to"page".

For example, if you want to display a list of articles under a category and want it to be paginated with 10 items per page, you can write it like this:

{% archiveList archives with type="page" moduleId="1" categoryId="1" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            <p>{{item.Description}}</p>
            <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 %}

In the code above:

• archivesIs the variable name you define for the document list data obtained.
• type="page"Explicitly inform the system that this list needs pagination processing.
• moduleId="1"Indicates retrieving the document of the article model (usually the ID of the article model is 1).
• categoryId="1"Used to specify which category of documents to display.If you wish to automatically obtain based on the category of the current page you are visiting, you can omit this parameter or set its value to the ID of the current page category.
• limit="10"sets the number of documents displayed per page to 10.

Whentypeis set to"page"after,archiveListthe tag returns the document list data (inarchivesIn the variable), it will also pass the pagination-related information to the system for subsequent processingpaginationlabel usage

Second step: Add pagination navigation

After the document data is organized by page, the next step is to usepaginationA tag to generate page navigation. This tag usually follows inarchiveListthe lower part of the tag because it depends onarchiveListthe pagination context information generated.

paginationLabels are automatically generated based on the current page, total page count, and other information, creating links for 'Home', 'Previous', 'Next', and page numbers in the middle.

<div class="pagination-container">
    {% pagination pages with show="5" %}
    <ul>
        <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">首页</a></li>
        {% if pages.PrevPage %}
            <li class="page-item"><a href="{{pages.PrevPage.Link}}">上一页</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}}">下一页</a></li>
        {% endif %}
        <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">尾页</a></li>
    </ul>
    <p>总共 {{pages.TotalItems}} 条文档，分为 {{pages.TotalPages}} 页，当前是第 {{pages.CurrentPage}} 页。</p>
    {% endpagination %}
</div>

In this example:

• pagesIs the variable name you define for pagination information.
• show="5"Controls the maximum number of middle page number links displayed. You can adjust this number according to your design requirements.
• pagesVariable contains rich pagination data, for example:
  • pages.TotalItems: Total document count.
  • pages.TotalPages: Total number of pages.
  • pages.CurrentPage: Current page number.
  • pages.FirstPage/pages.PrevPage/pages.NextPage/pages.LastPageObjects representing home page, previous page, next page, and end page, each containingLink(link address) andIsCurrent(whether it is the current page) and other properties.
  • pages.PagesAn array that includes the page number objects displayed in the middle, each object also hasLinkandIsCurrentProperty.

You can flexibly build various styles of pagination navigation through these fields.

Optimize the display effect of the document list

Just implementing pagination is the first step. To truly attract users to the document list, it is necessary to refine its display effect.

1. UtilizeitemDisplay of rich content variable archiveListTag looping initemVariables provide you with detailed information about the document, much more than just the title. You can display thumbnails, publication time, document description, reading volume, and category based on your needs. For example:

   • Title and Link:item.Titleanditem.LinkThe most basic, make sure that clicking the title can jump to the detail page.
   • Thumbnail:item.Thumboritem.LogoCan be used to display the picture of the list item, making the list more vivid.
   • Document Introduction:item.DescriptionProvided a brief overview of the article.
   • Read count:item.ViewsCan be used to display the popularity of the article.

2. Formatted publish timeThe time field in AnQiCMS is typically stored in timestamp format. UsestampToDatetags to convert it to a human-readable date and time format, such as:{{stampToDate(item.CreatedTime, "2006年01月02日 15:04")}}

3. content truncation to maintain cleanlinessIn order to avoid the list item content from being too long, you can use a filter to truncate the article description.truncatechars(Character truncation) andtruncatewords(Word truncation) are very practical choices:{{item.Description|truncatechars:100}}The description will be truncated to 100 characters and a ellipsis will be added at the end.

4. CSS style beautificationAfter the HTML structure is built, it is crucial to use CSS to give the list and pagination a beautiful style.You can add different styles to list items, pagination links, the current page number, etc. to enhance the visual effects and user interaction experience.<li>Element additionactiveClass, then write the corresponding CSS rules to highlight it.

Comprehensive Optimization Example:

<div class="document-list">
    {% archiveList archives with type="page" moduleId="1" limit="10" %}
        {% for item in archives %}
        <div class="list-item">
            {% if item.Thumb %}
            <a href="{{item.Link}}" class="item-thumb">
                <img src="{{item.Thumb}}" alt="{{item.Title}}">
            </a>
            {% endif %}
            <div class="item-content">
                <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
                <p class="item-description">{{item.Description|truncatechars:150}}</p>
                <div class="item-meta">
                    <span>分类：<a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{% categoryDetail with name='Title' id=item.CategoryId %}</a></span>
                    <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                    <span>阅读量：{{item.Views}}</span>
                </div>
            </div>
        </div>
        {% empty %}
        <p>抱歉，目前没有找到符合条件的文档。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

<div class="pagination-nav">
    {% pagination pages with show="5" %}
    <ul class="pagination-list">
        <li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">首页</a></li>
        {% if pages.PrevPage %}
            <li><a href="{{pages.PrevPage.Link}}">上一页</a></li>
        {% endif %}
        {% for item in pages.Pages %}
            <li class="{% if item.IsCurrent %}active{% endif %}"><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
        {% if pages.NextPage %}
            <li><a href="{{pages.NextPage.Link}}">下一页</a></li>
        {% endif %}
        <li class="{% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">尾页</a></li>
    </ul>
    <p class="pagination-info">总计 {{pages.TotalItems}} 篇文章，当前显示第 {{pages.CurrentPage}} 页 / 共 {{pages.TotalPages}} 页。</p>
    {% endpagination %}
</div>

Actual Operation Suggestions and **Practice

1. Template File Location: The list page template file is usually located according to your template organization mode,/template/{您的模板目录}/{模型表名}/list.html(Folder Organization Mode) or/template/{您的模板目录}/{模型表名}_list.html(Flattened organization mode). For example, the article list might betemplate/default/article/list.html.
2. Dynamically obtain category IDIn the actual category list page,categoryIdParameters usually do not need to be manually specified with a specific ID, the system will automatically determine the current category based on the URL path. If you want to retrieve documents for all categories, you cancategoryIdis set to"0".
3. Static rulesEnsure your website is properly configured with pseudo-static rules (via Background "Function Management" -> "Pseudo-static Rules"), so that the generated pagination URLs will be beautiful and有利于SEO的。
4. DebugIn the process of development, use the browser developer tools to check the generated HTML structure and link for correctness.If the data is not displayed as expected, check that the tag parameters are correct, especially the case-sensitive parameter names.

Summary

By flexibly using the AnQiCMS providedarchiveListandpaginationThese core template tags, combined with various filters for detailed processing, allow you to easily implement efficient pagination for your website's document list and present it beautifully and practically according to your design needs.This highly customizable feature is exactly the powerful advantage that AnQiCMS shows in content management.

Frequently Asked Questions (FAQ)

1. Why is the pagination navigation not displayed in my document list? What is the reason?
   • The most common reason is that you are in the `