Manage content in AnQi CMS, in addition to organizing through categories, flexibly using the "Tag" feature is also the key to improving the aggregation ability of website content and user experience.Tags can connect documents of different categories, models, but related to the same theme, providing visitors with more entry points to discover content.How can we obtain and display the list of all documents associated with the specified tags?Next, we will delve into this practical skill.
Understanding the tag system of Anqi CMS
The tag design of Anqi CMS is very flexible, it is not dependent on a specific category or model, and it can cross content types to associate documents with similar themes.For example, an article about 'SEO optimization' and a product introduction about 'SEO tools', although they belong to different content models, both can be tagged with 'SEO' to facilitate users in viewing all related content through the 'SEO' tag.
In the template system of AnQi CMS, there are several tags closely related to tags, which together form the basis for displaying tag content:
tagListTags:Used to obtain the tag list in the website, such as displaying popular tags or related tags of the current document.tagDetailTags:Used to obtain detailed information of a specific tag, such as tag name, description, etc., very suitable for use on the tag detail page.tagDataListTags:This is the main character of our day, it is specifically used to obtain the document list associated with the specified tag.
By combining these tags, we can easily achieve the demand for aggregating various tag content display.
Core: How to get the document list associated with a specified Tag
The most direct and effective way to get all documents associated with a specified tag is to usetagDataListLabels. This label is designed very intuitively, and it only needs to be told which label you are interested in, and it will list all relevant documents for you.
tagDataListBasic usage of the tag
{% tagDataList archives with tagId="1" type="page" limit="10" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
<p>{{item.Description}}</p>
<div>
<span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
<span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>浏览量：{{item.Views}}</span>
</div>
</a>
{% if item.Thumb %}
<a href="{{item.Link}}">
<img alt="{{item.Title}}" src="{{item.Thumb}}">
</a>
{% endif %}
</li>
{% empty %}
<li>当前标签下还没有任何文档。</li>
{% endfor %}
{% endtagDataList %}
In the above code snippet:
tagDataList archivesWe defined a variablearchivesStore the obtained document list.tagId="1"This is the most critical parameter, specifying which label's documents we want to retrieve. You need to replace"1"with the actual ID of the target label.type="page"This parameter indicates that we want to display the document list in a paginated form, so that subsequent operations can be combined withpaginationTag implementation of pagination navigation. If you do not need pagination and only want to get a fixed number of items, you can usetype="list".limit="10": Specify 10 documents per page.{% for item in archives %}: Throughforto iteratearchivesEach document in the variable. Inside the loop,itemthe variable represents the current document object you are processing, you can accessitem.Title/item.Link/item.Descriptionto access various properties of the document.{{stampToDate(item.CreatedTime, "2006-01-02")}}: The document'sCreatedTimeThis is a timestamp, we need to usestampToDatethe formatter to convert it into a readable date format.{% empty %}: This is a very practical structure, whenarchivesThe list is empty (i.e., no related documents are found), and it will display{% empty %}the content within the block to avoid a blank page.
Practice: Display the document list on the Tag detail page
In the AnQi CMS, it is common to create a dedicated page for a tag to display all documents under that tag, such as/template/default/tag/list.html（or custom tag template）。On this page, it is more convenient to get the document list associated with the current tag, becausetagDataListthe tag will automatically identify the tag ID of the current page.
Below is a complete example showing how to display label information and its associated document list on a label detail page (assuming the page URL containstagIdortoken) Display the label information and its associated document list:
`twig {% extends 'base.html' %} {# Inherit the base template to ensure the page structure is complete #}
{% block title %}
<title>{% tdk with name="Title" siteName=true %} - 安企CMS</title>
{% endblock %}
{% block content %}
<div class="tag-header">
<h1>标签：{% tagDetail with name="Title" %}</h1>
<p class="tag-description">{% tagDetail with name="Description" %}</p>
<span class="tag-letter">首字母：{% tagDetail with name="FirstLetter" %}</span>
</div>
<div class="tag-documents">
<h2>“{% tagDetail with name="Title" %}”相关文档</h2>
<ul>
{% tagDataList archives with type="page" limit="10" order="id desc" %} {# 默认获取当前标签文档，并按ID倒序 #}
{% for item in archives %}
<li>
<h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
{% if item.Thumb %}
<img src="{{item.Thumb}}" alt="{{item.Title}}" style="float: left; margin-right: 15px; width: 120px; height: 90px; object-fit: cover;">
{% endif %}
<p>{{item.Description}}</p>
<div class="doc-meta">
<span>分类：<a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{% categoryDetail with name='Title' id=item.CategoryId %}</a></span>
<span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>浏览量：{{item.Views}}</span>
</div>
<div style="clear: both;"></div>
</li>
{% empty %}
<li>非常抱歉，当前标签下暂时没有找到任何文档。</li>
{% endfor %}
{% endtagDataList %}
</ul>
{# 分页导航 #}
<div class="pagination-wrapper">
{% pagination pages with show="5" %}
<ul>
{% if pages.FirstPage %}
<li {% if pages.FirstPage.IsCurrent %}class="active"{% endif %}><a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
{% endif %}
{% if pages.PrevPage %}
<li><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
{% endif %}
{% for p in pages.Pages %}
<li {% if p.IsCurrent %}class="active"{% endif %}><a href="{{p.Link}}">{{p.Name}}</a></li>
{% endfor %}
{% if pages.NextPage %}
<li><a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a></li>
{% endif %}
{% if pages.LastPage %}
<li {% if pages.LastPage.IsCurrent %}class="active"{% endif %}><a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a></li>
{% endif %}
</ul>
{%