How to retrieve the associated document list and perform pagination based on the Tag ID in the `tagDataList`?

In website content operation, effectively organizing and displaying related content is crucial for enhancing user experience and the SEO performance of the website. AnQiCMS provides powerful tag functions, among whichtagDataListTags are the key tools that help us achieve this goal.It can flexibly retrieve all related document lists based on the specified tag ID, and easily achieve content pagination display through the cooperation with other tags.

UnderstandingtagDataListLabel: Bridge of content association

tagDataListThe core function of the label is to retrieve associated documents based on the label (Tag).Imagine you have a website with many blog posts about 'SEO tips', and you associate them by using the tag 'SEO tips'.Now, you wish to display a list of articles with the tag 'SEO techniques' on a certain page of the website, such as the tag detail page of 'SEO techniques', or in the sidebar of other articles.tagDataListit comes into play.

This label provides several important parameters to finely control the acquisition of content:

  • tagIdThis is the most core parameter, you need to provide a label ID. If you are currently on a label detail page and have not specified explicitlytagIdso thattagDataListWill intelligently automatically read the current page's tag ID. Of course, you can also manually specify any tag ID, such astagId="10".
  • moduleIdIf your website uses a different content model (such as articles, products), you can use this parameter to limit the retrieval to documents under specific models. For example,moduleId="1"可能代表只获取“文章”模型下的文档。
  • order：文档的排序方式。你可以选择按发布时间倒序（order="id desc"）、按浏览量倒序（order="views desc"），or set the custom sorting as set by the background.order="sort desc"）etc.
  • limit: Control the number of documents displayed. If you only want to display a few contents, you can setlimit="5". It also supportsoffsetMode, for examplelimit="2,10"Indicates to fetch 10 data items starting from the second one.
  • typeThis parameter is very critical. It must be set when you need to implement pagination.type="page"If you just want to list a fixed number of documents, you can use the default valuelist.
  • siteIdIf you have enabled the multi-site management feature and want to call data from other sites, you can specify the site ID through this parameter.

tagDataListThe tag will return an array of document objects, usually we will usefora loop to traverse and display each document.

Combinepaginationthe tag to implement elegant pagination

WhentagDataListoftypeThe parameter has been set to"page"it coordinates withpaginationLabels work together to collectively implement pagination display on the page.paginationLabels are responsible for generating page navigation, allowing users to easily switch between different pages.

paginationTags provide ashowParameter, used to control the maximum number of page buttons displayed in the page navigation bar, for exampleshow="5"It will display the page numbers up to 5 before and after the current page.

