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

In AnQiCMS, displaying a list of all articles under a specific tag (Tag) is a common and practical content operation requirement.By using 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.Tags are an important tool for content organization, allowing you to add keywords to articles, products, and other content, thereby linking related content horizontally, even if these contents belong to different categories.This association method helps users find more interesting content, and it is also beneficial for search engine optimization.In the content management backend, when you publish or edit an article, you can add one or more tags to the content, which can then be called and displayed on the front page.

To display the article list under a specific tag on the front-end page, AnQiCMS provides powerful template tags. Among them,tagDataListThe tag is designed specifically for this purpose. It can retrieve all related article lists under the tag specified by the tag ID or the tag identified automatically by the current page.

Implement tag article list in the template

通常，AnQiCMS will generate a special list page for each tag, and the default template file path is/template/你的模板目录/tag/list.htmlIn this special template file,tagDataListThe tag will automatically identify the tag ID of the current page, thus there is no need to specify it manuallytagIdParameter. Of course, if you want to display articles under specific tags on other pages (such as the homepage, sidebar, etc.), you can also specify them explicitlytagIdto achieve.

Build your tag article list page step by step

  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 to a custom content page.

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

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

  3. UsetagDataListGet article list:This is the core step.tagDataListThe tag is used to retrieve the articles under a specified tag. You can fine-tune the content to be retrieved 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 exampletagId="123".
    • moduleIdIf your website has multiple content models (such as articles, products), you canmoduleIdto specify only the content under a certain model, for examplemoduleId="1"(usually representing the article model).
    • typeto set"page"Enable pagination feature, so when there are many articles, they can be displayed in multiple pages.
    • limit: Number of articles displayed per page, for examplelimit="10".
    • order: Sorting method of articles, for exampleorder="id desc"(Sorted by ID in descending order, i.e., the latest release) ororder="views desc"(Sorted by view count).
    {# 使用 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:IftagDataListoftypethe parameter to"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>

a complete template code example

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

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

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