As a senior CMS website operation personnel in the security industry, I know that high-quality content and convenient user experience are the key to attracting and retaining users.Labels (Tag) serve as an important dimension for content organization, not only helping users quickly find the content they are interested in, but also an indispensable part of internal link optimization and SEO strategy.tagDataListThe label is a powerful tool we use to display documents under specified labels.
This article will detail how to effectively utilize the Anqi CMS template.tagDataListTags to display documents under specific tags, thereby optimizing the presentation of your website content.
UnderstandingtagDataListThe tag and its function
tagDataListThe core function of the label is to retrieve and list all documents associated with the specified label ID.This is very useful for building tag archive pages, displaying related tag content 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 refined and relevant content navigation experience.
tagDataListBasic usage of the tag
tagDataListThe usage of labels is similar to other list labels, you need to define a variable to receive the returned document list, and iterate over these documents within the tag. The basic usage is to specify atagIdGet 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"Represents 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 omittagIdparameters,tagDataListThe system will automatically recognize and retrieve the document ID under the current page tag.
tagDataListCommon parameters of the tag.
To control the display of documents more accurately,tagDataListThe tag provides multiple parameters for adjustment:
tagIdThis is the core parameter to be displayed under the specified tag.You can directly find the tag ID in the background management interface and then assign it to this parameter.As previously mentioned, omitting this parameter will automatically retrieve the current page's tag ID in label-related pages.moduleIdIf your website has multiple content models (such as articles, products), and you only want to display tag documents under specific models,moduleIdparameter for filtering. For example,moduleId="1"English for: Typically used to obtain documents under the article model.orderEnglish for: This parameter is used to specify the sorting method of the document. Common sorting rules include:order="id desc"English for: Sorted in reverse order by document ID (latest release).order="views desc"：按浏览量倒序排列（热门文档）。order="sort desc"：按后台自定义排序倒序排列。
limit: 用于控制返回文档的数量。例如，limit="10"limit="2,10"English From the 2nd document, 10 records will be retrieved.type: This parameter is the key to controlling the behavior of the list.type="list": Default value, only displaylimitThe parameter specifies the number of documents, without providing pagination functionality.type="page"：Turn on pagination feature. When set totype="page", it is usually combined withpaginationtag to generate a complete page navigation.
siteId: If your security CMS is deployed in multi-site mode and you want to call label documents under other sites, you can do so by specifyingsiteIdto achieve.
Loop through and display document data
tagDataListreturnedarchivesThe variable is an array of document objects. In{% for item in archives %}in the loop,itemThe 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: English document summary or description.item.Thumb: English document thumbnail URL.item.Logo: English document cover main image URL.item.CreatedTime: English document creation time (timestamp format). Usually needs to bestampToDatea filter to format, for example{{stampToDate(item.CreatedTime, "2006-01-02")}}.item.Views: English document view count.item.CategoryId: English document category ID.- And other custom fields set in the document model.
Combined with pagination tags to implement a complete tag archive page.
For a complete tag archive page, we usually need to display a large number of documents and provide pagination functions so that users can browse. At this time, we need totagDataListoftypeparameter settings"page"and combine.paginationtags to be used.
The following is a complete example that shows how to usetagDataListandpagination:
{# 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 first go through:tagDetailto get the title and description of the current tag. Then,tagDataListBytype="page"the pattern to get the document and definelimitControl the number of items displayed per page. Next,paginationTag utilizationtagDataListGenerated pagination data, constructing a complete and navigable pagination list, greatly enhancing the browsing experience of users on the tag archive page.
Tips from the operations team.
As a website operator, use it reasonablytagDataListIt can not only enrich the display of the website content, but also improve user satisfaction and SEO performance.Please ensure that the tag names are descriptive and highly relevant to the content when maintaining tags in the background, 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 search engines better understand the themes of these aggregated pages.High-quality tag pages can effectively increase the internal link structure of the website, enhancing the overall search engine friendliness.
Frequently Asked Questions
Q1:tagDataListandarchiveListWhat are the core differences between these two tags in use?
tagDataListMainly used for according toLabel (Tag)To 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.archiveListThis is a more general document list tag, which can beCategorized (CategoryId)/Model (ModuleId)/Recommended Attribute (Flag)/Search keyword (q)Using 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 attributes,archiveListMore suitable.
Q2: How to automatically obtain the current Tag's ID on the Tag detail page without manually specifyingtagId参数？
When you are designing the tag detail page of the Security CMS (usuallytag/detail.htmlor`