Easily display related document tags in AnQiCMS:tagListIn-depth analysis of tags

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 provides a flexible and powerful tag management system.tagListTags are the core tool for displaying document-related tags on our front-end.

Core Function Analysis:tagListTag Overview

tagListThe main purpose of the tag is to obtain 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 popular tag cloud in the sidebar.tagListThis tag allows us to flexibly control the source and quantity of tags according to different needs. It can provide us with the data we need.

How to associate tags with documents

When 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 an input box for 'Tag label'.Here, we can add multiple tags to the current document.We can choose an existing tag, or create a new one by typing text and pressing the Enter key.The tag system of AnQiCMS 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 follows the unified syntax of 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 thenforloop through and 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) as well asFirstLetter(Label index letter) and other information. We can access and display these data according to our needs, byitem.属性名in order to access and display these data.

Deep understandingtagListparameter

tagListTags provide multiple parameters, allowing us to finely control the acquisition of tags:

  • itemId: Specify document IDBy default,tagListIt will automatically retrieve the tags associated with the current page document. But if we want to display tags of a specific document, we canitemId="文档ID"to specify. For example,itemId="10"Retrieve the tags of the document with ID 10. If you want to displayall tags, instead of the tags associated with a specific document, you canitemIdset0, which isitemId="0"This is very useful when making website tag clouds or hot tag lists.

  • limit: Control the display quantity.We can throughlimit="数量"to limit the number of tags displayed. For example,limit="10"It will only display up to 10 tags. If we need to retrieve a certain number of tags starting from a specific position (for example, starting from the 2nd tag and getting 5), we can uselimit="offset,数量"pattern, such aslimit="2,5".

  • letter: Filter by index letterThis parameter allows us to display only tags with specific initial letters, such asletter="A"will only display tags that start with A.

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

  • siteId: Data call for multiple sitesFor users who have used the AnQiCMS multi-site management function, if they need to call data from other sites,siteId="站点ID"Specify this. In most cases, this parameter can be omitted becausetagListit will default to retrieving data from the current site.

Practical code examples

Understood the parameters, let's take a look at some more 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 (e.g., in the sidebar).

Here we willitemIdset0and 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 special tag list page

AnQiCMStagListTags also support pagination, which is usually used for/tag/index.htmlSuch a label index page. We need to.typeparameter settings"page"and combine.paginationUse the label.

"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>