How to display a list of all associated articles under a specific Tag tag?

Understanding the core:tagDataListtags

To display the list of articles under a specific Tag, we mainly use the built-in Anqi CMS.tagDataListLabel. This label is specifically used to retrieve article data associated with a certain Tag. It is flexible in function, and can filter, sort, and paginate the display of articles according to your needs.

a basictagDataListThe label usage is roughly like this:

{% tagDataList archives with tagId="1" %}
    {# 在这里循环显示文章内容 #}
{% endtagDataList %}

Among them,archivesIt is a variable name you define, used to store the data of the obtained article list.tagId="1"It is crucial, it tells the system that you want to get the articles associated with the Tag whose ID is 1.

How to get the ID of a specific Tag?

In practical operations, you may need to know the Tag ID clearly to calltagDataList. There are two common scenarios:

  1. On the dedicated Tag list page (for example:template/your_template_name/tag/list.html)If you are editing a page specifically designed to display articles under a certain Tag, such as a page that users are redirected to after clicking on a tag in the Tag cloud, then the Aiqi CMS will usually automatically identify the Tag ID of the current page. In this case, you can even omittagIdparameters,tagDataListThe data of the current Tag will be automatically retrieved. In addition, you can alsotagDetailLabel to get the detailed information of the current Tag, such as the title and description, which is very useful for building page titles and SEO descriptions.

    {# 假设当前是Tag列表页，系统会自动识别当前Tag的ID #}
{% tagDetail currentTag with name="Title" %}
<h1>{{ currentTag }} 标签下的文章</h1>


{% tagDetail tagDescription with name="Description" %}
<p>{{ tagDescription }}</p>


{% tagDataList archives with type="page" limit="10" %}
    {# 接下来是文章列表和分页代码 #}
{% endtagDataList %}

  2. Display articles with specific Tag on any other pageIf you want to display articles under a fixed Tag on the home page, a category page, or an article detail page, you need to specify it manuallytagIdThis ID can be found on the "Content Management" -u003e "Document Tags" page in the Anqi CMS backend. Click on the corresponding Tag to edit, and you will see its ID.

    For example, suppose you know that the ID of the Tag "Latest News" is 5, you can call it like this:

    <h2>最新动态</h2>
{% tagDataList archives with tagId="5" limit="5" order="id desc" %}
    {% for item in archives %}
        <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
    {% empty %}
        <li>暂无相关文章。</li>
    {% endfor %}
{% endtagDataList %}

Build article list

tagDataListLabel supports various parameters, allowing you to control the display of articles more finely:

  • tagId: Specify the Tag ID.tagId="1".
  • moduleIdIf your website has multiple content models (such as article models, product models), you can specify this parameter to display articles under specific models only. For examplemoduleId="1"Indicates that only the data of the article model is displayed.
  • limit: Controls the number of articles displayed. For examplelimit="10"Will display 10 articles.
  • order: Specify the sorting method of the article, common ones include:
    • order="id desc": Sort articles by ID in reverse order (usually the most recent published)
    • order="views desc"：By views in descending order (popular articles)
    • order="sort desc"：Sorted by custom sorting in the background
  • type：Define list type.type="list"will list the specified number of articles directly;type="page"will enable pagination, along withpaginationUse the label.

In{% for item in archives %}in the loop,itemThe variable contains detailed information of each article, you can call it as needed:

  • item.Title: Article title
  • item.LinkArticle link
  • item.DescriptionArticle summary
  • item.ThumbArticle thumbnail
  • item.ViewsArticle views
  • item.CreatedTime: Article publish time (to be usedstampToDateFilter formatting)

For example, display the article title, thumbnail, and publish time:

{% tagDataList archives with tagId="您要查询的TagID" moduleId="1" limit="10" order="id desc" %}
    {% for item in archives %}
        <div class="article-item">
            {% if item.Thumb %}
                <a href="{{ item.Link }}"><img src="{{ item.Thumb }}" alt="{{ item.Title }}"></a>
            {% endif %}
            <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
            <p>{{ item.Description | truncatechars:100 }}</p>
            <span class="publish-date">{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
        </div>
    {% empty %}
        <p>当前Tag下暂无文章。</p>
    {% endfor %}
{% endtagDataList %}

Introduce pagination function

If there are many articles under the Tag, enabling pagination can effectively improve loading speed and user experience. You need totagDataListSet intype="page"then combinepaginationuse tags to generate pagination links.

{% tagDataList articles with tagId="您的TagID" moduleId="1" type="page" limit="10" order="id desc" %}
    {# 循环显示文章的for循环和内容 #}
    {% for item in articles %}
        <div class="article-item">
            <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
            <p>{{ item.Description }}</p>
            <span class="publish-date">{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
        </div>
    {% empty %}
        <p>当前Tag下没有找到任何文章。</p>
    {% endfor %}

    {# 分页代码 #}
    <div class="pagination-area">
        {% pagination pages with show="5" %}
            {# 首页链接 #}
            <a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
            {# 上一页链接 #}
            {% if pages.PrevPage %}
                <a href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a>
            {% endif %}
            {# 中间页码 #}
            {% for page_item in pages.Pages %}
                <a class="{% if page_item.IsCurrent %}active{% endif %}" href="{{ page_item.Link }}">{{ page_item.Name }}</a>
            {% endfor %}
            {# 下一页链接 #}
            {% if pages.NextPage %}
                <a href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a>
            {% endif %}
            {# 尾页链接 #}
            <a class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a>
        {% endpagination %}
    </div>
{% endtagDataList %}

A complete Tag article list page example

This is a typicaltag/list.htmlThe structure of the template file, which combines Tag details, article list, and pagination functions, providing a comprehensive content display for your Tag page:

auto

{% block head_meta %}

{# 获取当前Tag的SEO信息，并显示在页面的meta标签中 #}
<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
{% tdk canonical with name="CanonicalUrl" %}
{% if canonical %}<link rel="canonical" href="{{ canonical }}" />{% endif %}

{% endblock %}

{% block content %}

{# 获取当前Tag的详细信息，用于页面标题和简介 #}
{% tagDetail currentTag with name="Title" %}
<h1>标签：{{ current