How to use AnQiCMS tags to display the document list under a specific Tag?

In AnQiCMS, a tag (Tag) is a powerful content organization method that can help us associate content more flexibly across different categories and models.Properly utilizing tags can not only optimize the website's SEO performance but also significantly improve the user's content discovery experience on the website.When we want to focus on displaying all relevant documents under a specific tag, AnQiCMS provides a set of intuitive and efficient template tags to meet this need.

This article will introduce in detail how to easily display the document list under a specific tag on the website front-end page using the built-in template tags of AnQiCMS.

Understand the 'Tag' in AnQiCMS

In the AnQiCMS backend, we can manage all the tags of the website 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 release articles or products, we can add one or more related tags to the content.These tags act like keywords for the content, connecting 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 feature: usetagDataListTag displays the document list

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 Label Home Page (tag/index.html) Of course, you can also call it at any needed location.

tagDataListThe basic usage is as follows:

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

Let's interpret it in detailtagDataListLabel Key Parameters and Usage:

tagDataListLabel Main Parameters:

  • tagIdThis is the core parameter for specifying which tag's document list you want to display. You can directly enter the tag's numeric ID (such astagId="1")
    • Tip:If you are on an AnQiCMS automatically generated tag detail page (such astag/list.htmlortag/index.htmlUsed intagDataList, usually it can be omittedtagIdparameters. The system will intelligently identify the tag ID of the current page and automatically retrieve the documents under the tag.
  • moduleIdIf you only 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"Indicates that only the document of the article model is displayed.
  • 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 functionality.
    • type="page": Enable pagination functionality, usually in conjunction withpaginationTags are used together.
  • order: Set the sorting method for documents. Common ones include:
    • order="id desc": Sort by ID in descending order (newest release).
    • order="views desc": Sort by views in descending order.
  • siteIdIf you have enabled the multi-site feature and want to retrieve data from other sites, you can use this parameter. Generally, it does not need to be filled in.

Within the loopitemAvailable fields:

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

  • item.Id: Document ID.
  • item.Title: The document title.
  • item.Link: Document detail page link.
  • item.Description: Document description.
  • item.Thumb: Document thumbnail address.
  • item.CreatedTime: Document publishing time (timestamp format, needs to be usedstampToDateFiltered formatting()).
  • item.Views: Document views.
  • item.CategoryId: Document category ID. You can also get its category name and link through thecategoryDetailtag.
  • and also other fields customized in the content model.

Practice session: Step-by-step implementation of Tag document list display

Next, we will demonstrate through several specific scenarios.tagDataListactual application.

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

Assuming you are editing the template file for the tag detail page (for exampletemplate/您的模板目录/tag/list.htmlortemplate/您的模板目录/tag/index.html）。On this page, AnQiCMS will automatically recognize 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”}