It will return apagesobject, which includes all the information needed for pagination: total number of records (TotalItems), total number of pages (TotalPages), current page number (CurrentPage），and the homepage（FirstPage), the last page (LastPage）、Previous Page（PrevPage）、Next Page（NextPage）link and name. Most importantly, it also provides aPagesArray, which includes all the detailed information of middle page numbers, convenient for us to loop render page number links.

Actual operation: Get the tag document and display it in pages.

Now, let's look at a specific example of how to combine in a templatetagDataListandpaginationTo implement displaying all documents under the tag on a tag detail page, with pagination functionality.

Assuming we are editing a template namedtag/list.html, this is the default tag document list page template of the security CMS.

{# 首先，使用tagDataList标签获取指定Tag关联的文档列表 #}
{# 注意：将type参数设置为"page"以启用分页功能 #}
{% tagDataList archives with type="page" limit="10" %} {# 每页显示10篇文档 #}

    {% if archives %}
    <div class="tag-document-list">
        {% for item in archives %}
        <div class="document-item">
            <a href="{{item.Link}}">
                {# 显示文档标题 #}
                <h3>{{item.Title}}</h3>
                {% if item.Thumb %}
                {# 如果文档有缩略图，则显示 #}
                <img src="{{item.Thumb}}" alt="{{item.Title}}">
                {% endif %}
                {# 显示文档简介 #}
                <p>{{item.Description}}</p>
                <div class="document-meta">
                    {# 显示文档所属分类 #}
                    <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                    {# 格式化显示发布时间 #}
                    <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                    {# 显示浏览量 #}
                    <span>浏览量：{{item.Views}}</span>
                </div>
            </a>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <p>该标签下暂无任何文档。</p>
    {% endif %}

{% endtagDataList %}

{# 接下来，使用pagination标签生成分页导航 #}
<div class="pagination-container">
    {% pagination pages with show="5" %} {# 最多显示5个页码按钮 #}
    <ul class="pagination-list">
        {# 首页链接 #}
        <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
        </li>
        {# 上一页链接 #}
        {% if pages.PrevPage %}
        <li class="page-item">
            <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
        </li>
        {% endif %}
        {# 中间页码链接 #}
        {% for item in pages.Pages %}
        <li class="page-item {% if item.IsCurrent %}active{% endif %}">
            <a href="{{item.Link}}">{{item.Name}}</a>
        </li>
        {% endfor %}
        {# 下一页链接 #}
        {% if pages.NextPage %}
        <li class="page-item">
            <a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
        </li>
        {% endif %}
        {# 末页链接 #}
        <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
        </li>
    </ul>
    <p class="pagination-info">
        总共有 {{pages.TotalItems}} 篇文档，分为 {{pages.TotalPages}} 页，当前是第 {{pages.CurrentPage}} 页。
    </p>
    {% endpagination %}
</div>

In this code,tagDataListresponsible for querying and providing document data,paginationthen based ontagDataList的查询结果，自动生成了完整的页码导航。通过Englishfor item in archivesWe have sequentially displayed the core information of each document, such as the title, summary, category, publishing time, and views, and have utilizedif item.Thumbto determine if there is a thumbnail. The pagination part is achieved by traversingpages.PagesThe array dynamically generates page link, and provides navigation such as home page, previous page, next page, and last page.

Practical skills to improve content operation efficiency

Rationally utilizetagDataListand pagination features, which can bring many benefits to the website:

  • Optimizing user experience: Users can quickly find related content by tags of interest, and pagination avoids the reading fatigue caused by too long content on a single page.
  • Enhance website navigation: The tab itself is an effective classification navigation, combined with pagination, it can better organize a large amount of content.
  • Improve SEO effect：Clear tab structure and friendly URLs (configured through pseudo-static rules) help search engines better crawl and index website content, improving the ranking of relevant keywords.

Through the flexible application of these tags, Anqi CMS can help you build a content-rich, well-structured, and user-friendly website, thereby making content operation more effective.

Common Questions (FAQ)

1. How to get the current Tag page's Tag ID?

Intag/list.htmlSuch tag detail template,tagDataListTags are not specifiedtagIdWhen a parameter is set, it will intelligently automatically read the corresponding tag ID from the current page URL. Therefore, you usually do not need to manually obtain and pass intagIdyou can use it directly{% tagDataList archives with type="page" limit="10" %}English{% tagDetail with name="Id" %}English

2. How can I display the Tag document for a specific model (such as the "Product" model)?

You can do this ontagDataListtag.moduleIdParameter to specify the model. For example, if the ID of the "product" model is2, then you can use the label like this:{% tagDataList archives with type="page" limit="10" moduleId="2" %}like this,tagDataListOnly the documents associated with this tag and belonging to the 'Product' model will be queried and displayed.

3. Why isn't my pagination showing?

The pagination does not display for several common reasons:

  • typeThe parameter is not set to"page":tagDataListMust be specified explicitlytype="page",paginationThe label to obtain complete pagination data.
  • limitImproperly setIflimitSet too large, for examplelimit="9999"causing all documents to be displayed on one page. Naturally, there will be no pagination. Make surelimitis reasonable, less than the total number of documents.
  • there are not enough documents to trigger paginationIf the number of documents associated with this tag is less than or equal to the one you setlimitThe system will not generate pagination if the number is set. For example, if you set 10 documents per page, but there are only 8 documents under the tag, there will be no pagination.
  • The template is not used correctlypaginationtagsEnsure that you have added the examples provided in the documentation completely and correctly.{% pagination pages with show="5" %}...{% endpagination %}Code block, and the internal.pagesVariable names match with.tagDataListThe output.pagesThe objects.