As an experienced website operations expert, I know that how to efficiently and flexibly display content in a content management system is the key to success in operations.AnQiCMS with its concise and efficient architecture and powerful template tag system, provides us with great convenience.Today, let's delve deeply into a common yet crucial feature: how to implement pagination of the tag list by the number of calls (limit) in AnQiCMS.

Tags (Tag) are an important means of content organization, they not only help users quickly find related content, but are also an indispensable part of SEO strategy.As the content of the website becomes richer, the number of tags may also increase.If all labels are displayed in a flat and straightforward manner, it not only affects the page loading speed, but also reduces the user experience.Therefore, it is particularly important to manage the tag list with pagination and load on demand.

Understand the tag mechanism of AnQiCMS:tagListwithtagDataList

In AnQiCMS, we mainly use two template tags to handle label-related data:

  1. tagListTagThis tag is mainly used to getthe tag list itself on the website. It can be used to display all popular tags, the latest tags, or tags associated with a specific document. It returns an array containing all tag information.
  2. tagDataListTag: As the name implies, this tag is used to obtainthe document list under a specific tag. When you click on a tag and enter the tag detail page, it is usually used totagDataListDisplay all articles or products associated with this tag. It returns an array of document (Archive) information related to the specific tag.

Understanding the difference between these two is the key to implementing tag list pagination.

The core of implementing tag list pagination:limitThe parameter withpaginationTag

To implement pagination display of the tag list in AnQiCMS, we mainly rely on two core parameters and a key tag:

  • limitParameterIt defines the number of data to be displayed per page or each call. For example,limit="10"means 10 data are displayed per page.
  • type="page"ParameterIt is the switch to turn on pagination. When you turntypeis set to"page"When, AnQiCMS knows that you need to perform pagination, and it will generate the corresponding pagination information for the list.
  • paginationTagThis tag is designed for pagination in AnQiCMS, it can automatically generate 'First page', 'Previous page', 'Next page', and specific page number links according to the total number of data in the list and the number of items displayed per page.

Next, we will explain in detail how to use these functions in two scenarios.

Scenario one:tagListTag pagination display

Assuming you want to display all the tags on a special "tag cloud" or "hot tags" page (usuallytag/index.htmltemplate file) and display them in pages instead of loading all at once.

1. UsetagListLabel to get the paginated label data:

First, in your template file (for exampletag/index.htmlUse it intagListLabel to get label data and specifytype="page"andlimitParameter.

{# 在 tag/index.html 模板中，用于分页显示网站所有标签 #}
{% tagList tags with type="page" limit="20" %}
    <div class="tag-list-container">
        {% for item in tags %}
        <a href="{{ item.Link }}" title="{{ item.Title }} ({{ item.ArchiveCount }}篇文章)" class="tag-item">
            {{ item.Title }}
        </a>
        {% empty %}
        <p>抱歉，目前没有可显示的标签。</p>
        {% endfor %}
    </div>
{% endtagList %}

In the above code:

  • We defined a namedtagsThe variable to receivetagListThe returned label data.
  • type="page"Explicitly tell the system that pagination is needed.
  • limit="20"Set 20 tags to be displayed per page.
  • {% for item in tags %}Loop through the obtained tag data.
  • item.Linkanditem.TitleUsed to display tag links and names.
  • item.ArchiveCountIf the document supports this field, it can display how many articles are under the tag, increasing the reference value of the tag.

Important reminder:According to the AnQiCMS document conventions,tagListTags are only available whentag/index.htmlIn the template, itstype="page"parameters must be effective and generate pagination. In other templates, it may not generate pagination effects or only returntype="page"a limited non-pagination list.limit.

2. CombinedpaginationTag rendering pagination navigation:

After obtaining the pagination data, the next step is to display the page numbers that the user can click to jump. This ispaginationthe application of tags.

{# 紧接着上面的 tagList 标签之后，用于显示分页导航 #}
<div class="pagination-container">
    {% pagination pages with show="5" %}
        <ul class="pagination">
            {# 首页链接 #}
            {% if pages.FirstPage %}
            <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                <a class="page-link" href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
            </li>
            {% endif %}

            {# 上一页链接 #}
            {% if pages.PrevPage %}
            <li class="page-item">
                <a class="page-link" href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a>
            </li>
            {% endif %}

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

            {# 尾页链接 #}
            {% if pages.LastPage %}
            <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                <a class="page-link" href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a>
            </li>
            {% endif %}
        </ul>
        <div class="page-info">
            总计 {{ pages.TotalItems }} 个标签，共 {{ pages.TotalPages }} 页，当前第 {{ pages.CurrentPage }} 页。
        </div>
    {% endpagination %}
</div>

Here:

  • We definedpagesVariables to receivepaginationThe pagination object generated by the tag.
  • show="5"Controlled in