How does the AnQiCMS `tagList` tag display all associated tags of the document?

Easily display the document associated tags: AnQiCMS'stagListIn-depth tag analysis

In content management, tags (Tag) play a crucial role.They can not only help us better organize content and improve the internal link structure of the website, but also play a huge role in search engine optimization (SEO), making it easier for users and search engines to find relevant information.AnQiCMS has fully considered this point and provided a flexible and powerful tag management system. Among them,tagListThe tags are the core tools for displaying document associated tags on our frontend.

Core function analysis:tagListLabel Overview

tagListThe primary purpose of the tag is to retrieve and display all tags associated with the document. Whether it is to display related topics at the bottom of the article or to create a hot tag cloud in the sidebar,tagListAll of them can provide the data we need. This tag allows us to flexibly control the source and quantity of tags according to different needs.

How to associate tags with documents

While usingtagListBefore the label, we need to understand how the label is associated with the document.In the AnQiCMS backend, when we add or edit a document, we will see a 'Tag label' input box.In here, we can add multiple tags to the current document.We can choose an existing label, or create a new one by entering text and pressing Enter.AnQiCMS's tag system is very flexible, the same tag can be shared by documents of different content models (such as articles, products, etc.), which means that tags are cross-category and cross-model.

tagListBasic usage of tags

tagListThe use of tags conforms to the unified syntax of the AnQiCMS template engine. Its basic structure is{% tagList 变量名 with ... %}and{% endtagList %}.

For example, to display all the tags of the current document on the front end, we can define a variable like thistagsto carry these tag data, and then throughforloop traversal output:

<div>
    文档标签：
    {% tagList tags %}
        {% for item in tags %}
            <a href="{{item.Link}}">{{item.Title}}</a>
        {% endfor %}
    {% endtagList %}
</div>

In this example,tagsis an array object,forin the loopitemThe variable represents each independent label object. Each label object containsId(Label ID),Title(label name),Link(Label link),Description(Label description) andFirstLetterInformation of label index letters. We can access and display these data as needed.item.属性名The way to access and display these data.

Deep understandingtagListparameters

tagListThe tag provides multiple parameters, allowing us to control the acquisition of tags more precisely:

• itemId: Specify the document IDBy default,tagListIt will automatically retrieve the tags associated with the current page document. But if we want to display the tags of a specific document, we canitemId="文档ID"specify. For example,itemId="10"Will retrieve the tags of the document with ID 10. If you want to displayall tagsinstead of tags associated with a specific document, you canitemIdis set to0, that isitemId="0"This is very useful when making a website's tag cloud or hot tags list.

• limitControl the number of displayed items.We can uselimit="数量"To limit the number of tags displayed. For example,limit="10"It will only display up to 10 tags. If we need to start retrieving a certain number of tags from a certain position (for example, starting from the 2nd tag and getting 5), we can uselimit="offset,数量"Pattern, for examplelimit="2,5".

• letter: Filter by index letterThis parameter allows us to only display tags with specific initials, for exampleletter="A"It will only display tags starting with A.

• categoryId: Filter by category IDIf we want to display tags under a specific or a few specific categories (these tags may also be associated with documents in other categories, but here we are only concerned with the tags in the specific category context), we can usecategoryId="分类ID". Multiple category IDs can be separated by English comma,for examplecategoryId="1,2,3".

• siteId: Multi-site data callFor users who have used the AnQiCMS multi-site management function, if they need to call data from other sites, they cansiteId="站点ID"Specify. Usually, this parameter can be omitted becausetagListIt will default to getting the data of the current site

Practical code examples

Understood the parameters, let's take a look at some specific application scenarios.

1. Display all tags associated with the current document

<div class="article-tags">
    <strong>相关标签：</strong>
    {% tagList currentDocTags %}
        {% for tag in currentDocTags %}
            <a href="{{ tag.Link }}" title="{{ tag.Title }}">{{ tag.Title }}</a>
        {% empty %}
            <span>暂无相关标签</span>
        {% endfor %}
    {% endtagList %}
</div>

2. Display all popular tags (such as in the sidebar)

Here we willitemIdis set to0and limit the number of displayed items.

<div class="sidebar-tags">
    <h4>热门标签</h4>
    <ul>
        {% tagList hotTags with itemId="0" limit="15" %}
            {% for tag in hotTags %}
                <li><a href="{{ tag.Link }}">{{ tag.Title }}</a></li>
            {% empty %}
                <li>暂无热门标签</li>
            {% endfor %}
        {% endtagList %}
    </ul>
</div>

3. Pagination is performed on the dedicated tag list page

AnQiCMS'tagListTags also support pagination, which is usually used for/tag/index.htmlThis label index page. We need totypethe parameter to"page"and combiningpaginationlabel usage

`twig

<h1>所有标签</h1>
{% tagList allPageTags with type="page" limit="20" %}
    <ul class="tag-grid">
    {% for tag in allPageTags %}
        <li>
            <a href="{{ tag.Link }}" title="{{ tag.Title }}">
                <h3>{{ tag.Title }}</h3>
                {% if tag.Description %}
                    <p>{{ tag.Description | truncatechars: 100 }}</p>
                {% endif %}
            </a>
        </li>
    {% empty %}
        <li>暂无标签可显示。</li>
    {% endfor %}
    </ul>

    {# 分页代码 #}
    <div class="pagination-nav">
        {% pagination pages with show="5" %}
            <ul>
                <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
                {% if pages.PrevPage %}
                    <li class="page-item"><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
                {% endif %}
                {% for p_item in pages.Pages %}
                    <li class="page-item {% if p_item.IsCurrent %}active{% endif %}"><a href="{{p_item.Link}}">{{p_item.Name}}</a></li>
                {% endfor %}
                {% if pages.NextPage %}
                    <li class="page-item"><a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a></li>
                {% endif %}
                <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a></li>
            </ul>
        {% endpagination %}
    </div>