How does the `tagDataList` tag in AnQiCMS display a list of related articles based on a specified Tag ID?

Manage and display content in AnQi CMS, especially when it is necessary to aggregate articles based on specific themes or keywords, the Tag feature is particularly important.It not only helps visitors quickly find the content they are interested in, but also effectively improves the internal link structure and SEO performance of the website.tagDataListEnglish translation: Look at how it accurately displays the list of related articles based on the specified Tag ID.

Core Function Analysis:tagDataListBasic usage of tags

AnQiCMS provides rich and flexible template tags,tagDataListis one of them, specifically used to extract the list of articles (or documents) associated with a specific tag from the database. Imagine you have a tag about "search engine optimization" and you want to display all the articles with this tag on a certain page.tagDataListThis is the key to achieve this goal.

Its basic usage is very intuitive:

{% tagDataList archives with tagId="1" %}
    {% for item in archives %}
        <div class="article-item">
            <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
            <p>{{ item.Description|truncatechars:100 }}</p>
            <span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
        </div>
    {% empty %}
        <p>当前标签下暂无文章。</p>
    {% endfor %}
{% endtagDataList %}

In this code block:

  • tagDataList archivesWe define a variable namedarchivesvariable, all the article data that meets the conditions will be stored in this variable. You can name this variable according to your habit.
  • with tagId="1"：This istagDataListThe most core parameter, it explicitly specifies which Tag ID's articles we want to retrieve. You need to"1"replace it with the actual ID of the tag you want to call.
  • {% for item in archives %}Due toarchivesis a list of articles (array objects), we need to iterate through and display each article.forin the loop, the variable represents all fields of the current article.itemfor example,item.Title(article title),item.Link(article link),item.Description（article description）et al.
  • {% empty %}：This is a very humanized design. IfarchivesThere are no articles in the list,emptythe content within the block will be displayed, to avoid the page from appearing blank or generating errors.
  • {% endtagDataList %}: withtagDataListPairs occur, indicating the end of the label scope.

How to get the Tag ID?You can view the detailed information of each tag on the "Content Management" -> "Document Tags" page in the AnQiCMS admin panel, which usually includes its unique ID. In addition, the template on the tag detail page (usuallytag/detail.html),tagDataListLabel if omittedtagIdParameter, it will intelligently automatically read the current page's Tag ID, thus displaying the list of articles associated with the current tag page.

Flexible control of content:tagDataListThe key parameter of

ExcepttagId,tagDataListThe English translation of auto is English, and the translation result is: It also provides a series of parameters to help us finely control the acquisition and display of articles:

  1. moduleIdSpecify the content modelAnQiCMS supports flexible content models, such as the “Article” model (default ID may be 1) and the “Product” model (default ID may be 2). If you only want to display articles under a specific content model, you can usemoduleIdParameters. For example,with tagId="1" moduleId="1"It will only get the articles under the "article" model with Tag ID 1.

  2. limit: Control the display quantity.This parameter is used to control the number of articles displayed. If you only want to display the latest 5 articles, you can setlimit="5". It also supports offset values, such aslimit="2,10"Will start from the 2nd article and display the next 10 articles.

  3. order: Sorting methodThe display order of articles can be controlled byorderparameters. Common sorting methods include:

    • order="id desc"：By ID in descending order (newest published).
    • order="views desc"：By view count in descending order (most popular).
    • order="sort desc"：By custom sorting on the back end in descending order.

  4. typeWithpagination：List type and pagination

    • type="list"(Default value): Use when you only want to display a fixed number of articles without pagination.
    • type="page"：When displaying the article list and supporting pagination, use it. In this case, you need to combinepagination标签来构建分页导航。

  5. siteId：Multi-site compatibilityIf you are using the multi-site management feature of AnQiCMS and need to call data from other sites,siteId参数来指定。对于单站点用户，通常无需设置此参数。

实践案例：构建 Tag 相关文章列表

Let us look at how to apply in a complete example, see how to use it in actual templatestagDataList.

Case one: Display the list of hot articles in non-tab pages

Assume we want to display the latest 3 articles under the 'SEO Optimization' tag in a sidebar on the homepage.

{# 假设 Tag ID 为 10 代表“SEO优化”标签 #}
<h2>热门SEO文章</h2>
{% tagDataList archives with tagId="10" moduleId="1" order="id desc" limit="3" %}
    <ul>
    {% for item in archives %}
        <li>
            <a href="{{ item.Link }}" title="{{ item.Title }}">
                {{ item.Title|truncatechars:25 }}
            </a>
            <p class="post-date">{{ stampToDate(item.CreatedTime, "2006-01-02") }}</p>
        </li>
    {% empty %}
        <li>暂无相关文章。</li>
    {% endfor %}
</ul>
{% endtagDataList %}

Here, we usemoduleId="1"Ensure that only articles are retrieved.order="id desc"Make sure they are the latest.limit="3"limits the number of displayed items.

Case two: Displaying a paginated list of articles on the Tag detail page

When a user clicks on a tag to enter its detail page (for example)tag/list.htmlortag/index.htmlWhen it is necessary to display all articles under this label, and provide pagination functionality.

{# 假设当前页面是 Tag 详情页，tagId 会自动获取 #}
<h1>标签：{% tagDetail with name="Title" %} 相关文章</h1>
<div class="tag-description">
    <p>{% tagDetail with name="Description" %}</p>
</div>

<div class="article-list">
{% tagDataList archives with type="page" limit="10" %} {# 每页显示10篇文章 #}
    {% for item in archives %}
        <div class="article-card">
            <a href="{{ item.Link }}">
                {% if item.Thumb %}
                    <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">
                {% else %}
                    {# 可以放置一个默认缩略图 #}
                    <img src="/static/images/default-thumb.png" alt="默认图片" class="article-thumb">
                {% endif %}
                <h3>{{ item.Title }}</h3>
            </a>
            <p>{{ item.Description|truncatechars:120 }}</p>
            <div class="article-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>
    {% empty %}
        <p>当前标签下还没有任何文章。</p>
    {% endfor %}
{% endtagDataList %}
</div>

{# 分页导航 #}
<div class="pagination-nav">
    {% pagination pages with show="5" %} {# 最多显示5个页码按钮 #}
        {% if pages.PrevPage %}
            <a href="{{ pages.PrevPage.Link }}" class="prev">上一页</a>
        {% endif %}
        {% for pageItem in pages.Pages %}
            <a href="{{ pageItem.Link }}" class="page-number {% if pageItem.IsCurrent %}active{% endif %}">{{ pageItem.Name }}</a>
        {% endfor %}
        {% if pages.NextPage %}
            <a href="{{ pages.NextPage.Link }}" class="next">下一页</a>
        {% endif %}
    {% endpagination %}
</div>

In this case,tagDataList archives with type="page" limit="10"will fetch the current