How to limit the number and sorting method of displayed Tags using the `tagList` tag?
Flexible control of website tags: In Anqi CMStagListTag quantity limitation and sorting techniques
In a content management system, tags (Tag) are an important element for connecting content, enhancing user experience, and optimizing search engine crawling.AnQi CMS is an efficient enterprise-level content management system that provides powerful tag management features and allows developers and operators to flexibly display these tags on the front-end through its template tag system. Among them,tagListTags are the core tools to display the list of related tags in documents.
However, in actual operation, we often need to control the number of tags displayed, such as only displaying the top 10 most popular tags or arranging them in a specific order. This article will delve into the CMS of AnQi.tagListHow to implement quantity restrictions and sorting for tags, helping you better utilize the tag feature.
Know about AnQi CMStagListTag
First, let's briefly reviewtagListBasic usage of tags. In AnQi CMS templates,tagListUsed to call data related to document tags. Its basic structure is similar to this:
{% tagList tags with limit="10" %}
{% for item in tags %}
<a href="{{item.Link}}">{{item.Title}}</a>
{% endfor %}
{% endtagList %}
This code is used to get the list of tags and assign it totagsthe variable, then traverse it through a looptagsDisplay the title and link of each tag. You can see that a parameter namedlimitis listed, which is the key to controlling the quantity.
Accurately control the number of tags:limitThe magic of parameters
tagListTag throughlimitThe parameter provides very flexible control over the number of tags. This parameter allows you to specify the number of tags you want to display or to implement more advanced offset display.
1. Limit the total number displayed
The most common usage is to limit the total number of tags in a list. If you only want to display, for example, 'The latest 10 tags' or 'The most commonly used 20 tags' on the page, you just need to setlimitThe parameter can be an integer value.
For example, to display 10 tags, you can set it like this:
{% tagList tags with limit="10" %}
{# 此处将展示最多10个标签 #}
{% for item in tags %}
<a href="{{item.Link}}">{{item.Title}}</a>
{% endfor %}
{% endtagList %}
Of Security CMSlimitThe parameter supports integer values between 1 and 100. If it exceeds this range, the system may use the default value or behave unexpectedly, so it is recommended to set it within this range.
2. Implement pagination or skip a specific number
limitThe parameter also supports an "offset" mode, which is very useful when you need to skip the first few tags or achieve a more refined "pseudo-paging" effect. The format is"offset,count", which means from theoffsetA label starts (the index is from 0 or 1, depending on the system's internal implementation, usually 0 or 1), getcountA label.
For example, if you want to skip the first 2 tags and start displaying from the 3rd tag, and get the next 5 tags, you can set it like this:
{% tagList tags with limit="2,5" %}
{# 此处将从第3个标签开始，展示5个标签 #}
{% for item in tags %}
<a href="{{item.Link}}">{{item.Title}}</a>
{% endfor %}
{% endtagList %}
This pattern is very useful in certain specific UI design or content recommendation scenarios, allowing you to precisely control which tags appear in different areas of the page.
Explore the sorting method of tags: optimize the display order
Compared to directly limiting the number, the sorting method of tags is intagListThere is no explicit parameter in the tagsorderThis is likearchiveListThe document list labels are different,archiveListProvidedorder="id desc|views desc"with clear sorting options. FortagListits sorting behavior mainly depends on the system's default logic and indirect influence through filtering parameters.
1. Default Sorting Behavior
In the absence of other filtering or sorting conditions, the Anqi CMS'stagListTags are usually sorted by the creation time (ID) of the tag, with the latest tags possibly appearing at the top or sorted according to the default weight or popularity maintained internally by the system.This default behavior is sufficient for most dynamic tag displays.
2. Passedletterparameters are used for filtering (indirect sorting)
tagListProvided aletterThe parameter allows you to filter by the first letter of the tag. Although this is not a direct sorting feature, it can effectively limit the tag list to tags starting with a specific letter, thus visually creating an effect of 'grouped by alphabetical order'.
For example, if you want to display labels that start with the letter 'A', you can use it like this:
{% tagList tags with limit="10", letter="A" %}
{# 此处将展示最多10个以"A"开头的标签 #}
{% for item in tags %}
<a href="{{item.Link}}">{{item.Title}}</a>
{% endfor %}
{% endtagList %}
Through combininglimitandletterYou can achieve the requirement of 'Display up to 10 labels starting with 'A'.
3. Post-processing at the template level (front-end sorting)
If the built-in of Anqi CMStagListThe parameters do not meet your strict requirements for specific sorting (for example, requiring all tags to be sorted in ascending or descending alphabetical order by title), you may need to sort the tags in front-end JavaScript on the template level after obtaining the tag data, or a better approach is to handle the sorting in advance in the backend business logic. However, for most operational scenarios, the default behavior of Anqi CMS plusletterThe filter can already meet the basic display requirements.
Actual application scenarios and code examples
Assuming we want to display 5 of the most popular tags in the sidebar, and that these are not exclusive tags for the current document, but rather hot tags across the entire site, and also if we want to show a list of tags starting with 'C'.
Scene one: Display the 5 most popular tags on the entire sitedue totagListThere is no clear 'popularity' sorting parameter, here we assume that the system defaults or can obtain a sorting tag by some weight through other configurations (such as backend configuration). If you want to display tags across the entire site without being limited by the current document, you need to setitemId="0".
<div class="sidebar-tags">
<h3>热门标签</h3>
<ul>
{% tagList hotTags with limit="5", itemId="0" %}
{% for tag in hotTags %}
<li><a href="{{tag.Link}}">{{tag.Title}}</a></li>
{% empty %}
<li>暂无热门标签。</li>
{% endfor %}
{% endtagList %}
</ul>
</div>
Scenario two: Display 10 tags starting with 'C'
<div class="category-c-tags">
<h3>以“C”开头的标签</h3>
<ul>
{% tagList cTags with limit="10", letter="C" %}
{% for tag in cTags %}
<li><a href="{{tag.Link}}">{{tag.Title}}</a></li>
{% empty %}
<li>暂无以“C”开头的标签。</li>
{% endfor %}
{% endtagList %}
</ul>
</div>
By using these flexible parameter combinations, you can customize the display of tag lists in Anqi CMS according to different design and operational needs, thus enhancing the organization of website content and user experience.
Summary
Of Security CMStagListTags are a powerful tool for managing and displaying website tags. By using them flexibly,limitParameter, you can easily control the number of tags displayed, whether it is a fixed number or a selection with an offset. Although it does not provide directorderCustomize the parameters and you can make use ofletterFilter the parameters, or rely on the system's default sorting logic to meet most needs.Understanding and mastering these skills will make your website tag layout more intelligent and efficient, bringing a better browsing experience to users.
Frequently Asked Questions (FAQ)
1. IftagListThere are no explicit sorting parameters, how can you sort by tag title in alphabetical order (A-Z)?Answer: BecausetagListThe label itself does not provide directorderParameters are used for custom sorting, usually it will be sorted according to the creation ID of the tag or the default system built-in weight. If you need to sort strictly by the alphabetical order of the tag title, this is usually required in Anqi CMS