How to retrieve and display the associated document list based on a specific tag in `tagDataList`?

In AnQi CMS, tags (Tag) are not only an auxiliary tool for content management, but also a powerful tool that connects different thematic content, enhances the internal link structure of the website, and optimizes the user experience. When you want to display a list of all documents related to a specific tag on a certain page of the website, such as a special topic page, a tag cloud page, or the sidebar of a specific article,tagDataListTags are your best choice.

This article will delve deeper intotagDataListHow to flexibly fetch and display related document lists based on specific tags, helping you better utilize the CMS for content operation.

tagDataListConnecting content to labels at the core

In the Anqi CMS,tagDataListThe core function of the label is to filter out all documents marked with the specified label ID and display these documents in a list form.This is crucial for building personalized content aggregation pages, enhancing the exposure of certain thematic content, and improving the browsing depth of users on the website.

UsetagDataListWhen labeling, you will usually organize your template code like this:{% tagDataList archives with tagId="1" %}Here,archivesIt is a variable name we define, used to store the collection of document lists obtained from the database.You can specify any meaningful name as needed.forin a loop to iterate overarchivesEach document is processed and information such as document title, link, introduction, publication time, and thumbnail is extracted to display.

It is worth noting that,tagDataListEach document object obtained has rich field information, such as: document ID (Id) and the title (Title) SEO title (SeoTitle) and the link (Link) and the description (Description) category ID (CategoryId) views (Views)、English cover thumbnail (Thumb)、English creation time (CreatedTime)etc. These fields are sufficient to meet all your front-end display needs.

Deep understandingtagDataListparameter

tagDataListThe label provides multiple parameters, allowing you to accurately control the scope and display of the documents you obtain:

  • tagId(Label ID):This istagDataListThe most critical parameter of the tag.It specifies the document list under which tag you want to retrieve.This ID can be found on the "Content Management" -u003e "Document Tags" page in the Anqi CMS backend.tagId,tagDataListThe label will intelligently automatically read the tag ID of the current page. Of course, you can also{% tagDetail with name="Id" %}dynamically obtain the ID of the current tag page using such a label, and then assign it totagIdParameter, to achieve more flexible invocation.

  • moduleId(Model ID):AutoCMS supports flexible content models, such as the "ArticlemoduleId="1"Select. This is very useful for avoiding confusion in the display of different types of content.

  • order[en](Sorting method):The order of content is crucial for user experience and information delivery.orderThe parameter allows you to customize the sorting rules of the document. Common sorting methods include:order="id desc"(Sorted by ID in reverse order, usually indicating the most recent release),order="views desc"(Sorted by views in descending order, displaying the most popular documents)order="sort desc"(Sorted in reverse order according to the custom settings on the backend) and so on. If you do not specify this parameter, the system will usually display according to the default custom sorting rules.

  • limit(Display Quantity):You can control how many documents are displayed at one time. For example,limit="10"The first 10 documents will be displayed. In some cases, you may need to skip the first few and start from the middle, in which case you can useoffsetpattern, such aslimit="2,10"Indicates to start from the second item and get 10 items.

  • type(List type):This is a very important parameter, which determines whether the document list is displayed in a simple list form or prepared for pagination. When you set ittype="list"whentagDataListIt will directly output the specifiedlimitThe number of documents. When you set it totype="page"it will prepare data for subsequent pagination tagspaginationenabling you to easily display a paginated list of documents.

  • siteId(Site ID):Auto CMS supports multi-site management. If you have created multiple sites in the background and wish to call the associated document tags of another site in one site, you can do so by specifyingsiteIdTo implement. But in most single-site operation scenarios, it is usually not necessary to set this parameter.

Practice: Applying in templatestagDataList

Let's understand by several specific template code examplestagDataListThe practical application of.

Example one: Display the latest 5 documents under a specific tag

If you have a label with ID "1" and you want to display the latest 5 documents under it on the homepage or sidebar:

<div class="tag-related-articles">
    <h3>“热门话题”标签下的最新文章</h3>
    <ul>
        {% tagDataList archives with tagId="1" order="id desc" limit="5" %}
            {% for item in archives %}
                <li>
                    <a href="{{ item.Link }}" title="{{ item.Title }}">
                        {% if item.Thumb %}<img src="{{ item.Thumb }}" alt="{{ item.Title }}">{% endif %}
                        <h4>{{ item.Title }}</h4>
                        <p>{{ item.Description|truncatechars:80 }}</p>
                        <small>发布于: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</small>
                    </a>
                </li>
            {% empty %}
                <li>当前标签下没有找到任何文档。</li>
            {% endfor %}
        {% endtagDataList %}
    </ul>
</div>

This code will query the latest 5 documents with tag ID 1 and display their titles, links, thumbnails, summaries, and publication dates in a list format.truncatechars:80It is a filter that truncates the document summary to 80 characters and adds an ellipsis.

Example two: Display the paginated document list under the tag on the tag detail page.

When a user visits a dedicated page of a tag (for example/tag/seo), we usually want to display all documents related to the "SEO" tag and provide pagination. In this case,tagDataListoftype="page"The parameter comes into play:

English

<div class="tag-documents-list">
    <h1>标签:{% tagDetail with name="Title" %}</h1>
    <p>描述:{% tagDetail with name="Description" %}</p>

    {% tagDataList archives with tagId=currentTag type="page" limit="10" %}
        {% for item in archives %}
            <article>
                <a href="{{ item.Link }}" title="{{ item.Title }}">
                    <h2>{{ item.Title }}</h2>
                    <p>{{ item.Description|truncatechars:150 }}</p>
                    <small>浏览量: {{ item.Views }} | 发布于: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</small>
                </a>
            </article>
        {% empty %}
            <p>当前标签下没有找到任何文档。</p>
        {% endfor %}
    {% endtagDataList %}

    <div class="pagination-container">
        {% pagination pages with show="5" %}
            <ul>
                {% if pages.FirstPage %}
                    <li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">首页</a></li>
                {% endif %}
                {% if pages.PrevPage %}
                    <li><a href="{{pages.PrevPage.Link}}">上一页</a></li>
                {% endif %}
                {% for pageItem in pages.Pages %}
                    <li class="{% if pageItem.IsCurrent %}active{% endif %}"><a href="{{pageItem.Link}}">{{pageItem.Name}}</a></li>
                {% endfor %}
                {% if pages.NextPage %}
                    <li><a href="{{pages.NextPage.Link}}">下一页</a></li>
                {% endif %}
                {% if pages.LastPage %}
                    <li class="{% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">尾页</a></li>
                {% endif %}
            </ul>
        {% endpagination %}
    </div>
</div>

{% else %} English

<p>未能找到相关标签信息