How to display all articles under a specific Tag in AnQiCMS?

In AnQiCMS, displaying the list of all articles under a specific tag (Tag) is a common and practical content operation requirement.Through AnQiCMS's flexible template system, you can easily implement this feature, providing users with more accurate content navigation.

First, let's understand the tag mechanism in AnQiCMS.Labels are an important tool for content organization, allowing you to add keywords to articles, products, and other content to cross-reference related information, even if these contents belong to different categories.This association method helps users discover more interesting content and is also beneficial for search engine optimization.In the content management backend, when you publish or edit articles, you can add one or more tags to the content, which can then be called and displayed on the front page.

To display a list of articles under a specific tag on the front-end page, AnQiCMS provides powerful template tags. Among them, tagDataListTags are specifically designed for this purpose. They can automatically identify tags based on the specified tag ID or the tags currently identified by the page, and retrieve all related article lists under these tags.

In the template, implement the tag article list

通常，AnQiCMS will generate a dedicated list page for each tag, with the default template file path being/template/你的模板目录/tag/list.html. In this special template file,tagDataListthe tags will automatically identify the tag ID of the current page, thus eliminating the need to specify manually.tagIdParameters. Of course, if you want to display articles under specific tags on other pages (such as the homepage, sidebar, etc.), you can also do so by explicitly specifyingtagIdto achieve.

Step by step build your tag article list page

1. Confirm the template file:As mentioned before, you cantag/list.htmlPerform operations. If you want to display on other pages, you can on the corresponding page (such asindex.htmlOr add the following code block in the custom content page.)

2. Get the information of the label itself (optional but recommended):In the tag list page, the current tag name and description are usually displayed to help users understand the content they are browsing. You can usetagDetailtags to get detailed information about the current tag.

   {# 获取当前标签的详细信息 #}
   {% tagDetail currentTag with name="Title" %}
   <h1>{{ currentTag }} 标签下的文章</h1>
   {% tagDetail tagDescription with name="Description" %}
   {% if tagDescription %}
   <p>{{ tagDescription }}</p>
   {% endif %}
   

3. UsetagDataListGet the list of articles:This is the core step.tagDataListTags are used to get articles under a specific tag. You can refine the content you get by using the following parameters:

   • tagId: The ID of the tag. Intag/list.htmlIt is usually not necessary to specify, the system will automatically identify the current tag ID. If it is called on other pages, it needs to be specified explicitly, for example,tagId="123".
   • moduleIdIf your website has multiple content models (such as articles, products), you canmoduleIdspecify to retrieve content only under a certain model, for examplemoduleId="1"(usually represents the article model).
   • typeSet to"page"Enable pagination feature, so that when there are many articles, they can be displayed in multiple pages.
   • limitNumber of articles displayed per page, for examplelimit="10".
   • orderSorting method of articles, for exampleorder="id desc"(Sorted by ID in reverse order, i.e., latest release) Ororder="views desc"(Sorted by view count in reverse).

   {# 使用 tagDataList 获取标签下的文章列表，并启用分页 #}
   {% tagDataList archives with type="page" limit="10" %}
       {# 循环显示文章列表 #}
       {% for item in archives %}
       <article>
           <h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
           {% if item.Thumb %}
           <a href="{{item.Link}}">
               <img src="{{item.Thumb}}" alt="{{item.Title}}">
           </a>
           {% endif %}
           <p>{{item.Description}}</p>
           <footer>
               <span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
               <span>阅读量: {{item.Views}}</span>
           </footer>
       </article>
       {% empty %}
       <p>该标签下暂无文章。</p>
       {% endfor %}
   {% endtagDataList %}
   

4. Add pagination navigation:IftagDataListoftypeparameter settings"page", then you can usepaginationtags to generate pagination navigation, enhancing user experience.]}

   {# 分页导航 #}
   <div class="pagination">
       {% pagination pages with show="5" %}
           <ul>
               {# 首页链接 #}
               <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                   <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
               </li>
               {# 上一页链接 #}
               {% if pages.PrevPage %}
               <li class="page-item">
                   <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
               </li>
               {% endif %}
               {# 中间页码 #}
               {% for pageItem in pages.Pages %}
               <li class="page-item {% if pageItem.IsCurrent %}active{% endif %}">
                   <a href="{{pageItem.Link}}">{{pageItem.Name}}</a>
               </li>
               {% endfor %}
               {# 下一页链接 #}
               {% if pages.NextPage %}
               <li class="page-item">
                   <a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
               </li>
               {% endif %}
               {# 末页链接 #}
               <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                   <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
               </li>
           </ul>
       {% endpagination %}
   </div>
   

Complete template code example

Combine the above section, a typical AnQiCMS tag article list page may look like this: English

auto

{% block title %}

{% tagDetail currentTagTitle with name="Title" %}
<title>{{ currentTagTitle }} - 标签文章列表</title>

{% endblock %}

{% block content %}

<main>
    <section class="tag-header">
        {% tagDetail currentTagName with name="Title" %}
        <h1>标签: {{ currentTagName }}</h1>
        {% tagDetail tagDescription with name="Description" %}
        {% if tagDescription %}
        <p>{{ tagDescription }}</p>
        {% endif %}
    </section>

    <section class="article-list">
        {% tagDataList archives with type="page" limit="10" order="id desc" %}
            {% for item in archives %}
            <article class="article-item">
                {% if item.Thumb %}
                <figure class="article-thumb">
                    <a href="{{item.Link}}">
                        <img src="{{item.Thumb}}" alt="{{item.Title}}">
                    </a>
                </figure>
                {% endif %}
                <div class="article-info">
                    <h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
                    <p class="article-description">{{item.Description}}</p>
                    <div class="article-meta">
                        <span>发布于: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                        <span>阅读量: {{item.Views}}</span>
                        {# 您还可以显示文章所属分类 #}
                        {% categoryDetail articleCategory with name="Title" id=item.CategoryId %}
                        <span>分类: <a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{{articleCategory}}</a></span>
                    </div>
                </div>
            </article>
            {% empty %}
            <p>该标签下暂无内容，敬请期待！</p>
            {% endfor %}

            {# 分页导航 #}
            <div class="pagination-container">
                {% pagination pages with show="5" %}
                    <ul class="pagination">
                        <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                            <a href="{{pages.FirstPage.Link}}">首页</a>
                        </li>
                        {% if pages.PrevPage %}
                        <li class="page-item">
                            <a href="{{pages.PrevPage.Link}}">上一页</a>
                        </li>
                        {% endif %}
                        {% for pageItem in pages.Pages %}
                        <li class="page-item {% if pageItem.IsCurrent %}active{% endif %}">
                            <a href="{{pageItem.Link}}">{{pageItem.Name}}</a>
                        </li>
                        {% endfor %}
                        {% if pages.NextPage %}
                        <li class="page-item">
                            <a href="{{pages.NextPage.Link}}">下一页</a>
                        </li>
                        {% endif %}
                        <li