How to get and display the detailed description and associated documents of a specific tag?

In content management, tags (Tags) are a powerful and flexible tool that helps us organize website content more precisely, improve user experience, and optimize search engine rankings.AnQiCMS fully understands this, providing intuitive and feature-rich template tags that allow you to easily obtain and display detailed descriptions of specific tags and their associated documents.

This article will delve into how to use these tags in AnQiCMS templates to make your website content more relevant and discoverable.

Understand the tags in AnQiCMS

In AnQiCMS's design philosophy, tags are a type of horizontal association and supplementary classification for content.Tags are different from the traditional categories (Category) that usually adopt a hierarchical structure. They are more focused on keyword aggregation and can connect related content across different categories and even different content models.For example, an article can belong to the "news" category and be tagged with "AnQiCMS

In the AnQiCMS backend management interface, you can add, edit, and manage these tags under 'Content Management' -> 'Document Tags'.Each tag can have an independent name, index letter, detailed description, even custom URL aliases and SEO information, all of which lay a solid foundation for the flexible display of front-end content.

Get the detailed description of a specific tag

When we want to display detailed information of a tag itself on a website page, for example, on the tag detail page (usually correspondingtag/detail.htmlortag_detail.htmltemplate) AnQiCMS providestagDetailLabel. This label helps us accurately obtain various properties of a label.

UsetagDetailwhen tagging, you can go throughid(Label ID) ortokenUsing (Tag URL alias) to specify which tag's information to retrieve. If you are currently on a tag detail page and have not specifiedidortoken,tagDetailIt will intelligently obtain the tag information of the current page.

The tag fields you can obtain include:

  • Id: The unique identifier ID of the tag.
  • Title：The display name of the label, such as “AnQiCMS Tutorial”.
  • Link：The access link of the label.
  • Description：Label's detailed description, often used for SEO or providing more background information on the page.
  • ContentIf the backend has filled in rich text content for the label, it can be obtained through this field.
  • FirstLetterThe first letter of the label name (used for indexing).
  • Logo：Label thumbnail or icon.

Here is a sample code snippet to get the label title and description:

{# 假设我们正在一个标签详情页，或者我们知道标签ID是1 #}

{# 获取标签标题 #}
<h1>{% tagDetail with name="Title" %}</h1>

{# 获取标签描述，如果描述包含HTML，需要使用 |safe 过滤器 #}
<div>
    {% tagDetail tagDescription with name="Description" %}
    {{ tagDescription|safe }}
</div>

{# 如果标签有Logo图片，可以这样显示 #}
{% tagDetail tagLogo with name="Logo" %}
{% if tagLogo %}
    <img src="{{ tagLogo }}" alt="{% tagDetail with name='Title' %}" />
{% endif %}

{# 如果标签有富文本内容，同样需要 |safe 过滤器 #}
{% tagDetail tagContent with name="Content" %}
{% if tagContent %}
    <section>{{ tagContent|safe }}</section>
{% endif %}

Please note that when the field content to be retrieved may contain HTML tags (such as Description or Content), it is essential to use|safeFilter to ensure that this HTML content is correctly parsed and displayed by the browser, rather than output as plain text.

Get the list of documents associated with the tag

After the detailed information of the label is displayed, users usually expect to see all related documents (articles, products, etc.) under the label. AnQiCMS providestagDataListLabels, it can retrieve all associated contents according to the specified tags.

tagDataListThe usage method of the tag isarchiveListSimilar, it will return a list of documents (or products). Its main parameters include:

  • tagIdSpecify which tag's documents to retrieve. If the current page is a detail page for a tag, this parameter can usually be omitted, and the system will default to retrieving the current tag ID.
  • moduleIdIf your website has multiple content models (such as articles, products), you can use this parameter to specify only documents under a specific model, for examplemoduleId="1"Get articles,moduleId="2"Retrieve product.
  • limit: Control the number of returned documents, for example,limit="10"It will return up to 10 documents.
  • type: Specify the type of list,"list"For lists without pagination,"page"Used to support paginated lists (to be used with)paginationtags).

tagDataListIt will return an array of document objects, you can useforLoop through these documents and extract information such as titles, links, descriptions, thumbnails, and publishing time.

Here is an example of getting a list of documents associated with the current tag:

`twig {# 获取与当前标签关联的文档列表，每页显示10条，并支持分页 #} {% tagDataList archives with type="page" limit="10" %}

{% if archives %}
    <ul class="related-docs">
        {% for item in archives %}
        <li>
            <a href="{{ item.Link }}">
                <h3>{{ item.Title }}</h3>
                {% if item.Thumb %}
                    <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="doc-thumb" />
                {% endif %}
                <p>{{ item.Description|truncatechars:100 }}</p>
                <span class="doc-info">
                    发布时间：{{ stampToDate(item.CreatedTime, "2006-01-02") }} | 
                    浏览量：{{ item.Views }}
                </span>
            </a>
        </li>
        {% endfor %}
    </ul>

    {# 关联分页标签，用于生成分页导航 #}
    {% pagination pages with show="5" %}
        <nav class="pagination-nav">
            <a href="{{ pages.FirstPage.Link }}" class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}">首页</a>
            {% if pages.PrevPage %}<a href="{{ pages.PrevPage.Link }}" class="page-link">上一页</a>{% endif %}
            {% for p in pages.Pages %}
                <a