How to display the list of all documents associated with the Tag on the Tag detail page?

In content operation, tags (Tag) are the key tools that connect content, enhance user experience, and optimize search engine optimization (SEO).A well-designed Tag detail page that not only allows users to quickly find related content of interest but also clearly communicates the organization structure and thematic relevance of the website's content to search engines.As an efficient and flexible content management system, AnQi CMS provides strong and intuitive support in this aspect, allowing content operators to easily achieve refined content operation.

Today, let's delve into how to meticulously craft each Tag detail page in AnQiCMS, showcasing the associated list of documents, thereby fully releasing the operational potential of Tags.

Understand the Tag mechanism and template layout of AnQiCMS

The AnQi CMS is quite thoughtful in the design of Tag management, it's not just simple to tag articles or products, but also assigns an independent detail page to Tags.These pages are inherently SEO-friendly, helping search engines better understand the relevance of your content and improve keyword rankings./tag/SEO优化.html），you will see a page specially customized for that Tag.

In the AnQiCMS template system, each Tag's detail page corresponds to a predefined template file. Usually, this template file is located in your current template directory.tagIn the folder, and named aslist.html(i.e.,)/template/你的模板目录/tag/list.html). If you want to customize the display for a specific Tag, you can also create something liketag/{TagID}.htmlortag/{TagURL别名}.htmlThe template file. Understanding this template structure is the first step in building the Tag detail page.

Core: Building the Tag detail page template

To make the Tag detail page display its associated document list, we need to intag/list.htmlApply the template tags provided by AnQiCMS in the [or your custom tag template].This includes obtaining information about the Tag itself, calling the list of associated documents, implementing pagination, and improving SEO, and so on.

1. Obtain the detailed information of the Tag itself

In the Tag detail page, we first need to display the current Tag's name, description, and other information. AnQiCMS providestagDetailtags, which can easily obtain this data.

You can use it like thistagDetailTags to display the title and description of the current Tag:

<main>
    <h1>{{ tagDetail with name="Title" }}</h1>
    <p>{{ tagDetail with name="Description" }}</p>
    {# ... 其他内容 ... #}
</main>

Here,name="Title"will directly output the title of the current Tag,name="Description"Then output the description information of the Tag. This information can be directly used on the page.<h1>Title and summary, so that users can immediately understand the theme of the current page.

2. Display Associated Documents

Now, we come to the most core part - displaying the list of documents associated with the current Tag. AnQiCMS providestagDataListLabel.This tag is very intelligent, on the Tag detail page, it will automatically identify the current Tag's ID, without the need to manually specify, it can directly obtain all related documents under the Tag.

To implement pagination for the document list display, we usually willtypeparameter settings"page"and uselimitparameters to control the number of documents displayed per page.

{% tagDataList archives with type="page" limit="10" %}
    <section class="tag-documents">
        {% for item in archives %}
            <article class="document-item">
                <a href="{{ item.Link }}" class="document-link">
                    {% if item.Thumb %}
                        <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="document-thumbnail">
                    {% endif %}
                    <h2 class="document-title">{{ item.Title }}</h2>
                </a>
                <p class="document-description">{{ item.Description|truncatechars:150 }}</p>
                <div class="document-meta">
                    <span>发布于：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                    <span>浏览量：{{ item.Views }}</span>
                    {% if item.CategoryId %}
                        {# 调用文档所属分类信息 #}
                        <span>分类：<a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{% categoryDetail with name='Title' id=item.CategoryId %}</a></span>
                    {% endif %}
                </div>
            </article>
        {% empty %}
            <p class="no-documents-tip">当前Tag下暂无相关文档。</p>
        {% endfor %}
    </section>
{% endtagDataList %}

In the above code snippet:

  • archivesIt is the variable name we define, which will carry the list of document data queried from the database.
  • type="page"It is the key to pagination, it tells the system that we need a paged list.
  • limit="10"It specifies that 10 documents are displayed per page.
  • {% for item in archives %}Loop through each document,itemwhich is the current document object being looped over.
  • We displayed the document's title (item.Title), link (item.Link), description (item.DescriptionUsetruncatecharsFilter Truncation), Thumbnail ()item.Thumb), the publish time (item.CreatedTimeThroughstampToDateFormatting) and View Count ()item.Views).
  • {% categoryDetail ... %}Tags are used to dynamically retrieve the title and link of the category each document belongs to, further enriching the document information.
  • {% empty %}A block is a very practical feature, whenarchivesThe list is empty, it will display the prompt "There are no related documents under the current Tag" to avoid blank page content.

3. Implement pagination function

Hence