How to use the `tagDetail` and `tagDataList` tags to display information about a specific tab page and its associated documents?

AnQiCMS (AnQiCMS) is a flexible and efficient content management tool trusted by many operators.It is crucial to effectively demonstrate content categorization and organization when building a functional and user-friendly website.tagDetailandtagDataListThe use of these template tags can make your website tab page not only beautiful but also informative, greatly enhancing the user experience and search engine optimization (SEO) effect.

Understand the value of tags in content management

In content operations, tags (Tag) are a powerful way to organize content.It is different from the traditional classification (Category), which is usually hierarchical and structured, while tags are more flexible and flat.By tagging documents, products, and other content with multiple relevant tags, you can achieve cross-category content association, allowing users to quickly find more related content based on their interests.At the same time, well-designed tabs also have a positive effect on SEO, as they can provide more internal links for search engines, increasing the chance of content inclusion and keyword ranking.

AnQiCMS knows the importance of tags and provides a comprehensive "Document Tag" management function, allowing you to create, manage tags, and set names, descriptions, custom URLs, and other information for each tag.When a user clicks on a tag on your website, they are usually directed to a dedicated tag detail page, displaying the detailed information of the tag and all associated documents.In order to build such a page, we will focus on usingtagDetailandtagDataListThese tags.

tagDetail: Display detailed information of specific tags

When a user visits a tag page, they first hope to clearly know what the tag represents.tagDetailThe tag is born for this, it allows you to get specific information about the current tag page, such as the name, description, and link.

In most cases, in the tag detail page (for example, in the template directory oftag/list.htmlortag/index.htmlthe file),tagDetailThe tag does not need to be specified with an ID or alias, it will automatically recognize the tag information on the current page and render it.

For example, to display the label name in the title section of the page and to display its description on the page, you can use it like thistagDetail:

<div class="tag-header">
    {# 获取当前标签的标题作为页面主标题 #}
    <h1>{% tagDetail with name="Title" %}</h1>

    {# 获取当前标签的描述信息，并判断是否存在后显示 #}
    {% tagDetail tagDescription with name="Description" %}
    {% if tagDescription %}
        <p class="tag-description">{{ tagDescription }}</p>
    {% endif %}

    {# 如果需要显示标签的索引字母，也可以这样获取 #}
    <span class="tag-first-letter">标签索引字母：{% tagDetail with name="FirstLetter" %}</span>
</div>

In the code above,tagDetail with name="Title"It directly outputs the current label name, and{% tagDetail tagDescription with name="Description" %}Then the tag description is assigned totagDescriptionVariables, convenient for us to make further judgments and processing, ensuring that only when the description content exists will the corresponding HTML element be rendered.This way, your tab can clearly convey the meaning to the visitor.

tagDataList: Gather the associated documents under the tag

The core value of the tag page lies in displaying all the content related to the tag.tagDataListTags are designed to meet this need, they can retrieve the list of all associated documents under the specified tag.

On the tag detail page,tagDataListIt can also intelligently recognize the current tag without manual passingtagIdParameters. Just tell it how you want to display these documents, such as how many items per page, whether to paginate, how to sort, and so on.

Considering user browsing habits and SEO requirements, we usually display related documents in a paginated form. At this time,tagDataListoftype="page"Parameters are particularly important, as they are related to the pagination tags of AnQiCMSpaginationCooperation can build a complete document list with pagination.

This is an example of a document associated with a display tag and with pagination functionality

<div class="tag-content-list">
    {# 使用tagDataList获取当前标签下的文档列表，并启用分页，每页显示10条 #}
    {% tagDataList archives with type="page" limit="10" %}
        {% for item in archives %}
            <article class="document-item">
                <h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
                {% if item.Thumb %}
                    <a href="{{ item.Link }}">
                        <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="document-thumb">
                    </a>
                {% endif %}
                <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>
                </div>
            </article>
        {% empty %}
            <p class="no-content-message">该标签下暂时没有找到相关文档。</p>
        {% endfor %}

        {# 结合pagination标签生成分页导航 #}
        {% pagination pages with show="5" %}
            <div class="pagination-nav">
                {# 上一页链接 #}
                {% if pages.PrevPage %}<a href="{{ pages.PrevPage.Link }}" class="page-link prev">上一页</a>{% endif %}

                {# 中间页码链接 #}
                {% for item in pages.Pages %}
                    <a class="page-link {% if item.IsCurrent %}active{% endif %}" href="{{ item.Link }}">{{ item.Name }}</a>
                {% endfor %}

                {# 下一页链接 #}
                {% if pages.NextPage %}<a href="{{ pages.NextPage.Link }}" class="page-link next">下一页</a>{% endif %}
            </div>
        {% endpagination %}
    {% endtagDataList %}
</div>

In this example,tagDataListLoop through the obtainedarchives(Document list), for each document, we display its title, thumbnail, description, publication time, and page views, and add links to the document detail page for the title and thumbnail. At the same time, using{% empty %}Block, we elegantly handled the case when there are no documents under the tag, giving the user a friendly prompt.

Integrated Application: Build a feature-complete tag detail page.

totagDetailandtagDataListTags combined can easily build an informative and feature-rich tag detail page.This page not only clearly displays the information of the tag itself, but also lists all related documents in order and provides convenient pagination navigation.

A typical label detail page template structure may include the following parts:

1. Page metadata (<head>Area):UtilizetdkLabel dynamic settings page