How to use AnQiCMS tags to display document lists under specific tags?

In AnQiCMS, a Tag is a powerful content organization method that helps us associate content with different categories and models more flexibly.Using tags wisely not only optimizes the website's SEO performance but also significantly enhances the user experience in discovering content on the website.When we want to showcase all related documents under a specific tag, AnQiCMS provides a set of intuitive and efficient template tags to meet this need.

This article will detail how to easily display a list of documents under a specific tag on the website frontend using the built-in template tags of AnQiCMS.

Understand the 'Tags' in AnQiCMS

In the AnQiCMS backend, we can manage all website tags uniformly through the 'Document Tags' feature under the 'Content Management' menu.Each tag can have its own name, index letter, custom URL, SEO title, and description.When we publish articles or products, we can add one or more related tags to the content.These tags act as keywords for the content, linking related content scattered across different categories to form a thematic aggregation page.

For example, if your website has articles about "Go language tutorials" and "Go language project practice", they may belong to different categories.If all are tagged with 'Go Language', then when users visit the 'Go Language' tag page, they can see all related content, which greatly facilitates information search.

Core Function: UsetagDataListDisplay document list with tags

AnQiCMS provides a namedtagDataListA dedicated tag used to retrieve and display a list of documents under a specific tag from the database. This tag is typically used in the front-end template files of a website, such as the tag list page.tag/list.html) or home tag (tag/index.html) of course, you can also call it at any needed position.

tagDataListThe basic usage is as follows:

{% tagDataList archives with tagId="1" type="page" limit="10" %}
    {% for item in archives %}
        {# 在这里显示文档的标题、链接、简介等信息 #}
    {% empty %}
        {# 如果没有找到文档，显示此内容 #}
    {% endfor %}
{% endtagDataList %}

Let's delve into the details of:tagDataListKey parameters and usage of the tag:

tagDataListLabel main parameters:

  • tagIdThis is the core parameter to specify which label's document list you want to display. You can directly enter the numeric ID of the label (for example,tagId="1").
    • Tip:If you are on an AnQiCMS automatically generated tag detail page (such astag/list.htmlortag/index.html) usedtagDataList, it can usually be omittedtagIdParameters. The system will intelligently recognize the tag ID of the current page and automatically retrieve the documents under the tag.
  • moduleIdIf you want to display documents under a specific content model (such as "article model" or "product model"), you can use this parameter. For example,moduleId="1"Displays the document of the article model only.
  • limit: Controls the number of documents displayed. For example,limit="10"up to 10 documents will be displayed.
  • type: Defines the display type of the list.
    • type="list"(Default): Simply lists the specified number of documents without providing pagination.
    • type="page": Enable pagination, usually requires coordination withpaginationtags to be used.
  • order【en】：Set the document sorting method. Common ones include:
    • order="id desc"【en】：Sorted in descending order by ID (newest release).
    • order="views desc"【en】：Sorted in descending order by views.
  • siteIdIf you have enabled the multi-site feature and want to access data from other sites, you can use this parameter. It is usually not necessary to fill in.

Inside the loopitemAvailable fields:

In{% for item in archives %}in the loop,itemRepresents each document object, you can access its multiple properties to display document information:

  • item.Id: Document ID.
  • item.Title: Document title.
  • item.Link: Document detail page link.
  • item.Description: Document summary.
  • item.Thumb: Document thumbnail address.
  • item.CreatedTime: Document release time (timestamp format, needs to usestampToDateFilter formatting).
  • item.Views: Document view count.
  • item.CategoryId: Document category ID. You can also access it throughcategoryDetailLabel retrieves its category name and link.
  • As well as other fields customized in the content model.

Practical Exercise: Step-by-step implementation of Tag document list display

Next, we will demonstrate through several specific scenarios.tagDataListThe practical application of.

Scenario one: Display the document list under the current tag on the Tag detail page (with pagination).

Assuming you are editing the detail page template file of tags (for exampletemplate/您的模板目录/tag/list.htmlortemplate/您的模板目录/tag/index.html) On this page, AnQiCMS will automatically identify the tag being accessed.

{# 首先，您可能需要显示当前标签的一些信息，如标签名称和描述 #}
<h1>标签：{% tagDetail with name="Title" %}</h1>
<p>简介：{% tagDetail with name="Description" %}</p>

<div class="tag-documents">
    <h2>相关文档</h2>
    {% tagDataList archives with type="page" limit="10" %} {# type="page" 启用分页，每页显示10篇 #}
        {% for item in archives %}
            <article class="document-item">
                <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
                <p class="description">{{ item.Description }}</p>
                {% if item.Thumb %}
                    <a href="{{ item.Link }}" class="thumb">
                        <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
                    </a>
                {% endif %}
                <div class="meta">
                    <span>发布于: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                    <span>阅读量: {{ item.Views }}</span>
                    <span>分类: <a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{% categoryDetail with name='Title' id=item.CategoryId %}</a></span>
                </div>
            </article>
        {% empty %}
            <p>抱歉，当前标签下暂无文档。</p>
        {% endfor %}
    {% endtagDataList %}

    {# 别忘了添加分页导航，让用户可以浏览更多页面 #}
    <div class="pagination-container">
        {% pagination pages with show="5" %} {# 最多显示5个页码按钮 #}
            <ul>
                {% if pages.PrevPage %}
                    <li><a href="{{ pages.PrevPage.Link }}">上一页</a></li>
                {% endif %}
                {% for pageItem in pages.Pages %}
                    <li {% if pageItem.IsCurrent %}class="active"{% endif %}><a href="{{ pageItem.Link }}">{{ pageItem.Name }}</a></li>
                {% endfor %}
                {% if pages.NextPage %}
                    <li><a href="{{ pages.NextPage.Link }}">下一页</a></li>
                {% endif %}
            </ul>
        {% endpagination %}
    </div>
</div>

In this example, `{% tagDataList archives with type=“page” limit=“1”}