How to display all related document lists under a specific tag, and support pagination in the `tagDataList` tag?

In the daily content management of Anqi CMS, we often need to organize and display website content more flexibly.In addition to the traditional classification system, tags (Tag) provide us with another powerful way to associate content.It can aggregate documents of different categories but similar themes, providing users with a more focused browsing experience.tagDataListLook at how it helps us display all related documents under a specific tag and easily implement pagination.

tagDataList: The core of tag document list.

Imagine that your readers have developed a keen interest in a specific topic (tag) mentioned in an article after reading it, and they hope to see more content related to this topic.This is when a well-designed tab is particularly important.tagDataListLabels are born for this purpose, they can accurately capture all documents associated with a specific label and present them to the user.

Basic usage: Quickly get label documents

If you are developing a tag detail page,tagDataListthe default usage is very concise. The system will intelligently identify the tag ID of the current page and automatically load the documents under the tag:

{% tagDataList archives %}
    {# 循环遍历当前标签下的所有文档 #}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            <p>{{item.Description}}</p>
        </a>
    </li>
    {% empty %}
    <li>
        哎呀，这个标签下暂时没有找到相关文档哦！
    </li>
    {% endfor %}
{% endtagDataList %}

In the above code,archivesis our custom variable name, it will carry fromtagDataListthe document list obtained. Inside the loop, eachitemrepresents a document, we can call itsTitle/Link/Descriptionetc. common fields to display content.

Of course, if you want to use a non-tabbed list or specify a list of documents with other tags, you cantagIdSpecify the tag ID explicitly:

{# 获取ID为5的标签下的文档列表 #}
{% tagDataList archives with tagId="5" %}
    {# ... 遍历文档内容 ... #}
{% endtagDataList %}

Combine pagination: Implement pagination browsing of the tag document list

For tags with rich content, it is obviously not realistic to display all documents at once. At this point, the pagination feature becomes indispensable. The Anqi CMS oftagDataListThe label perfectly supports pagination, making your tabs both beautiful and practical.

To implement pagination,tagDataListthe label needs to be paired withtype='page'Parameters to use, telling the system that we need a paged list. At the same time,limitParameters to set how many documents are displayed per page. The other half of the pagination feature ispaginationThe tag is responsible for generating page navigation.

Here is a complete example showing how to display a paginated document list on a tab:

{# tagDataList 标签，设置为分页模式，并指定每页10条文档 #}
{% tagDataList archives with type="page" limit="10" %}
    {# 循环遍历当前页的文档 #}
    {% for item in archives %}
    <div class="document-item">
        <a href="{{item.Link}}" class="document-link">
            <h5 class="document-title">{{item.Title}}</h5>
            <p class="document-description">{{item.Description}}</p>
            <div class="document-meta">
                <span>发布于：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>阅读：{{item.Views}}次</span>
            </div>
        </a>
        {% if item.Thumb %}
        <div class="document-thumb">
            <a href="{{item.Link}}">
                <img alt="{{item.Title}}" src="{{item.Thumb}}">
            </a>
        </div>
        {% endif %}
    </div>
    {% empty %}
    <div class="empty-state">
        哎呀，这个标签下暂时没有找到相关文档哦！
    </div>
    {% endfor %}
{% endtagDataList %}

{# 分页导航标签，'pages'是tagDataList传递过来的分页对象 #}
<div class="pagination-area">
    {% pagination pages with show="5" %}
        {# 首页链接，如果当前页是首页，添加'current'类名 #}
        <a class="pagination-link {% if pages.FirstPage.IsCurrent %}current{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
        {# 上一页链接，只有存在上一页时才显示 #}
        {% if pages.PrevPage %}
        <a class="pagination-link" href="{{pages.PrevPage.Link}}">上一页</a>
        {% endif %}
        {# 中间页码链接，遍历pages.Pages数组生成每个页码链接 #}
        {% for item in pages.Pages %}
        <a class="pagination-link {% if item.IsCurrent %}current{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
        {% endfor %}
        {# 下一页链接，只有存在下一页时才显示 #}
        {% if pages.NextPage %}
        <a class="pagination-link" href="{{pages.NextPage.Link}}">下一页</a>
        {% endif %}
        {# 尾页链接，如果当前页是尾页，添加'current'类名 #}
        <a class="pagination-link {% if pages.LastPage.IsCurrent %}current{% endif %}" href="{{pages.LastPage.Link}}">尾页</a>
    {% endpagination %}
</div>

In this example,tagDataListtotypeset"page"and uselimit="10"Specify 10 documents per page.paginationThe label is responsible for receivingtagDataListthe pagination data passed (we name it here aspages), and then generates a navigation bar containing 5 page numbers based on theshow="5"parameters, while automatically determining the current page and addingcurrentClass name, for easy styling