In AutoCMS, the Tag (label) feature is an important tool for organizing and associating content, enhancing user experience and website SEO performance.When your website content becomes richer, how to effectively display the document list under a specified Tag and provide clear pagination navigation is crucial for the discoverability of content and the continuous browsing of users.

This article will explain in detail how to easily achieve this feature through several key template tags in AnqiCMS.

一、 Understanding Tag Label and Its Role in AnqiCMS

Tag label, as the name implies, is a way to classify the content of a website by keywords or themes.Different from traditional classification (Category), a document can have multiple Tags at the same time, which makes the relevance between content more flexible and rich.For example, an article about "AnqiCMS template creation" can be tagged with "AnqiCMS", "template creation", "Go language", and so on.

In AnqiCMS backend, you can conveniently manage the "Document Tags" under the "Content Management" module.Each tag can be set with independent name, description and SEO information, bringing more detailed traffic entry to the website.

二、 Core Function Tag Parsing: Implementing Tag Document List and Pagination

To display the document list under a specified Tag on the front-end page and perform pagination, we need to use the following AnqiCMS core template tags:

  1. tagDetailLabel: Get detailed information of the current Tag

    • Function: Used to get the detailed data of the current Tag displayed on the current page, such as tag name, description, link, etc.
    • Use cases:Generally intag/list.htmlThis Tag list page uses it, automatically gets the current Tag's ID.
    • Common parameters:
      • name: Specify the field name to be retrieved, such asTitle(Tag Title),Description(Label description),Link(Tag link) and so on.
      • idortokenIf you want to specify the details of a certain Tag on a non-Tag list page, you can use its ID or URL alias.
    • Example: 
      
{% tagDetail currentTag %} {# 将当前Tag的完整信息赋值给currentTag变量 #}
<h1>标签：{{ currentTag.Title }}</h1>
<p>描述：{{ currentTag.Description }}</p>

  2. tagDataListTags: Get the document list under the specified Tag

    • Function: This is the core tag displayed under the Tag, which can retrieve and list all related documents based on the specified Tag.
    • Use cases:On the Tag list page (such astag/list.html）Used to display all documents under this Tag.
    • Common parameters:
      • tagId：Specify the Tag ID to retrieve the document list in.tag/list.htmlPage, this parameter is usually optional, the system will automatically read the current Tag's ID.
      • moduleIdIf your Tag is associated with different content models (such as articles, products), you can specify which model's document list to retrieve with this parameter.
      • type:Important!When you need pagination, be sure to set it to"page". If only a fixed number is displayed, then"list".
      • limit: How many documents are displayed per page (or per call).
      • order: Sorting rules, such as"id desc"(sorted by ID in descending order),"views desc"(Sorted by views in descending order).
    • Example: 
      
{% tagDataList archives with type="page" limit="10" %} {# 获取当前Tag下，每页10条的文档列表，并赋值给archives变量 #}
    {% for item in archives %}
        {# 文档内容展示 #}
    {% endfor %}
{% endtagDataList %}

  3. paginationTag: Generate pagination navigation

    • Function: IntagDataList(or other list tags, such as)archiveList)usingtype="page"mode,paginationLabels can automatically generate complete pagination navigation links based on the total number of documents on the current page and the number of documents displayed per page.
    • Use cases:Followed bytagDataList(or}archiveList) tag, used to generate pagination HTML.
    • Common parameters:
      • showEnglish: Control how many page links are displayed in pagination navigation (excluding home page, previous page, next page, etc.).
    • Example: 
      
{% pagination pages with show="5" %}
    {# ... 分页链接的HTML结构 ... #}
{% endpagination %}

English: Three, Practice: Build the document list page under Tag tag

According to AnqiCMS template conventions, the template file for displaying the document list under a specific Tag tag is usually located in the directory of the template you are currently usingtag/list.htmlIf you do not have this file, please create it.

The following is a complete one.tag/list.htmlTemplate code example, it will display the current Tag's name and description, as well as the document list under the Tag, and provide pagination features:

`twig {# Inherit base template, such as base.html #} {% extends 'base.html' %}

{# Set page TDK information, AnqiCMS will automatically fill in the TDK Tag #} {% block title %}{% tdk with name=“Title” siteName=true %}{% endblock %} {% block keywords %}{% tdk with name=“Keywords” %}{% endblock %} {% block description %}{% tdk with name=“Description” %}{% endblock %}

{% block content %}

{# 面包屑导航 #}
{% breadcrumb crumbs with index="首页" %}
<ol class="breadcrumb">
    {% for item in crumbs %}
    <li{% if item.IsCurrent %} class="active"{% endif %}>
        {% if item.IsCurrent %}{{item.Name}}{% else %}<a href="{{item.Link}}">{{item.Name}}</a>{% endif %}
    </li>
    {% endfor %}
</ol>
{% endbreadcrumb %}

{# 获取当前Tag的详细信息 #}
{% tagDetail tag %}
<h1 class="page-title">{{ tag.Title }}</h1>
{% if tag.Description %}
<p class="tag-description">{{ tag.Description }}</p>
{% endif %}

{# 获取该Tag下的文档列表，并支持分页 #}
{% tagDataList archives with type="page" limit="10" order="id desc" %}
<div class="document-list">
    {% for item in archives