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 functions is a common need to improve user experience and website SEO performance.Today, we will delve deeply into two core template tags in AnQiCMS{% tagDataList %}and{% pagination %}How to cleverly combine to build a user-friendly Tag document pagination list.

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

I.{% tagDataList %}Your Tag content aggregator:

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

The core function of this tag is:

  • Flexible specification of Tag: You can control it throughtagIdExplicitly specify a Tag's ID to retrieve its documents, or omit it on the Tag details page (for example/tag/tagname.html) in the omissiontagIdParameters, let AnQiCMS intelligently identify the Tag of the current page and automatically load its document.
  • Filter content model: PassmoduleIdParameters, you can limit to only retrieve Tag documents under specific content models (such as "article model", "product model", etc.), ensuring the relevance of the content.
  • Control the number of displays.: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 other methods.

However, to implement pagination, a crucial parameter istype.When you need to convert{% tagDataList %}Make sure to paginate the document list that is obtained and display it.typethe parameter to"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 scrolling experience

{% pagination %}Tags are a powerful tool in AnQiCMS used to generate pagination navigation bars. They do not work independently but are designed to receive other list tags such as{% archiveList %}/{% tagDataList %}and so on,type="page"The pagination data calculated in mode and converted into user-friendly "Previous page", "Next page", "Page number", and other HTML links.

It includes the main parameters and output structure:

  • showParameterThis parameter determines how many page number buttons are displayed at the same time on the pagination navigation bar. For example,show="5"It means that at most only 5 page number buttons are displayed (such as 1, 2, 3, 4, 5 or 2, 3, 4, 5, 6), instead of all page numbers, which helps to keep the pagination bar concise.
  • pagesobject:{% pagination %}The tag wraps all pagination information in apagesobject. This object includes:
    • TotalItems: Total document count.
    • TotalPages: Total number of pages.
    • CurrentPage: Current page number.
    • FirstPage/LastPage/PrevPage/NextPage: which represent the home page, end page, previous page, and next page objects, each of which containsName(Link text),Link(link address) andIsCurrent(Whether the current page) and other properties.
    • Pages: An array containing information about all the middle page number buttons, each of which also hasName/Link/IsCurrentProperty.

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

Third,{% tagDataList %}with{% pagination %}: The core logic of pagination联动

Now, let's take a look at how these two tags work together to implement pagination of the Tag document list. The key is{% tagDataList %}label'stype="page"Parameter.

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

Followed by.{% tagDataList %}Called after{% pagination pages with show="5" %}Label, it will get the previous one from this context bytagDataListReady pagination data, and encapsulate it into the one we define.pagesVariables used, for template developers.forBuild a complete, dynamic pagination navigation with loops and conditional judgments.

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

Four, Practical Training: Tag document list pagination template code example

Understood the principle, now let's demonstrate how to implement pagination for the Tag document list in the AnQiCMS template with 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 browsing.

`twig {# Assume we are on the Tag detail page, tagId can be omitted, AnQiCMS will automatically identify the TagID of the current page #} {# If you need to specify a TagID on a non-Tag detail page, you can add the parameter tagId=“YOUR_TAG_ID” #} {# type=“page” is the key to implementing pagination, it tells the system to prepare pagination data #} {# limit=“10” means 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 %}
            {# 下一页