How to manage and display document tags and associated document lists for `tagList` and `tagDataList` tags?

In content management, tags (Tag) are an important bridge connecting content, enhancing user experience, and optimizing search engine performance. Anqi CMS understands its importance and provides powerful tag management functions, and throughtagListandtagDataListThese core tags enable content operators to flexibly display and manage document tags and their associated content.

Tags: A tool for content classification and discovery.

In AnQi CMS, tags are not just simple keywords; they are a refined way of organizing content.You can add one or more tags to each article or product when publishing documents, and you can also create and manage tags separately under the 'Content Management' module in the background.Each tag can have an independent name, custom URL, SEO title, keywords, and description, which lays a solid foundation for the search engine optimization of the tag page.By tags, users can quickly find all content related to a specific topic, and search engines can also better understand the structure and thematic relevance of a website's content, thereby improving the visibility of the website.

tagList: Build a flexible tag display method.

When you want to display a series of popular tags, related tags, or all tags at any location on the website, such as in the sidebar, footer, or a dedicated tag index page (usuallytag/index.html),tagListLabels are your ideal choice.

Its basic purpose is to retrieve and cycle through the set of tags on the website.

While usingtagListYou can finely control the range of tags displayed by passing some parameters.

  • limit: Control the number of displayed tags. For example,limit="10"Only 10 tags will be displayed. If you want to start displaying 5 tags from the second tag, you can uselimit="2,5"such an offset mode.
  • itemId: If you want to display tags associated with a specific document, you can pass the document's ID. If set toitemId="0"It will retrieve all tags without automatically associating the documents of the current page.
  • categoryId: When you need to filter tags under a specific category, you can use this parameter, for example,categoryId="1,2,3"To display the tags of category ID 1, 2, 3.
  • letter: If you want to filter tags in alphabetical order, for example, to display only tags that start with 'A', you can useletter="A".
  • type="page": This parameter is very important, it allows you to implement pagination of the tag list on the tag index page(tag/index.html).

A simpletagListtag cloud example:

<div>
    <h4>热门标签</h4>
    {% tagList tags with limit="20" %}
    {% for item in tags %}
        <a href="{{item.Link}}" title="{{item.Description}}">{{item.Title}}</a>
    {% endfor %}
    {% endtagList %}
</div>

Display all tags with pagination on the tag index page:

When intag/index.htmltemplate usagetype="page"when using parameters, you can combinepaginationtags to implement pagination of the tag list:

<div>
    <h1>所有标签</h1>
    {% tagList tags with type="page" limit="30" %}
    <ul>
    {% for item in tags %}
        <li>
            <a href="{{item.Link}}">
                <h5>{{item.Title}}</h5>
                <div>{{item.Description}}</div>
            </a>
        </li>
    {% empty %}
        <li>目前没有标签可供显示。</li>
    {% endfor %}
    </ul>
    {% endtagList %}

    {# 标签列表分页代码 #}
    <div>
        {% pagination pages with show="5" %}
        {# 首页、上一页、中间页、下一页、尾页等导航元素 #}
        {% for pageItem in pages.Pages %}
            <a class="{% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
        {% endfor %}
        {% endpagination %}
    </div>
</div>

BytagListYou can easily display tags in the corners of the website to guide users to explore the topics they are interested in.

tagDataList: Display related documents under the tags

When a user clicks on a tag, or you need to display all the documents under a tag (usuallytag/list.htmlortag_list.html),tagDataListthe tag comes into play.

Its core function is: to retrieve and display all documents associated with a specified tag ID.

tagDataListIt also provides a series of parameters to help you control the retrieval and display of documents:

  • tagIdThis istagDataListThe most critical parameter, you need to specify clearly which document under the label you want to obtain. On the label detail page, this ID is usually automatically obtained from the URL.
  • moduleId: If you only want to display documents under specific content models (such as article models, product models), you can use this parameter to filter.
  • order: Control the sorting method of documents, for exampleorder="id desc"(Sorted by ID in descending order, i.e., the most recent release) ororder="views desc"(Sorted by views in descending order, i.e., the most popular).
  • limit: Controls the number of documents displayed, also supports offset mode.
  • type="page": Allows you to implement pagination display of related documents on the tag document list page.
  • siteIdIn a multi-site environment, it is used to specify which site to retrieve data from.

An example of displaying a document list under a specific tag.

{# 在标签详情页，tagId 通常会自动从URL获取，或者您可以通过 tagDetail 标签获取 #}
{% tagDetail currentTag with name="Id" %} {# 获取当前页面的标签ID #}

<div>
    <h1>标签：{% tagDetail with name="Title" %}</h1>
    <p>{% tagDetail with name="Description" %}</p>

    {% tagDataList archives with tagId=currentTag type="page" limit="10" order="id desc" %}
    {% for item in archives %}
        <div class="document-item">
            <a href="{{item.Link}}">
                {% if item.Thumb %}<img src="{{item.Thumb}}" alt="{{item.Title}}">{% endif %}
                <h3>{{item.Title}}</h3>
                <p>{{item.Description}}</p>
                <span>发布时间：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>浏览量：{{item.Views}}</span>
            </a>
        </div>
    {% empty %}
        <p>该标签下暂无相关文档。</p>
    {% endfor %}
    {% endtagDataList %}

    {# 关联文档列表分页代码 #}
    <div>
        {% pagination pages with show="5" %}
        {# 分页导航元素 #}
        {% for pageItem in pages.Pages %}
            <a class="{% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
        {% endfor %}
        {% endpagination %}
    </div>
</div>

BytagDataListYou can create dynamic and rich landing pages for each tag, allowing users to conveniently browse all documents under their interested topics, greatly enhancing the discoverability of content.

Integrate and Apply: Build an Efficient Tag Ecosystem

tagListandtagDataListThese tags usually work together to build an efficient tag content ecosystem. You can:

  1. On the homepage or sidebarUsetagListDisplay popular or recommended tags to attract user clicks.
  2. When a user clicks on a tag, it will jump to the detail page of that tag (tag/list.html), where you can make use oftagDetailLabel retrieves the detailed information of the current label (such as name, description, SEO data) as the page title and introduction, and then usestagDataListDynamically loads and displays all documents related to the label.

This combination not only strengthens the internal link structure of the website, is of great benefit to search engine optimization, but also provides users with a clear navigation path, making it easier for them to discover and consume relevant content