As the content of the website becomes increasingly rich, how to efficiently present a large amount of information while ensuring a user-friendly browsing experience is an indispensable part of website operation.In AnQiCMS, through the powerful template tag system, we can easily achieve content pagination display and flexibly customize the style of page navigation, making the website content both rich and tidy.

Efficient content organization: Implementing pagination display of content lists

In the AnQiCMS template, the core of implementing pagination display of content lies in usingarchiveListLabel to get document lists. This label feature is powerful, not only can it list documents of specified categories or models, but it can also be configured directly as a pagination mode.

Firstly, on your list page template (for example, the list page for article models is usuallyarticle/list.html, or a custom category list template) you will usearchiveListLabel. To enable pagination, you need to settypeparameter as"page"and utilizelimitparameters to define the number of articles to be displayed per page. For example, if you want to display 10 articles per page, the code will be like this:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <div class="article-item">
        <h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
        <p>{{item.Description}}</p>
        <div class="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,archiveListLabel will load the article data that meets the conditions into a variable namedarchives, and automatically page according to thelimitparameter. Inforin the loop,item, it represents each article, and you can access it throughitem.Title/item.Link/item.DescriptionAccess various properties of the article in English.{% empty %}Tags also handle the scenario where no articles are available to display very thoughtfully, avoiding an empty page.

精细控制：自定义页码导航样式

内容列表呈现后，接下来就是为用户提供便捷的页码导航。AnQiCMS为此提供了paginationLabel. This label will be generated according toarchiveListthe total number of pages generated by the label and the current page number, automatically generating a set of information including the first page, previous page, specific page number, next page, and last page.pagesObject, for you to flexibly render in the template.

InarchiveListBelow the label, followed by usingpaginationlabel, and can be配合showparameters to control the number of pages displayed in the page navigation. For example,show="5"The page navigation shows up to 5 page numbers at most (such as 1, 2, 3, 4, 5).

The following is a complete example that combines a content list and page navigation, with considerations for style customization:

{% archiveList archives with type="page" limit="10" %}
    <div class="article-list">
        {% for item in archives %}
        <div class="article-item">
            <h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
            <p>{{item.Description}}</p>
            <div class="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 %}
    </div>

    <div class="pagination-nav">
        {% 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 %}

            {# 中间页码数字，遍历 pages.Pages 数组 #}
            {% for pageItem in pages.Pages %}
            <li class="page-item {% if pageItem.IsCurrent %}active{% endif %}">
                <a href="{{pageItem.Link}}">{{pageItem.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>
{% endarchiveList %}

the abovepaginationInside the tag,pagesThe object provides rich information:

  • pages.TotalItemsandpages.TotalPagesIt represents the total number of articles and total pages.
  • pages.CurrentPageIt is the current page number being accessed.
  • pages.FirstPage/pages.LastPage/pages.PrevPage/pages.NextPageThey represent the navigation objects for the first page, last page, previous page, and next page, and they all containLink("link address"), andName(Display text) property, and aIsCurrentboolean value to determine if it is the current page.
  • pages.Pagesis an array that contains the specific page numbers of the middle part, each element is also a container that includesLink/NameandIsCurrentThe object of the attribute.

Using these properties, you can easily customize the appearance of the page navigation. For example, by{% if pageItem.IsCurrent %}active{% endif %}such conditional judgment, for the current page's<li>element addingactiveClasses, then set their highlight styles through CSS. Similarly,{% if pages.PrevPage %}This judgment can ensure that the corresponding navigation link does not display when there is no previous page or next page, thus maintaining the simplicity of navigation.

Flexible and variable: practical suggestions for improving user experience

  1. CSS Custom AppearanceThe above example provides the HTML structure and the basicactiveClass, the specific page navigation beautification is completely dependent on your CSS design. You can adjust the font, color, background, border, etc., to match the overall style of the website.
  2. Location of template file：English usually, the template files of the list page are placed intemplate/{您的模板目录}/{模型table}/list.htmlfor exampletemplate/default/article/list.html. If you have specific categories that require different list layouts, AnQiCMS also supports{模型table}/list-{分类id}.htmlsuch custom templates.
  3. Combine search function: If your website contains a search function,archiveListTags intype="page"in this mode, it will automatically read the URL inqThe parameter is used as a search keyword to implement pagination of search results. You do not need to handle the search results additionally