How to get and display the list of all documents associated with a specified Tag?

Manage content in AnQi CMS, in addition to organizing through categories, flexibly using the "Tag" feature is also a key to improving the aggregation ability of website content and user experience.Tags can connect documents of different categories and models but related to the same theme, providing visitors with more opportunities to discover content.How specifically 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 does not depend on specific categories or models, and 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 belonging to different content models, can both be tagged with 'SEO', making it convenient for users to view all related content through the 'SEO' tag.

In the AnQi CMS template system, there are several tags closely related to tags, which together form the foundation for the display of tag content:

  • tagListTags:Used to obtain the tag list in the website, for example, displaying popular tags or relevant tags of the current document.
  • tagDetailTags:Used to obtain detailed information about a specific tag, such as tag name, description, etc., very suitable for use on tag detail pages.
  • tagDataListTags:This is the main character of today, it is specifically used to obtain the document list associated with a specified tag.

By combining these tags, we can easily achieve the need for aggregating various tag content displays.

Core: How to obtain the document list associated with a specified Tag

The most direct and effective way to obtain all documents associated with a specified tag is to usetagDataListLabel. This label is designed to be very intuitive, just tell it which label you are interested in, and it will list all related documents for you.

tagDataListBasic usage of tags

{% 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 have defined a variablearchivesTo store the list of documents obtained.
  • tagId="1"This is the most critical parameter, it specifies which tag under which we want to retrieve the documents. You need to replace"1"with the actual ID of the target tag.
  • type="page"This parameter indicates that we want to display the document list in a paginated form, so that subsequent operations can combinepaginationThe tag implements pagination navigation. If you do not need pagination and just want to get a fixed number of lists, you can usetype="list".
  • limit="10": Specify 10 documents per page.
  • {% for item in archives %}: PassforLoop througharchivesEach 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 the various properties of the document.
  • {{stampToDate(item.CreatedTime, "2006-01-02")}}: The document'sCreatedTimeIt is a timestamp, we need to usestampToDatea filter to format it into a readable date format.
  • {% empty %}: This is a very practical structure, whenarchivesWhen the list is empty (i.e., no related documents are found), it will display{% empty %}Content within the block, avoid blank pages.

Practice: Display document list in Tag detail page

In 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.htmlOr a custom label template). On this page, it is more convenient to get the list of documents associated with the current label, becausetagDataListThe label automatically recognizes the label ID of the current page.

Here is a complete example of how to display tag information and its associated document list on a tag detail page (assuming the page URL containstagIdortoken)

`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>
        {%