How to use the `tagDataList` tag to display documents under a specified Tag in the AnQi CMS template?

As an experienced senior CMS website operation personnel in a security company, I know that high-quality content and convenient user experience are the keys to attracting and retaining users.Tags (Tag) serve as an important dimension for content organization, not only helping users quickly find content of interest, but also an indispensable part of internal link optimization and SEO strategy.In Anqi CMS,tagDataListThe tag is a powerful tool we use to display documents under a specific tag.

This article will elaborate on how to effectively utilize the Anqi CMS template.tagDataListTags to display documents under specific tags, thus optimizing the presentation of your website content.

UnderstandingtagDataListThe role of tags.

tagDataListThe core function of the tag is to retrieve and list all documents associated with the specified tag ID.This is very useful for building tag archive pages, displaying relevant tags on article detail pages, or any scenario that requires aggregating documents by tags.By precisely calling this tag, you can provide users with a more detailed and relevant content navigation experience.

tagDataListBasic usage of tags

tagDataListThe usage of the tag is similar to other list tags, you need to define a variable to receive the returned document list, and iterate through these documents within the tag. The basic usage is to specify atagIdTo get all documents under this tag:

{% tagDataList archives with tagId="1" %}
    {% for item in archives %}
        <div class="tag-document-item">
            <a href="{{item.Link}}">{{item.Title}}</a>
            <p>{{item.Description}}</p>
        </div>
    {% endfor %}
{% endtagDataList %}

In the above example,archivesIs the variable to receive the document list.tagId="1"Indicates that we want to retrieve all documents under the tag with ID 1. If your template is currently on the details page or list page of some tag and you omit thetagIdparameter,tagDataListIt will automatically identify and retrieve the document under the current page's tag ID.

tagDataListCommon parameters of the tag

In order to more accurately control the display of the document,tagDataListThe tag provides multiple parameters for adjustment:

• tagId: This is the core parameter to specify which label under the document to display.You can directly find the tag ID in the background management interface and assign it to this parameter.As mentioned before, omitting this parameter on the tag-related page will automatically retrieve the tag ID of the current page.
• moduleId: If your website has multiple content models (such as articles, products), and you only want to display tag documents under specific models, you can usemoduleIdparameters to filter. For example,moduleId="1"Used to retrieve documents under the article model.
• order: This parameter is used to specify the document sorting method. Common sorting rules include:
  • order="id desc": Sorted in reverse order by document ID (latest release).
  • order="views desc": Sorted in reverse order by views (popular documents).
  • order="sort desc": Sort in reverse order according to the custom sorting in the background.
• limit: Used to control the number of documents returned. For example,limit="10"This parameter is very useful when you only want to display the first 10 documents. It is used when you do not need pagination and want to display a fixed number of 'recommended' or 'latest' documents.It also supports the "offset" mode, for examplelimit="2,10"Will retrieve 10 documents starting from the 2nd document.
• type: This parameter is the key to controlling the list behavior.
  • type="list": Default value, only displaylimitThe parameter specifies the number of documents, no pagination feature is provided.
  • type="page": Enable pagination feature. When set totype="page"When, it is usually combinedpaginationTags are used together to generate a complete page navigation.
• siteId: If your CMS is a multi-site deployment and you want to call documents under other sites, you can specifysiteIdto achieve.

Loop through and display document data

tagDataListreturnedarchivesA variable is an array of document objects. In{% for item in archives %}the loop,itemA variable represents each document in the current loop. You can accessitemvarious properties of the object to display document information:

• item.Id: Document ID.
• item.Title: Document title.
• item.Link: The access link of the document.
• item.Description: Document summary or description.
• item.Thumb: Document thumbnail URL.
• item.Logo: Document cover first image URL.
• item.CreatedTime: Document creation time (timestamp format). Usually needs to be obtained throughstampToDateFiltered for formatting, for example.{{stampToDate(item.CreatedTime, "2006-01-02")}}.
• item.Views: Document views.
• item.CategoryId: Document category ID.
• And other custom fields set in the document model.

