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

In Anqi CMS, tags (Tag) are an important tool for organizing content, enhancing user experience, and optimizing search engine performance.It can link articles from different categories but with related themes, making it easier for visitors to find content they are interested in.When you need to display a list of all associated articles under a specific Tag label, Anq CMS provides a concise and powerful template tag to help you achieve this goal.

Understand the Core:tagDataListTag

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

a basictagDataListThe usage of the tag is generally like this:

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

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

How to get the ID of a specific Tag?

In actual operation, you may need to explicitly know the Tag ID to calltagDataList. There are two common scenarios:

1. In a 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 Anqi CMS will usually automatically identify the Tag ID of the current page. In this case, you can even omit it.tagIdparameter,tagDataListAutomatically fetches the data of the current Tag. In addition, you can also throughtagDetailTags to get the details 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 a specific Tag on any pageIf you want to display articles under a fixed tag on the homepage, a category page, or an article detail page, you need to specify manuallytagId. This ID can be found on the "Content Management" -> "Document Tags" page in the AnQi CMS backend. Click on the corresponding Tag to edit, and you will see its ID.

   For example, assuming you know 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 an article list

tagDataListTags support various parameters, allowing you to control the display of articles more finely:

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

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

• item.Title: Article title
• item.Link: Article link
• item.Description: Article Summary
• item.Thumb: Article Thumbnail
• item.Views: Article 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 feature

If there are many articles under the Tag, enabling pagination can effectively improve loading speed and user experience. You need totagDataListsettype="page", then combinepaginationCreate pagination links with tags.

{% 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 %}

Complete Tag article list page example

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

”`twig {% extends ‘base.html’ %} {# Inherit your base template #}

{% 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