How to display the document list under the specified Tag label and implement pagination?

In AnQi CMS, the Tag (tag) function is an important tool for organizing and linking 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 function in AnqiCMS by using several key template tags.

One, Understand the Tag label and its role in AnqiCMS

Tag label, as the name implies, is a way to classify website content with keywords or themes.Different from traditional classification (Category), a document can have multiple Tags at the same time, making the association 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.

On AnqiCMS backend, you can conveniently manage the document tags under the 'Content Management' module.Each tag can be set with an independent name, description, and SEO information, bringing a more detailed traffic entrance to the website.

Two, Core function tag analysis: Implementing Tag document list and pagination

We need to use several AnqiCMS core template tags to display the document list under a specified Tag on the front-end page and implement pagination.

1. tagDetailLabel: Get the details of the current Tag

   • Function:Used to get the detailed data of the Tag displayed on the current page, such as the name, description, and link.
   • Usage scenario:Generally speaking,tag/list.htmlThis Tag list page is used, automatically obtaining the ID of the current Tag.
   • Common parameters:
     • name: Specify the field name to be retrieved, such asTitle(Label title),Description(Label description),Link(Tag link) and others.
     • idortokenIf you want to specify getting the details of a 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 document, which can retrieve and list all related documents based on the specified Tag.
   • Usage scenario:On the Tag list page (such astag/list.htmlUsed to display all documents under the Tag.
   • Common parameters:
     • tagId: Specify the Tag ID to retrieve the document list in.tag/list.htmlPage, this parameter is usually omitted, 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 through this parameter.
     • type:Important!When you need pagination functionality, be sure to set it to"page". If only a fixed number is displayed, it is"list".
     • limit: How many documents are displayed per page (or per call).
     • order: Sorting rules, such as"id desc"(in reverse order by ID),"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. paginationLabel: Generate pagination navigation

   • Function:IntagDataList(Or other list labels, such asarchiveList)type="page"The mode,paginationLabels can automatically generate a complete pagination navigation link based on the total number of documents on the current page and the number of documents displayed per page.
   • Usage scenario:FollowingtagDataList(orarchiveListAfter the tag, it is used to generate the pagination HTML.
   • Common parameters:
     • showIt controls how many page number links are displayed in the pagination navigation (excluding the home page, previous page, next page, etc.).
   • Example:

     
     {% pagination pages with show="5" %}
         {# ... 分页链接的HTML结构 ... #}
     {% endpagination %}
     

Chapter 3: Practical: Build the document list page under Tag tag

According to the AnqiCMS template conventions, the template file for displaying the document list under a specific Tag label is usually located in the current template directory you are using.tag/list.htmlIf you don't have this file, please create it.

The following is a completetag/list.htmlTemplate code example, it will display the name and description of the current Tag, as well as the document list under the Tag, and provide pagination functionality:

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

{# Set page TDK information, AnqiCMS will automatically fill in the Tag's TDK #} {% 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