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

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 together, bringing users a more focused browsing experience.Today, let's delve deeply into a very practical template tag in Anqi CMS—tagDataListLook at how it helps us display all related document lists under a specific tag and easily implement pagination.

tagDataList: The core of tag document lists.

Imagine that your reader has developed a keen interest in a specific topic (tag) mentioned in an article after reading it, and hopes to see more content related to that topic.At this point, a well-designed tab page becomes particularly important.tagDataListTags are born for this, they can accurately capture all documents associated with a specific tag and present them to the user.

Basic usage: Quickly retrieve tag documents

If you are developing a tag detail page,tagDataListthe default usage is very concise. The system will intelligently recognize 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 code above,archivesis a custom variable name that will carry fromtagDataListthe document list obtained. Inside the loop, eachitemrepresents a document, we can call itsTitle/Link/Descriptioncommon fields to display the content.

Of course, if you want to use non-tab pages or specify document lists with other tags, you cantagIdThe parameter explicitly specifies the tag ID:

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

Combine pagination: Implement pagination browsing of tag document lists

For content-rich tags, it is obviously unrealistic to display all documents at once, at this point, the pagination feature becomes indispensable. AnQi CMS'stagDataListThe tab supports pagination perfectly, making your tab page both beautiful and practical.

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

Below is a complete example showing how to display a paginated document list in 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,tagDataListtotypeis set to"page"andlimit="10"Specify displaying 10 documents per page.paginationThe tag is responsible for receivingtagDataListPass the pagination data (we name it here aspages), and according toshow="5"parameters, generate a navigation bar containing 5 page numbers, while automatically judging the current page and addingcurrentClass name, convenient for you to style