As an experienced website operations expert, I am more than happy to detail how to efficiently and elegantly call and display all website tag (Tag) lists in the Anqi CMS template.Auto CMS has powerful content management capabilities and flexible template mechanisms, making this operation intuitive and practical.

Revealing AnQi CMS: How to call and display the list of all website tags in the template

In the era of content marketing and SEO optimization, website tags (Tag) play a crucial role.They can not only help users find related content quickly and enhance the in-site navigation experience, but they are also key elements for search engines to understand the theme of the website content.Auto CMS understands its importance and provides a comprehensive tag management function.How can you effectively display these valuable tags in your website template?

Overview of Core Functions: AnQi CMS tag management mechanism

In the Anqi CMS backend, you will find the powerful 'Document Tag' management module.Here, you can create, edit, delete various tags, and associate them with your articles, products, and other content.Each tag can have an independent name, index letter, custom URL, even exclusive SEO title and description, which lays a solid foundation for subsequent template calls and SEO optimization.

The tag design of Anqi CMS is very flexible, a tag can be associated with documents of different content models at the same time, thus realizing cross-model content aggregation.And in the front-end template, we are using built-in template tags to intelligently retrieve and render these tag data.

Call and display the template magic of all tag lists

To call and display all website tag lists in the AnQi CMS template, we need to rely ontagListThis core template tag. This tag is designed to be very flexible, meeting various call needs from hot tags to site-wide tags.

English, you would typically want to place it at a specific location on the website, such as the side bar of the homepage, the bottom navigation area, or a dedicated 'tag cloud' page (usually corresponding to the template filetag/index.html）来展示这些标签。

以下是调用所有标签列表的基本代码结构：

<div class="tag-cloud">
    <h2>网站所有标签</h2>
    <ul class="tag-list">
        {% tagList allTags with itemId="0" %} {# 明确指定获取全站所有标签 #}
            {% for tag in allTags %}
                <li class="tag-item">
                    <a href="{{ tag.Link }}" title="查看更多关于 {{ tag.Title }} 的内容">{{ tag.Title }}</a>
                </li>
            {% else %}
                <li class="no-tags-message">抱歉，目前还没有任何网站标签。请在后台添加。</li>
            {% endfor %}
        {% endtagList %}
    </ul>
</div>

让我们来逐步解析这段代码的逻辑：

  1. {% tagList allTags with itemId="0" %}: 这是核心。

    • tagListThis is a template provided by AnQin CMS specifically for retrieving the list of tags.
    • allTagsis a variable name specified for the tag list data obtained. You can customize it as you like, for examplemyTagsorwebsiteTags.
    • with itemId="0"is the key parameter here. When you need to obtainall tags on the siteWhen, it is clear to specifyitemIdset0English.This will inform the system to ignore any content ID associations on the current page and directly pull all published tag data.itemId, the system may also default to returning all tags, but for the clarity and robustness of the code, it is good practice to specify explicitlyitemId="0"is a good habit.

  2. {% for tag in allTags %}: English tag list data will be returned as an array object.allTagsvariables, so we need to usefora loop to iterate over it. In each loop,tagthe variable will represent an independent tag object.

  3. <li class="tag-item"><a href="{{ tag.Link }}" title="查看更多关于 {{ tag.Title }} 的内容">{{ tag.Title }}</a></li>In the loop body, you can access each label object's properties and display them.

    • {{ tag.Link }}This is the URL link of the label, clicking on it will usually jump to the content list page under the label.
    • {{ tag.Title }}This is the display name of the tag.
    • ExceptLinkandTitleYou can also access other useful fields, such astag.Id(Label ID),tag.Description(Label description),tag.FirstLetter(Label initial letter) etc., apply flexibly according to your design requirements.

  4. {% else %}: ThisforAn elegant extension of a loop. IfallTagsThe list is empty (i.e., the website currently has no tags), thenelseThe content behind will be rendered, providing a friendly prompt to the user.

Further Customization: More Possibilities for Tag Lists

In addition to displaying all tags,tagListThe label also provides rich parameters, allowing you to have more fine-grained control:

  • Limit the number of displayed items: If you only want to display the top 10 popular labels in the sidebar, you can addlimit="10"Parameters:{% tagList hotTags with itemId="0" limit="10" %}.

  • Sort by letter: Do you want to create a tag navigation sorted by alphabetical order? You can useletter="A"orletter="B"parameters.

  • Tag list pagination: If your website has a large number of tags, on a dedicated tag page (such astag/index.html), you can combinetype="page"parameters withpaginationtags to implement pagination display, optimize loading speed and user experience.

    {# 示例：在tag/index.html中分页显示所有标签 #}
{% tagList allTagsPage with type="page" limit="20" %}
    {# 遍历并显示标签的代码与上述类似 #}
    {% for tag in allTagsPage %}
        <li class="tag-item">
            <a href="{{ tag.Link }}" title="{{ tag.Title }}">{{ tag.Title }}</a>
        </li>
    {% endfor %}
{% endtagList %}


{# 别忘了加上分页导航 #}
{% pagination pages with show="5" %}
    {# 分页链接的渲染代码 #}
    {# ... 这里省略具体的页面链接渲染代码，可参考文档中的pagination标签用法 #}
{% endpagination %}

When the user clicks a tag, it will jump to the detail page of the tag (usually corresponding to a template filetag/list.htmlAt this time, you can usetagDataListLabel to get the list of all associated documents under this label, further improving the degree of content aggregation.

Considerations and suggestions in practice.

  • Location of template file: Place the above code in the template file where you want to display the tag list. If it is a site-wide feature, consider placing it inpartial/the public template file under the directory (such assidebar.htmlorfooter.html)，then use{% include "partial/sidebar.html" %}The way to introduce to the main template.
  • Style beautification: The beauty of the tag list directly affects the user experience. By beingdiv.tag-cloud/ul.tag-list/li.tag-item