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

In content operation, tags (Tag) are a key tool for connecting content, enhancing user experience, and optimizing search engine optimization (SEO).A well-designed Tag detail page, not only allows users to quickly find related content of interest, but also clearly conveys the organization structure and thematic relevance of the website content to search engines.AnQi CMS as an efficient and flexible content management system provides powerful and intuitive support in this regard, allowing content operators to easily achieve fine-grained content operation.

Today, let's delve into how to meticulously craft each Tag detail page in AnQiCMS, displaying all associated document lists, thereby fully unleashing the operational potential of Tags.

Understand the AnQiCMS tag mechanism and template layout

The Anqi CMS is well-designed in the aspect of Tag management, it is not just simple tagging for articles or products, but also gives Tags their own detail pages.These pages are inherently SEO-friendly, which can help search engines better understand the relevance of your content and improve keyword rankings.When you add a Tag to an article or product, you can visit the exclusive URL of that Tag (for example/tag/SEO优化.html)，and you can see a customized page for that Tag.

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

Core: Build the Tag detail page template

We need to on the Tag detail page to display all related document liststag/list.htmlIn the use of the Tag template (or you can customize your own template) provided by AnQiCMS.This includes obtaining information about the Tag itself, calling the associated document list, implementing pagination, and improving SEO, among other tasks.

1. Obtain the detailed information of the Tag itself

On the Tag detail page, we first need to display the current Tag's name, description, and other information. AnQiCMS providestagDetailtags, which can be easily obtained.

You can use it like thistagDetailTag 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"The description information of the Tag is output. This information can be directly used in the page.<h1>Title and summary, allowing users to understand the theme of the current page at a glance.

2. List display of associated documents

Now, we come to the most critical part - displaying the document list associated with the current Tag. AnQiCMS providestagDataListLabel. This label is very intelligent, in the Tag detail page, it will automatically identify the current Tag's ID, without manual specification, it can directly obtain all associated documents under the Tag.

To implement pagination of the document list, we usually willtypethe parameter to"page"andlimitparameters 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 document list 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 specified that 10 documents are displayed per page.
  • {% for item in archives %}Loop through each document,itemwhich is the current document object being looped to.
  • We displayed the title of the document (item.Title), link (item.Link), description (item.Description, usingtruncatecharsFiltering is performed (truncation), thumbnail (item.Thumb），release time（item.CreatedTimethrough.stampToDateFormatting) and view count (item.Views)
  • {% categoryDetail ... %}Tags are used to dynamically retrieve the title and link of the category to which each document belongs, further enriching the document information.
  • {% empty %}Block is a very practical feature, whenarchivesWhen the list is empty, it will display the prompt "There are no related documents under the current Tag", to avoid blank content on the page.

3. Implement pagination function

Now