In the vast field of content operation, tags (Tags) play a crucial role.They can not only thematize and structure scattered content, but also guide users to conduct in-depth exploration, improve the efficiency of content discovery, and enhance the overall user experience of the website.As an experienced website operation expert, I am well aware of AnqiCMS (Anqi CMS) powerful capabilities in tag management and content display.tagDataListHow can you cleverly use it to retrieve all documents under a specific tag and beautifully implement pagination display?

Understand tags andtagDataListcore function

Let's make it clear where the label is positioned in AnqiCMS.Tags are a supplementary method for categorizing and indexing web content. They are more flexible than categories and can span different content models (such as articles, products) to aggregate related thematic content.文档标签使用帮助Detailed explanations are provided in the document.

When we need to display all articles, tutorials, or products related to 'SEO optimization' on a frontend page, such as a tag detail page for 'SEO optimization',tagDataListThe label has become our helpful assistant. Its main responsibility is to extract all related document data based on the specified label ID or the current page context.

tagDataListThe label provides multiple parameters, allowing us to finely control the retrieval of content:

  • tagId: This is a core parameter used to specify which tag's documents you want to retrieve. Usually, when you are on the tag detail page of AnqiCMS (for example,/tag/seo.html) Use this tag when the system will automatically identify the current page's tag ID without manual specification. However, if you want to call content under a specific tag at a location on a non-tag detail page (such as the homepage sidebar), you need to set it explicitly.tagId="1"(Assuming the label ID is 1).
  • moduleId: If you only want to retrieve documents under a specific content model (for example, only retrieve documents under the article model while ignoring the product model), you can usemoduleId="1"(假设文章模型的ID为1)。这使得内容展示更加聚焦。
  • order: 用于设定文档的排序方式，您可以根据最新发布时间 (id desc) views (views desc)，or the custom sorting on the backend (sort desc) to display the content.
  • limit: Defines the number of documents displayed per page, which is one of the key parameters for implementing pagination. For example,limit="10"This means displaying 10 documents per page.
  • type="page":This is the core of implementing pagination!WhentypesetpagewhentagDataListNot only will it return the document data of the current page, but it will also pass the complete page information to the template for the pagination tags of AnqiCMSpaginationUse.

Implement the pagination display of tab pages elegantly

When the number of documents under a specific tag is large, loading all the content at once not only affects the page loading speed, but also leads to user browsing fatigue.Therefore, implementing pagination is an inevitable choice to enhance user experience and website performance.This provides seamless support for AnqiCMS templates.

Implement pagination mainly involves two steps:

  1. UsetagDataListGet the paged document data You need to settagDataListspecify in the tag.type="page"andlimitFor example:

    {% tagDataList archives with type="page" limit="10" %}
    {# 在这里循环显示当前页的文档列表 #}
    {% for item in archives %}
        <li>
            <a href="{{ item.Link }}">{{ item.Title }}</a>
            <p>{{ item.Description }}</p>
            <span>发布时间：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
        </li>
    {% empty %}
        <li>当前标签下暂无文档。</li>
    {% endfor %}
{% endtagDataList %}

    Here,archivesto include all documents' data for the current page.emptyPart of it handles the case where there are no documents under the label, providing a friendly prompt.

  2. PasspaginationTag generates pagination navigation: Next.tagDataListAfter the label, you can usepaginationtag to render pagination navigation.paginationthe tag will be automatically readtagDataListPassing the page context information to generate navigation links such as "Home

    paginationThe tag accepts an important parameter:showIt is used to control the number of middle page number display. For exampleshow="5"It will display a total of 5 page number links before and after the current page.

    paginationThe label will provide an external interface.pagesVariable, which includes all pagination information, such as:

    • TotalItemsTotal number of documents:
    • TotalPagesTotal number of pages:
    • CurrentPageCurrent page number:
    • FirstPage,LastPage,PrevPage,NextPageThey represent the objects of the first page, last page, previous page, and next page, including:Name(Link Name) andLink(Link address).
    • Pages: An array containing detailed information of middle page numbers, each element also includesNameandLinkas well asIsCurrent(Is it the current page).

    Combining the abovetagDataListcode, the complete pagination implementation is as follows:

    {# 假设您正在 tag/list.html 或 tag/index.html 模板中 #}
<div class="tag-documents">
    <h1>当前标签：{% tagDetail with name="Title" %}</h1>


    {# 获取特定标签下的文档列表并启用分页 #}
    {% tagDataList archives with type="page" limit="10" %}
        <ul>
            {% for item in archives %}
                <li>
                    <a href="{{ item.Link }}">
                        <h3>{{ item.Title }}</h3>
                        <p>{{ item.Description|truncatechars:100 }}</p>
                        <small>发布于：{{ stampToDate(item.CreatedTime, "2006-01-02") }} | 浏览：{{ item.Views }}</small>
                    </a>
                </li>
            {% empty %}
                <li style="text-align: center; padding: 20px;">当前标签下暂无相关文档。</li>
            {% endfor %}
        </ul>
    {% endtagDataList %}


    {# 渲染分页导航 #}
    <div class="pagination-nav">
        {% pagination pages with show="5" %}
            <ul class="pagination-list">
                {% if pages.FirstPage %}
                    <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                        <a href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
                    </li>
                {% endif %}


                {% if pages.PrevPage %}
                    <li class="page-item">
                        <a href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a>
                    </li>
                {% endif %}


                {% for item in pages.Pages %}
                    <li class="page-item {% if item.IsCurrent %}active{% endif %}">
                        <a href="{{ item.Link }}">{{ item.Name }}</a>
                    </li>
                {% endfor %}


                {% if pages.NextPage %}
                    <li class="page-item">
                        <a href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a>
                    </li>
                {% endif %}


                {% if pages.LastPage %}
                    <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                        <a href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a>
                    </li>
                {% endif %}
            </ul>
            <div class="pagination-info">
                总计 {{ pages.TotalItems }} 条文档，共 {{ pages.TotalPages }} 页，当前第 {{ pages.CurrentPage }} 页。
            </div>
        {% endpagination %}
    </div>
</div>

This code first utilizes:tagDataListRetrieve and display the documents under the current label in a loop, and set the display of 10 items per page. Then,paginationThe label is based ontagDataListGenerated page data, outputting the complete pagination navigation structure. By adding the current pageactiveclass, you can easily provide clear visual feedback to users through CSS.

Operational Practices and Precautions

  • Template File Conventions： Usually, the template files for displaying the document list under the tag label are placed in `/template/{Your template directory}/tag/