How to retrieve and display the list of documents under a specific Tag label in AnQiCMS?

In Anqi CMS, managing website content, the Tag label is undoubtedly a very flexible and practical tool. It helps us categorize content of different classifications and even different models by theme, greatly enriching the organization of content and the browsing experience of users.Then, when we want to display a list of all documents under a specific Tag label on a dedicated page, AnQi CMS provides very intuitive and powerful template tags to help us achieve this goal.

Understanding the role of the Tag label in AnQiCMS

Before delving into the code, let's briefly review the position of the Tag label in AnQi 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 that mention or are 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 Tag label list display page

To retrieve and display all documents under a specific Tag label, we usually need a dedicated template file to hold this content. According to the template design specifications of Anqi CMS, for the Tag label list page, 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 configure them accordingly in the background.

The Anqi CMS template engine uses 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 display the name or description of the current Tag tag at the top of the page, so that the user can clearly understand that the current page is about which Tag. At this time, you can usetagDetailTag to get the details of the current Tag.

Suppose we aretag/list.htmlIn this template, AnQi CMS will automatically identify the Tag ID corresponding to the current page. We do not need to pass any extra information.idparameter,tagDetailThe tag will automatically retrieve the title, description, etc. of the current Tag.

A simple example, 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 all documents under the Tag tag.

The core feature is here! Anqicms provides the ability to retrieve all documents under a specific TagtagDataListTag. This tag is specifically used to retrieve all documents associated with a certain Tag.

when you aretag/list.htmlsuch Tag page is usedtagDataListwhen it will default to get the document associated with the current page's Tag ID. You can also throughtagIdExplicitly specifying the ID of a Tag to get the documents under it, but this is usually not needed on the Tag list page.

Here is a commonly used code snippet to retrieve and display the document list under the Tag tag, which includes pagination features:

{# 假设这里是页面顶部，展示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 to store the document list data obtained under the label.
   • type="page"is a key parameter, it tells the system that we need a paginated document list. If you only want a fixed number of lists without pagination, you can usetype="list".
   • limit="10"set to display 10 documents per page.
2. {% for item in archives %}: TraversearchivesEach document in the variable,itemrepresents the current document object.
3. {{item.Link}},{{item.Title}},{{item.Description}},{{item.Thumb}}: These are common fields of the document object, corresponding to the document link, title, summary, thumbnail, etc. You can call more fields in the document object as needed, for exampleitem.Views(Reading volume),item.CreatedTime(Creation time), etc.
4. {{stampToDate(item.CreatedTime, "2006-01-02")}}:stampToDateIt is a tag built into AnQi CMS for formatting timestamps, which can convert the document's creation timestamp into a readable date format."2006-01-02"It is a time formatting template unique to the Go language.
5. {% empty %}: It is a very useful block, whenarchivesThe list is empty (i.e., there are no documents under the current tag),{% empty %}The content will be displayed to avoid page blank.
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(Middle page number list),pages.NextPage.Link/pages.LastPage.LinkThe fields can help you build a complete pagination navigation link.

By following these steps and code, you can efficiently retrieve and display the document list under any Tag label in Anqi CMS, whether it is for improving user experience or optimizing website structure, this is a very practical skill.

Frequently Asked Questions (FAQ)

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

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