Implement a complete tag archive page with pagination tags.

For a complete tag archive page, we usually need to display a large number of documents and provide pagination functions to allow users to browse. At this point, we need totagDataListoftypethe parameter to"page"and combiningpaginationTags are used together.

This is a complete example showing how to use in the tag archive pagetagDataListandpagination:

{# tag/list.html 或 tag/index.html 模板文件 #}

{# 页面标题和描述可以从当前Tag详情中获取 #}
<h1>{% tagDetail with name="Title" %}</h1>
<p>{% tagDetail with name="Description" %}</p>

<div class="tag-documents-list">
    {# 使用 tagDataList 获取当前Tag下的文档，并开启分页功能，每页显示10条 #}
    {% tagDataList archives with type="page" limit="10" %}
        {% for item in archives %}
        <div class="document-item">
            {% if item.Thumb %}
            <a href="{{item.Link}}" class="document-thumb">
                <img alt="{{item.Title}}" src="{{item.Thumb}}">
            </a>
            {% endif %}
            <div class="document-info">
                <a href="{{item.Link}}" class="document-title">
                    <h3>{{item.Title}}</h3>
                </a>
                <p class="document-description">{{item.Description}}</p>
                <div class="document-meta">
                    <span>发布于：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                    <span>阅读量：{{item.Views}}</span>
                    {# 如果需要显示分类名称，可以嵌套 categoryDetail #}
                    <span>分类：<a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{% categoryDetail with name='Title' id=item.CategoryId %}</a></span>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="no-content">
            该标签下暂无任何文档内容。
        </div>
        {% endfor %}
    {% endtagDataList %}

    {# 分页导航区域 #}
    <div class="pagination-area">
        {% pagination pages with show="5" %}
            <nav>
                <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 pageItem in pages.Pages %}
                    <li class="page-item {% if pageItem.IsCurrent %}active{% endif %}">
                        <a href="{{pageItem.Link}}">{{pageItem.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>
            </nav>
            <div class="pagination-summary">
                共 {{pages.TotalItems}} 条文档，{{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页。
            </div>
        {% endpagination %}
    </div>
</div>

In this example, we firsttagDetailTo get the current tag title and description. Then,tagDataListStart withtype="page"The pattern to get the document and define thelimitControl the number of items displayed per page. Next,paginationTag usagetagDataListGenerated pagination data, builds a complete and navigable pagination list, greatly enhancing the browsing experience of users on the tag archive page.

Operational personnel tips

As a website operator, use it reasonablytagDataListIt can not only enrich the display of website content but also enhance user satisfaction and SEO performance. It is recommended that when you maintain tags in the background, ensure that the tag names are descriptive and highly relevant to the content, and avoid creating too many redundant or sparse content tags.At the same time, pay attention to the TDK settings of the tab page to help the search engine better understand the themes of these aggregated pages.A high-quality tag page can effectively increase the internal link structure of a website, enhancing the overall search engine friendliness.

Frequently Asked Questions

Q1:tagDataListandarchiveListWhat are the core differences in the use of these tags?

tagDataList主要用于根据TagTo aggregate and display documents, the core filtering criterion is the tag ID associated with the document. It is very suitable for building tag archive pages or displaying related content under the same tag in the article sidebar. AndarchiveListThis is a more general document list label, which can beCategory (CategoryId)/Model (ModuleId)/Recommended attribute (Flag)/Search keyword (q)With various conditions to filter and display documents. In short, when you need to organize content based on tags, choosetagDataList; When you need to list documents based on categories or other general properties,archiveListis more appropriate.

Q2: How to automatically obtain the current Tag ID on the Tag detail page without manually specifyingtagIdthe parameter?

When you are designing the Tag detail page of AnQi CMS (usuallytag/detail.htmlor`