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

In Anqi CMS, tags are not just a supplementary tool for content management, but also a powerful tool for connecting different thematic content, improving the internal link structure of the website, and optimizing the user experience. When you want to display a list of all documents related to a specific tag on a specific 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 tags can flexibly retrieve and display associated document lists based on specific tags, helping you better utilize AnQi CMS for content operation.

tagDataList: The core bridge connecting content and tags

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

UsetagDataListWhen labeling, the template code is usually organized like this: {% tagDataList archives with tagId="1" %}. Here,archivesThis is a custom variable name used to store the document list collection obtained from the database.You can specify any meaningful name as needed.Then, you can pass through oneforto loop througharchivesFor each document, extract information such as document title, link, introduction, publication time, and thumbnail images for display.

It is worth noting that,tagDataListEach document object obtained has rich field information, for example: document ID (Id), Title (Title) SEO title (SeoTitle) and link (Link), Description (Description), Category ID (CategoryId), Page views (Views), Cover thumbnail (Thumb), Creation time (CreatedTimeetc. These fields are enough to meet your various needs for front-end display.

Deep understandingtagDataListparameters

tagDataListThe tag provides multiple parameters, allowing you to accurately control the scope and display method of the documents obtained:

• tagId(Tag 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' -> 'Document Tags' page in the AnQi CMS backend.If you are currently on a tag detail page (for example, the URL contains an ID or alias of a tag), and have not explicitly specifiedtagId,tagDataListThe tag will intelligently automatically read the tag ID of the current page. Of course, you can also go through{% tagDetail with name="Id" %}Such a tag to dynamically get the ID of the current tab and then assign it totagIdThe parameter to achieve more flexible calling.

• moduleId(Model ID):AnQi CMS supports flexible content models, such as the "Article" model (usually ID 1), "Product" model (usually ID 2), and so on. If you only want to display documents associated with a specific content model, such as only displaying documents of the "Article" model, you can setmoduleId="1"Filter. This is very useful to avoid confusion in displaying different types of content.

• order(Sort 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 view count, displaying the most popular documents),order="sort desc"(Sorted by custom backend in reverse order) etc. If you do not specify this parameter, the system will usually display according to the default custom sorting rules.

• limit(Number displayed):You can control how many documents are displayed at one time. For example,limit="10"Only the first 10 documents will be displayed. In some cases, you may need to skip the first few and start displaying from the middle, in which case you can useoffsetpattern, such aslimit="2,10"Represents starting from the second item and getting 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 it totype="list"then,tagDataListit will directly output the specifiedlimitThe number of documents. When you set it totype="page"it will prepare the data for subsequent pagination tagspaginationenabling you to easily implement a document list display with page numbers.

• siteId(Site ID):AnQi CMS supports multi-site management. If you have created multiple sites in the background and want to call the label associated documents of another site within a site, you can specifysiteIdTo implement. But in most single-site operation scenarios, it is usually not necessary to set this parameter.

Practice: Applying in templatestagDataList

Let's understand through several specific template code examples.tagDataListactual application.

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

Assuming you have a tag with ID '1' that 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.truncatechars:80It is a filter used to truncate the document summary to 80 characters and add an ellipsis.

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

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

”`twig {% tagDetail currentTag with name=“Id” %} {# Get the ID of the current tag page #} {% if currentTag %}

<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 %}

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