In website content management, categorizing and displaying documents according to their tags (Tag) is an important strategy to enhance user experience and content discoverability.AnQiCMS provides a set of intuitive and powerful template tags that help us easily achieve this goal, while also flexibly supporting pagination functions, even for massive amounts of content, while maintaining the cleanliness of the page and loading speed.
To retrieve and display the document list under a specified tag and implement pagination, we need to use two core tags in the AnQiCMS template engine:tagDataListandpaginationThese two tags work together to help us build a complete tag document list page.
Core tag: Tag document list tagtagDataList
tagDataListThe label is specifically used to retrieve a list of documents associated with a specific label from the database. Its usage is very flexible and can be customized according to our needs.
In use, we usually define it in this form:){% tagDataList archives with tagId="1" type="page" limit="10" %}Here,archivesIt is the variable name we define for the document list, and you can name it according to your habit.
The following is a description of some key parameters:
tagId: This is the most core parameter, used to specify which tag's documents we want to retrieve. You can directly enter the tag ID (for example,tagId="1")，can also let the system automatically identify the current page's tag ID. If the current page itself is a detail page of some tag (for exampletag/list.htmlortag/index.html)tagDataListTags are usually automatically assigned the ID of the tag, so we do not need to specify it manually.type="page"This parameter is crucial, it tells the system that we need a document list that supports pagination. Only when settype="page",tagDataListwill the list data and pagination information be returned together for subsequent processingpaginationUse the label.limitEnglish for controlling how many documents are displayed per page. For example,limit="10"means that 10 documents are displayed per page.moduleIdIf you need to filter label documents under a specific content model (such as "article" or "product"), you can specify the model ID with this parameter. For example,moduleId="1"通常代表文章模型。order：定义文档的排序方式，常见的有id desc（按ID降序，即最新发布）、views desc（按浏览量降序）等。
tagDataListLabel execution will fill the document data that meets the conditions into the variables we define (e.g.,archives) which is an array object, and we can access it byforLoop to traverse and display the content of each document.
Combined with pagination tags.pagination
When we usetagDataListAnd then.typeparameter settingspageAfter that, the system will generate the corresponding pagination data. These pagination data can be accessed via.paginationLabels to render the user-visible pagination navigation.
paginationThe usage of the tag is as follows:{% pagination pages with show="5" %}.pagesIt is a system-generated variable name containing pagination information.
showThis parameter controls how many page numbers are displayed at one time in the pagination navigation. For example,show="5"It will display links to 5 page numbers before and after the current page number.
paginationThe label inside also needs to go throughforLoop through each page link and display navigation elements such as "HomeIt will intelligently generate a complete page navigation based on the current page number and total number of pages.
实战演练：获取并显示指定标签文档列表（含分页）
The following is a complete template code example that demonstrates how to get the document list under a certain tag and implement pagination in AnQiCMS.This is a template for a label detail page.
{# 假设我们正在一个标签详情页面，tagDataList 会自动获取当前标签ID #}
<div class="tag-documents">
{# 获取当前标签的详细信息，例如标签名称和描述 #}
{% tagDetail currentTag with name="Title" %}
{% tagDetail tagDescription with name="Description" %}
<h1>标签：{{ currentTag }}</h1>
{% if tagDescription %}
<p class="tag-description">{{ tagDescription }}</p>
{% endif %}
<ul class="document-list">
{# 使用 tagDataList 标签获取当前标签下的文档列表，并开启分页功能 #}
{% tagDataList archives with type="page" limit="10" order="id desc" %}
{% for item in archives %}
<li class="document-item">
<a href="{{ item.Link }}" class="document-title">
<h3>{{ item.Title }}</h3>
</a>
{% if item.Thumb %}
<div class="document-thumb">
<a href="{{ item.Link }}">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
</a>
</div>
{% endif %}
<p class="document-description">{{ item.Description }}</p>
<div class="document-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>
</li>
{% empty %}
{# 如果当前标签下没有文档，显示此内容 #}
<li class="no-content">
该标签下暂时没有相关文档。
</li>
{% endfor %}
{% endtagDataList %}
</ul>
{# 渲染分页导航 #}
<nav class="pagination-nav">
{% pagination pages with show="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 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>
{# 显示总数和总页码信息，可选择性显示 #}
<div class="pagination-info">
总计 {{ pages.TotalItems }} 篇文档，共 {{ pages.TotalPages }} 页，当前第 {{ pages.CurrentPage }} 页。
</div>
{% endpagination %}
</nav>
</div>
In this example, we first go through:tagDetail标签获取了当前标签的名称和描述，作为页面的标题和简介。接着，利用tagDataListtags, totype="page"The form of obtaining 10 documents per page and sorting by ID in descending order. In the traversalarchivesWhen variables are used, we display the document's title, thumbnail, description, category, publish time, and reading volume. Finally, throughpaginationtags, withshow="5"parameters, the complete page navigation was generated.
Deep Understanding: How to Get Tag ID?
As mentioned before, in the tag detail page,tagDataListit will automatically identify the current page.tagId。If you need to display a list of documents with a specific tag on other non-tag detail pages (such as the homepage or category list page), we need to manually specify.tagId.
Manually obtaintagIdThere are several methods:
- From background viewLogin to AnQiCMS admin panel, go to the 'Content Management' -> 'Document Tags' page, each tag will have a unique ID that can be copied directly for use.
- Use
tagDetailtagsIf you know the name or alias of the label, you can first do so in the templatetagDetailLabel gets its ID. For example: “`twig {% tagDetail specificTag with name=“Id” token=“anqicms” %} {# Assuming the tag alias is