How to retrieve all documents under a specific Tag and implement pagination using `tagDataList` tag?

In the vast field of content operation, tags (Tags) play a crucial role.They can not only thematize and structure scattered content, but also guide users to conduct in-depth exploration, improve the efficiency of content discovery, and enhance the overall user experience of the website.As an experienced website operations expert, I am well aware of AnqiCMS (Anqi CMS)'s powerful capabilities in tag management and content display.Today, let's delve into a very practical tag in AnqiCMStagDataListHow can you cleverly use it to get all documents under a specific tag and elegantly implement pagination display.

Understand the tag withtagDataListthe core role

First, let's clarify the position of the tag in AnqiCMS.Tags are a way to categorize and index website content, providing a more flexible way to aggregate related topics across different content models (such as articles, products).On the AnqiCMS backend, you can easily manage these tags, including creating, editing their names, descriptions, custom URLs, and more, which in文档标签使用帮助detailed explanations in the document.

When we need to display all the articles, tutorials, or products related to "SEO optimization" on a front-end page, such as a detailed page of a "SEO optimization" tag,tagDataListThe tag has become our helpful assistant. Its main responsibility is to extract all related document data based on the specified tag ID or the current page context.

tagDataListThe tag provides multiple parameters, allowing us to finely control the retrieval of content:

• tagId: This is the core parameter used to specify which label's documents you want to retrieve. Usually, when you are on the AnqiCMS tag detail page (such as/tag/seo.html) Use this tag when the system will intelligently automatically identify the tag ID of the current page, you do not need to specify it manually. However, if you want to call the content under a specific tag at a certain location on a non-tag detail page (such as the home sidebar), you need to specify it explicitlytagId="1"(Assuming the tag ID is 1).
• moduleId: If you only want to retrieve documents under a specific content model (for example, only retrieve documents under the article model and ignore the product model), you can usemoduleId="1"(Assuming the article model ID is 1). This makes the content display more focused.
• order: Used to set the document sorting method, you can sort by the most recent publish time (id desc), Page views (views desc) or custom sorting from the backend (sort desc) to display content.
• limit: Defines the number of documents displayed per page, which is one of the key parameters for pagination. For example,limit="10"This means showing 10 documents per page.
• type="page":This is the core of implementing pagination.Whentypeis set topagethen,tagDataListIt will not only return the document data of the current page but also pass the complete page information to the template for the pagination tags of AnqiCMSpaginationusage.

Elegantly implement pagination display of tag pages

When the number of documents under a specific tag is large, loading all the content at once will not only affect the page loading speed but also cause user browsing fatigue.Therefore, implementing pagination is an inevitable choice to enhance user experience and website performance.AnqiCMS's template engine provides seamless support for this.

Implement pagination mainly involves two steps:

1. UsetagDataListGet the paginated document data: You need to assigntagDataListExplicitly specify in the tagtype="page"andlimitParameters. For example:

   {% tagDataList archives with type="page" limit="10" %}
       {# 在这里循环显示当前页的文档列表 #}
       {% for item in archives %}
           <li>
               <a href="{{ item.Link }}">{{ item.Title }}</a>
               <p>{{ item.Description }}</p>
               <span>发布时间：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
           </li>
       {% empty %}
           <li>当前标签下暂无文档。</li>
       {% endfor %}
   {% endtagDataList %}
   

   here,archivesthe variable will contain all the documents on the current page.emptyPart then handles the case where there are no documents under the label, providing a friendly prompt.

2. BypaginationThe tag generates pagination navigation: Then紧接着tagDataListAfter the label, you can usepaginationTags to render pagination navigation.paginationthe tag will automatically readtagDataListThe page context information passed generates navigation links such as 'Home', 'Previous page', 'Next page', 'Last page', and page number.

   paginationThe tag accepts an important parameter:showIt is used to control the number of page numbers displayed in the middle. For exampleshow="5"It will display 5 page number links before and after the current page.

   paginationThe label will provide an interface for external accesspagesVariable that contains all pagination information, for example:

   • TotalItemsTotal number of documents:
   • TotalPagesTotal number of pages:
   • CurrentPageCurrent page:
   • FirstPage,LastPage,PrevPage,NextPage: Represent the objects for home page, last page, previous page, and next page, includingName(Link Name) andLink(Link Address).
   • Pages: An array containing detailed information about the middle page numbers, each element also containsNameandLink, as well asIsCurrent(whether it is the current page).

   Combining the abovetagDataListcode, the complete pagination implementation is as follows:

   {# 假设您正在 tag/list.html 或 tag/index.html 模板中 #}
   <div class="tag-documents">
       <h1>当前标签：{% tagDetail with name="Title" %}</h1>
   
       {# 获取特定标签下的文档列表并启用分页 #}
       {% tagDataList archives with type="page" limit="10" %}
           <ul>
               {% for item in archives %}
                   <li>
                       <a href="{{ item.Link }}">
                           <h3>{{ item.Title }}</h3>
                           <p>{{ item.Description|truncatechars:100 }}</p>
                           <small>发布于：{{ stampToDate(item.CreatedTime, "2006-01-02") }} | 浏览：{{ item.Views }}</small>
                       </a>
                   </li>
               {% empty %}
                   <li style="text-align: center; padding: 20px;">当前标签下暂无相关文档。</li>
               {% endfor %}
           </ul>
       {% endtagDataList %}
   
       {# 渲染分页导航 #}
       <div class="pagination-nav">
           {% pagination pages with show="5" %}
               <ul class="pagination-list">
                   {% if pages.FirstPage %}
                       <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                           <a href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
                       </li>
                   {% endif %}
   
                   {% 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 %}
   
                   {% if pages.LastPage %}
                       <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                           <a href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a>
                       </li>
                   {% endif %}
               </ul>
               <div class="pagination-info">
                   总计 {{ pages.TotalItems }} 条文档，共 {{ pages.TotalPages }} 页，当前第 {{ pages.CurrentPage }} 页。
               </div>
           {% endpagination %}
       </div>
   </div>
   

This code first utilizestagDataListRetrieve and loop through the documents under the current tag and set 10 items per page. Then,paginationBased on the tagtagDataListThe page data is generated, outputting a complete pagination navigation structure. By addingactiveclass, you can easily provide clear visual feedback to users through CSS.

Operational Practices and Precautions

• Template File Conventions: Typically, the template files for displaying the document list under the tag are placed in `/template/{Your template directory}/tag/