How to display the related article list of the `tagDataList` tag in AnQiCMS according to the 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 can not only help visitors quickly find the content they are interested in, but also effectively improve the internal link structure and SEO performance of the website.Today, let's delve into a very practical template tag in AnQiCMS:tagDataList，See how it accurately displays a list of related articles based on the specified Tag ID.

Core function analysis:tagDataListBasic usage of tags

AnQiCMS provides rich and flexible template tags,tagDataListThis is one of them, specifically used for extracting a list of articles (or documents) associated with a specific tag from a database. Imagine you have a tag about "search engine optimization" and you want to display all articles with this tag on a page.tagDataListThis is the key to achieving 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 namedarchivesThe variable, 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 critical parameter, which explicitly specifies the Tag ID under which we want to retrieve the articles. You need to replace"1"with the actual Tag ID you want to call.
• {% for item in archives %}: Due toarchivesis a list of articles (array objects), we need to iterate over and display each article throughfora loop. Inside the loop,itemthe variable represents all the fields of the current article, for exampleitem.Title(Article Title),item.Link(article link),item.Description(Article description) and so on.
• {% 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 crashing.
• {% endtagDataList %}: withtagDataListPair occurrence indicates the end of the label scope.

How to get Tag ID?You can view the detailed information of each tag on the "Content Management" -> "Document Tag" page in the AnQiCMS backend, which usually includes its unique ID. In addition, the template on the tag detail page (usuallytag/detail.html),tagDataListIf the label is omittedtagIdThe parameter will intelligently automatically read the Tag ID of the current page, thereby displaying a list of articles associated with the current tag page.

Flexible control of content:tagDataListthe critical parameters

excepttagId,tagDataListIt also provides a series of parameters to help us finely control the acquisition and display of articles:

1. moduleId: Specify the content model.AnQiCMS supports flexible content models, such as the "Article" model (the default ID may be 1) and the "Product" model (the default ID may be 2). If you only want to display articles under a specific content model, you can usemoduleIdParameter. For example,with tagId="1" moduleId="1"It will only retrieve the articles under the "Article" model with Tag ID 1.

2. limitControl the number of displayed items.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, such aslimit="2,10"Will start from the second article and display the next 10 articles.

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

   • order="id desc": Sort by ID in descending order (newest release).
   • order="views desc"：Sort by views in reverse order (most popular).
   • order="sort desc": Sort by custom sorting in the background in descending order.

4. typewithpagination: List type and pagination.

   • type="list"(Default): Use when you only want to display a fixed number of articles without pagination.
   • type="page"When you want to display a list of articles and support pagination, you need to combinepaginationTags to build page navigation

5. siteId: Multi-site compatibilityIf you are using the multi-site management feature of AnQiCMS and need to call data from other sites, you cansiteIdSpecify the parameter. It is usually not necessary to set this parameter for single-site users.

Case study: Build a list of Tag-related articles.

Let us go through a more complete example, to see how to apply it in an actual templatetagDataList.

Case one: Display the list of popular tags in a non-tab page

Assume we want to display the latest 3 articles under the "SEO Optimization" tag in a sidebar on the website 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"Make sure to only get the articles,order="id desc"Ensure they are the most recent,limit="3"which limits the number of displayed items.

Case two: Displaying paginated article lists on the Tag detail page

When a user clicks on a tag to enter its detail page (for exampletag/list.htmlortag/index.htmlWhen this tag is selected, it usually needs to display all articles under the tag 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