How to obtain and display all document lists under a specific Tag label in AnQiCMS?

In AnQi CMS, managing website content, Tag tags are undoubtedly a very flexible and practical tool. They can help us classify contents of different categories or even different models according to themes, greatly enriching the way content is organized and the browsing experience of users.Then, when we want to concentrate on displaying a list of all documents under a specific Tag on a dedicated page, Safe CMS provides very intuitive and powerful template tags to help us achieve this goal.

Understanding the role of Tag labels in AnQi CMS

Before diving into the code, let's briefly review the position of Tag tags in the CMS.It is like a 'point of interest' or 'keyword' for content, which can span across different content models such as articles, products, etc., and gather all documents mentioning or associated with this 'point of interest'.This is very valuable for content marketing, SEO optimization, and providing users with more accurate content navigation.

You can find the 'Document Tag' feature under the 'Content Management' menu in the Anqi CMS backend.Here, you can create, edit, and manage all Tag tags, including their names, custom URLs (which are very important for SEO), and description information.When you edit a document or a product, you can select or create a new tag in the "Tag label" field and associate it with the corresponding content.

Prepare the display page of Tag tags list

To retrieve and display all documents under a specific Tag label, we usually need a special template file to hold this content. In the template design specifications of Anqi CMS, for Tag label list pages, it is usually the one located at/template/{您的模板目录}/tag/list.htmlThe template file. Of course, you can also customize other templates according to your actual needs and make corresponding configurations in the background.

The template engine of AnQi CMS adopts syntax similar to Django, using{{变量}}to output data, while{% 标签 %}is used to implement logical control and data access.

Get detailed information of Tag tag

Before displaying the document list, we usually want to show the name or description of the current Tag label at the top of the page, so that the user can clearly understand which Tag the current page is about. At this time, you can usetagDetailLabel to get the detailed information of the current Tag.

Assuming we aretag/list.htmlThis template, Anqi CMS will automatically identify the corresponding Tag ID of the current page. We do not need to pass any additional information.idparameters,tagDetailThe tags will automatically obtain the title, description, and other information of the current Tag.

An example of a simple one, to display the current Tag's name and description on the page:

<h1>{% tagDetail with name="Title" %}</h1>
<p>{% tagDetail with name="Description" %}</p>

This code will output the title and description of the current Tag. If the Tag has no description, it will display as empty.

Get and display the list of all documents under the Tag tag

The core feature is here! To get all documents under a specific Tag, Anqi CMS providestagDataListthe Tag. This Tag is specifically used to retrieve all documents associated with a Tag.

When you aretag/list.htmlThis Tag page usestagDataListWhen it is used, it will default to retrieving the document associated with the current page's Tag ID. You can also usetagId参数显式地指定某个Tag的ID来获取其下的文档，但这在Tag列表页通常不需要。

The following is a commonly used code snippet for fetching and displaying the document list under the Tag label, which includes pagination functionality:

{# 假设这里是页面顶部，展示Tag名称等信息 #}
<div class="tag-header">
    <h1>标签：{% tagDetail with name="Title" %}</h1>
    <p>{% tagDetail with name="Description" %}</p>
</div>

{# 文档列表区域 #}
<div class="document-list">
    {% tagDataList archives with type="page" limit="10" %} {# type="page" 开启分页，limit="10" 每页显示10条 #}
        {% for item in archives %}
        <article class="document-item">
            <a href="{{item.Link}}">
                {% if item.Thumb %}
                <div class="document-thumb">
                    <img src="{{item.Thumb}}" alt="{{item.Title}}">
                </div>
                {% endif %}
                <h2 class="document-title">{{item.Title}}</h2>
            </a>
            <p class="document-description">{{item.Description}}</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>当前标签下没有任何文档。</p>
        {% endfor %}
    {% endtagDataList %}
</div>

{# 分页导航区域 #}
<div class="pagination-nav">
    {% pagination pages with show="5" %} {# show="5" 表示最多显示5个页码按钮 #}
        <ul>
            <li {% if pages.FirstPage.IsCurrent %}class="active"{% endif %}><a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
            {% if pages.PrevPage %}
            <li><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
            {% endif %}
            {% for pageItem in pages.Pages %}
            <li {% if pageItem.IsCurrent %}class="active"{% endif %}><a href="{{pageItem.Link}}">{{pageItem.Name}}</a></li>
            {% endfor %}
            {% if pages.NextPage %}
            <li><a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a></li>
            {% endif %}
            <li {% if pages.LastPage.IsCurrent %}class="active"{% endif %}><a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a></li>
        </ul>
    {% endpagination %}
</div>

Code analysis:

  1. {% tagDataList archives with type="page" limit="10" %}:
    • archivesIt is a variable name defined by us, used to store the document list data obtained from the tags.
    • type="page"It is a critical parameter, which tells the system that we need a paginated list of documents. If you only want a fixed number of lists without pagination, you can usetype="list".
    • limit="10"It sets the display of 10 documents per page.
  2. {% for item in archives %}TraversalarchivesEach document in the variable,itemrepresents the current document object.
  3. {{item.Link}},{{item.Title}},{{item.Description}},{{item.Thumb}}These are the commonly used fields of the document object, corresponding to the document link, title, abstract, thumbnail, etc. You can call more fields in the document object as needed.item.Views（Readings），item.CreatedTime（Creation time），etc.
  4. {{stampToDate(item.CreatedTime, "2006-01-02")}}:stampToDateIt is a tag built into the AnQi CMS for formatting timestamp, which can convert the document's timestamp into a readable date format."2006-01-02"This is a time formatting template unique to the Go language.
  5. {% empty %}: This is a very useful block, whenarchivesThe list is empty (i.e., there are no documents under the current tag),{% empty %}The content inside will be displayed, avoiding blank pages.
  6. {% pagination pages with show="5" %}:
    • pagesIs a variable used to receive pagination information.
    • show="5"Means that at most 5 page number buttons are displayed in the pagination navigation, for example1 2 3 4 5.
    • pages.FirstPage.Link/pages.PrevPage.Link/pages.Pages(Page number list) ,pages.NextPage.Link/pages.LastPage.Linkfields can help you build a complete pagination navigation link.

By following these steps and the code, you can efficiently retrieve and display the document list under any Tag label in the AnQi CMS. Whether it's to enhance user experience or optimize the website structure, this is a very practical skill.

Common Questions (FAQ)

1. How to reference and display documents under a specific Tag tag on other non-Tag list pages of the website?

If you are not on the Tag tag list page (such as `tag/list.