As an experienced website operations expert, I am well aware that the organization and presentation of website content is crucial for user experience and Search Engine Optimization (SEO).AnQiCMS provides powerful tools for content managers with its flexible template engine and rich tag system.{% tagList %}Tags, elegantly filter and display website tags in alphabetical order.
The value of Tag tag and Anqi CMS.{% tagList %}tags
Tag label plays an important role in content operation.They can not only help users quickly find the content they are interested in, but also improve the internal link structure of the website through related content, thereby having a positive impact on SEO.A well-organized, easy-to-navigate Tag list will undoubtedly greatly enhance the user's exploration experience on the website.
AnQi CMS provides{% tagList %}This powerful template tag allows us to easily display Tag information on the frontend page. By referring to the AnQiCMS documentation, we learn that{% tagList %}Tags can help us get the Tag list of the document, and support various parameters for flexible control, such as limiting the display quantity (limit), and filtering by category (categoryId），even if you specify a document's Tag（itemId）。Its basic usage is usually like this：
{% tagList tags with limit="10" %}
{% for item in tags %}
<a href="{{item.Link}}">{{item.Title}}</a>
{% endfor %}
{% endtagList %}
This code will list the latest 10 tags on the website and generate links to their corresponding list pages. However, when we want to filter and display these tags in alphabetical order (e.g., A-Z), we find that{% tagList %}The tag itself does not directly provide aorder="alphabetical"or similar sorting parameters. This brings up the core issue we are discussing today.
Strategy for elegant implementation of Tag alphabetical order filtering and display
Although{% tagList %}There is no built-in global alphabetical sorting function, but AnQiCMS provides the concept of "index letter" (FirstLetter), and supports it in tags.letterParameters, which provide the possibility for us to display Tags in alphabetical blocks. Moreover, by combining front-end technology, we can also achieve more flexible global alphabetical sorting.
Strategy one: utilizingletterParameter is displayed in alphabetical blocks
The AnQiCMS backend allows each Tag to set an 'Index Letter' in the 'Document Tag Management', which is usually the first letter of the Tag name.{% tagList %}Labels make use of this feature, throughletterparameters can filter out tags with specific initial letters.
We can cleverly utilize this point, traverse the entire English alphabet (A-Z), and call it once for each letter{% tagList %}Tags are grouped by the first letter, which makes it clear and user-friendly for searching.
Below is an example of a template code implementation for displaying letters in chunks.
<div class="tag-cloud">
{% set alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"|make_list %}
{% for char in alphabet %}
<div class="tag-group">
<h3>{{ char }}</h3>
{% tagList tags with letter=char limit="50" %} {# 限制每个字母下的Tag数量，防止过多 #}
{% if tags %}
<ul class="tag-list">
{% for item in tags %}
<li><a href="{{item.Link}}" title="{{item.Description}}">{{item.Title}}</a></li>
{% endfor %}
</ul>
{% else %}
<p>暂无以 "{{ char }}" 开头的标签。</p>
{% endif %}
{% endtagList %}
</div>
{% endfor %}
</div>
Code analysis:
- We first go through
{% set alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"|make_list %}An array containing all uppercase letters has been created. - Then, use
{% for char in alphabet %}The letter array is traversed in a loop. - In each iteration, we print the current letter as the group title and call
{% tagList tags with letter=char limit="50" %}Here,letter=charis critical, it tells CMS to only fetch Tags that start with the current letter. limit="50"Then used to limit the number of Tags displayed under each letter to avoid a single group from being too long and improve page loading efficiency.{% if tags %}Ensure that the list is displayed only when there is a Tag, otherwise, display a friendly prompt message.
The advantages of this method are that the structure is clear, easy to browse, and completely relies on the backend processing of AnQiCMS, which is SEO-friendly because all the Tag links are rendered on the server side.
Strategy Two: Implement global alphabetical sorting using front-end JavaScript (suitable for specific scenarios)
If your business scenario indeed requires a unified, non-grouped Tag list, and strictly sorted in alphabetical order from A to Z,{% tagList %}Label current version does not provide directorderparameter implementation. Then, consider using front-end JavaScript to assist with the implementation.
Implementation idea:
- First, make use of
{% tagList %}Label fetch all or a large number of Tags (such as, setlimitto a sufficiently large value, or not setletterparameters). - Use JavaScript to get the DOM elements of these Tags when the front-end page is loaded.
- Write JavaScript code to sort the text content of the Tag by alphabetical order.
item.TitleSort the Tag by alphabetical order. - Rerender the sorted Tag on the page.
For example, the code to get all Tags:
<ul id="all-tags" style="display:none;"> {# 初始隐藏，待JS排序后显示 #}
{% tagList all_tags with limit="999" %} {# 尽可能获取所有Tag #}
{% for item in all_tags %}
<li data-tag-title="{{ item.Title }}"><a href="{{item.Link}}">{{item.Title}}</a></li>
{% endfor %}
{% endtagList %}
</ul>
<div id="sorted-tags"></div> {# 排序后的Tag将显示在这里 #}
<script>
document.addEventListener('DOMContentLoaded', function() {
const allTagsContainer = document.getElementById('all-tags');
const sortedTagsContainer = document.getElementById('sorted-tags');
const tags = Array.from(allTagsContainer.children); // 获取所有<li>元素
// 根据data-tag-title属性进行字母排序
tags.sort((a, b) => {
const titleA = a.dataset.tagTitle.toLowerCase();
const titleB = b.dataset.tagTitle.toLowerCase();
if (titleA < titleB) return -1;
if (titleA > titleB) return 1;
return 0;
});
// 清空原有的sorted-tags容器，并添加排序后的Tag
sortedTagsContainer.innerHTML = '';
const ulElement = document.createElement('ul');
tags.forEach(tag => {
ulElement.appendChild(tag);
});
sortedTagsContainer.appendChild(ulElement);
allTagsContainer.style.display = 'none'; // 确保原始Tag列表不显示
sortedTagsContainer.style.display = 'block'; // 显示排序后的Tag列表
});
</script>
Caution:Although this front-end sorting method can achieve global alphabetical sorting, the following points should be noted:
- SEO impact:If the Tag list is dynamically loaded or rendered by JS, search engine crawlers may not be able to fully capture the sorted results.But since the Tag's link is static, it still allows access to the correct Tag list page after clicking, so the impact is relatively controllable.
- Performance:If the number of Tags is very large, sorting in the client JS will increase the browser load and page load time.
- User Experience:There may be a brief unsorted list flash when the page is first loaded, until the JS is executed.
In most cases,Strategy one (display letters in blocks)It is sufficient to meet the operational requirements and is more SEO-friendly, as it directly renders clear, static content from the server side.
Tag management from the perspective of content operation
No matter which display method is used, the standardization management of Tag itself is the cornerstone:
- Tag naming standardization:Maintain the uniformity and specification of Tag names, avoiding synonyms or typos in Tags. This is especially important for alphabetical sorting, as "Apple" and "apple" may be treated as different Tags during sorting (although AnQiCMS's
FirstLetterThe case normalization is usually done, but the semantic consistency still needs to be maintained manually. - Reasonably set index letters:Ensure that each Tag's 'Index Letter' setting is correct in the 'Document Tags' management of the AnQiCMS backend (path: Content Management -> Document Tags). This will directly affect
letterParameter filtering results. - Avoid tag stacking:Each tag should represent a clear topic or keyword, not arbitrarily added to increase keyword density.Too many tags can actually dilute the weight, reducing the SEO value of each tag.
Through the backend features provided by Anqi CMS, you can easily add, edit, and manage Tags, including setting their names, index letters, custom URLs, SEO titles, and descriptions, all of which lay a solid foundation for the effective operation of Tags.
Summary
Though the Anqi CMS does not provide a direct global alphabetical sorting parameter for tags,{% tagList %}but we can combine its powerfulletterParameters are implemented to display blocks alphabetically, which meets user needs and maintains SEO-friendliness in most operation scenarios.For scenarios with special requirements, front-end JavaScript can also be considered for auxiliary sorting, but the potential impact on performance and SEO should be weighed.The essence lies in understanding the characteristics of the tools and applying them flexibly according to actual needs, only then can the maximum value of Anqi CMS be realized.
Common Questions (FAQ)
1.{% tagList %}Can tags display all the Tags of the current document?
Of course. In the document detail page,{% tagList %}The tag will read the current document's ID by default. If you want to explicitly get all the Tags of the current document, you can useitemIdParameter, set it to the current document ID. For example:{% tagList tags with itemId=archive.Id %}. If the page context is already a document detail page, it can usually be used directly.{% tagList tags %}The system will automatically recognize and retrieve the current document's Tag.
2. How to ensure that the Tag link is SEO-friendly?
The Anqi CMS was designed with SEO in mind. The link of Tag (i.e., the URL of the Tag list page) can be optimized through the "pseudo-static rules" in the backend, making it more readable and relevant to keywords, for example, set as/tag/seo.htmlor/tags/SEO/[en] etc. In addition, in "Document Tag Management", you can set a custom URL for each Tag (自定义URLFields) and SEO titles, keywords, and descriptions to further enhance the search engine performance of the Tag list page. Make sure that the custom URL is unique and does not contain special characters.
If the number of tags on the website is very large, will it affect page loading? How can it be optimized?
If the number of Tags is huge, fetching and displaying all Tags at once may indeed affect the page performance. To mitigate this issue, there are several optimization strategies:
- Reasonable settings
limitParameters:When calling{% tagList %}usinglimit="N"Parameter limit for the number of Tags displayed each time, for example,limit="50". - Chunked loading (such as loading by letters):Using the 'Strategy One' mentioned in this article, tags are displayed in blocks according to the first letter, and only tags under one letter are loaded at a time, which helps to distribute the loading pressure.
- Using pagination (Tag list page):If the Tag list page (usually)
tag/index.html) has a large number of Tags, `{