In the flexible and powerful AnQiCMS content management system, efficiently organizing and displaying content is the key to the success of website operation.For many websites, aggregating related articles by tags (Tag) and providing convenient pagination browsing features is a common requirement for enhancing user experience and website SEO performance.{% tagDataList %}and{% pagination %}How to cleverly combine, jointly building a user-friendly Tag document pagination list.

As an experienced website operation expert, I know the importance of transforming complex technical concepts into practical operation guidelines.AnQiCMS's powerful template engine is based on Go language, providing a concise expression similar to Django template syntax, allowing content operators to easily handle it.

I.{% tagDataList %}Your Tag content aggregator

In AnQiCMS,{% tagDataList %}Tags play the role of a content aggregator.It can help you dynamically retrieve all document lists associated with specific tags (Tag).Imagine when a user is interested in a specific topic, they click on a tag, and all related articles are presented in front of them, which greatly enhances the efficiency of content discovery.

The core function of this tag is:

  • Flexible specification of TagYou can specify a Tag's ID explicitly to retrieve its documents, ortagIdin the Tag details page (for example/tag/tagname.html) to omittagIdParameters, allowing AnQiCMS to intelligently identify the Tag of the current page and automatically load its document.
  • Filter content model: ThroughmoduleIdParameters, you can limit to only get Tag documents under specific content models (such as "Article Model
  • Control the number of displayed items:limitThe parameter allows you to set the number of documents displayed per page or per call.
  • Sorting method:orderThe parameter allows you to sort documents by ID, views, custom sorting, and more.

However, a crucial parameter to implement pagination istype.when you need to{% tagDataList %}be sure to display the document list you have obtained in a paginated mannertypeparameter settings"page"This will inform the AnQiCMS template engine that, in addition to returning the document data itself, it also needs to calculate and prepare all the metadata required for pagination (such as total number of pages, current page number, etc.).

For example, a basic Tag document list call might look like this:

{% tagDataList archives with tagId="1" type="list" limit="10" %}
    {% for item in archives %}
        <li><a href="{{item.Link}}">{{item.Title}}</a></li>
    {% empty %}
        <li>暂无相关文档。</li>
    {% endfor %}
{% endtagDataList %}

The above code will only list the latest 10 articles under the Tag with ID 1, but it does not have pagination capabilities.

Second,{% pagination %}: Build a seamless page flipping experience

{% pagination %}Tags are a powerful tool in AnQiCMS for generating pagination navigation bars. They do not work independently, but are designed to receive other list tags (such as{% archiveList %}/{% tagDataList %}Wait fortype="page"Calculate the pagination data in the mode and convert it into user-friendly "Previous page", "Next page", "Page number", and other HTML links.

The main parameters and output structure include:

  • showParameters: This parameter determines how many page number buttons are displayed at the same time in the pagination navigation bar. For example,show="5"means that at most only 5 page number buttons (such as 1, 2, 3, 4, 5 or 2, 3, 4, 5, 6) are displayed, rather than all page numbers, which helps to keep the pagination bar concise.
  • pagesObject:{% pagination %}Tags will encapsulate all pagination information in apagesobject. This object includes:
    • TotalItems: Total number of documents.
    • TotalPages: Total number of pages.
    • CurrentPage：Current page number.
    • FirstPage/LastPage/PrevPage/NextPagerepresent the objects for the home page, last page, previous page, and next page, each containingName("link text"),Link("link address"), andIsCurrent("whether it is the current page") properties.
    • PagesAn array containing all the middle page button information, each element also hasName/Link/IsCurrentproperties.

By these rich properties, you can fully customize the style and behavior of pagination navigation, from simple text links to complex icon buttons, all can be easily implemented.

III,{% tagDataList %}With{% pagination %}The core logic of pagination联动

Now, let's see how these two tags work together to implement pagination of the Tag document list. The key is{% tagDataList %}Tagstype="page"Parameter.

When{% tagDataList archives with type="page" limit="10" ... %}When executed, it will not only query out 10 document data of the current page and assign it toarchivesVariables, and it will also calculate the pagination information for the entire Tag document collection. This pagination information will not be directly exposed, but will be implicitly stored in the context of the template, waiting for{% pagination %}Tag to “extract” and render.

Followed by{% tagDataList %}the one called after{% pagination pages with show="5" %}the tag, and it will get the previously bytagDataListThe prepared pagination data and encapsulate it in the one we definedpagesIn variables, for template developers to useforUse loops and conditional judgments to build a complete, dynamic pagination navigation.

This design pattern decouples the retrieval of list data and the rendering of pagination navigation, improving the reusability and maintainability of the template.

实战演练：Tag document list pagination template code example

Understood the principle, now let us demonstrate how to implement the pagination feature of Tag document list in AnQiCMS template through a complete code example. Suppose we are developing a Tag detail page (for example/template/tag/list.htmlWe hope to display all documents under a certain Tag here and provide pagination.

Assuming we are on the Tag detail page, the tagId can be omitted, AnQiCMS will automatically identify the current page's TagID. If you need to specify the TagID on a non-Tag detail page, you can add the parameter tagId="YOUR_TAG_ID". The keyword "page" in "type="page" is crucial for implementing pagination, telling the system to prepare pagination data. The value "10" for "limit="10" indicates that 10 documents are displayed per page. {% tagDataList archives with type="page" limit="10" order="id desc" %}"

<div class="tag-documents">
    {% for item in archives %}
        <article class="document-item">
            <h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
            <p class="description">{{item.Description}}</p>
            <div class="meta">
                <span>发布时间：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>浏览量：{{item.Views}}</span>
            </div>
        </article>
    {% empty %}
        <p>该标签下暂无相关文档。</p>
    {% endfor %}
</div>

{# 分页导航区域：紧随tagDataList之后调用，会获取tagDataList生成的分页信息 #}
{# show="7" 表示在分页条上最多显示7个页码按钮 #}
<div class="pagination-container">
    {% pagination pages with show="7" %}
        <ul class="pagination-list">
            {# 首页按钮 #}
            <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                <a href="{{pages.FirstPage.Link}}" title="首页">{{pages.FirstPage.Name}}</a>
            </li>
            {# 上一页按钮 #}
            {% if pages.PrevPage %}
                <li class="page-item">
                    <a href="{{pages.PrevPage.Link}}" title="上一页">{{pages.PrevPage.Name}}</a>
                </li>
            {% endif %}
            {# 中间页码按钮 #}
            {% for item in pages.Pages %}
                <li class="page-item {% if item.IsCurrent %}active{% endif %}">
                    <a href="{{item.Link}}" title="第{{item.Name}}页">{{item.Name}}</a>
                </li>
            {% endfor %}
            {# 下一页