In Anqi CMS, using the template function to display all Tag tags on the website is an important operation that helps to improve content discoverability and website SEO.AnQiCMS as an efficient content management system provides an intuitive and flexible tag (Tag) management mechanism, allowing users to easily list these contents in website templates.

Learn about the Tag feature of AnQiCMS

In AnQiCMS, tags (Tag) can be considered as topics or keywords that connect different content.They do not follow the strict hierarchical structure of categories, but provide a more flexible way of classifying content, making it convenient for users to quickly find related articles or products based on their interests.In the background content management, whether it is articles, products, multiple tags can be added, these tags not only help users to search within the site, but also are an important basis for search engines to understand the relevance of website content.AnQiCMS provides a dedicated tag management interface, allowing users to view, add, edit, or delete tags, and these tags are not specific to any model or category. The same tag can be used to mark multiple types of content.

core: usingtagListDisplay all Tag tags

To list all the Tag tags in the AnQiCMS template, we mainly use a powerful template tag, that istagList. This tag is used to retrieve and display the tag list.

Generally speaking,tagListTags can be displayed based on the document ID of the current page to show tags related to that document. But if our goal is to display all tags on the website, not just the tags of a specific document, we need totagListSet a key parameter of the tag:itemId="0".

  • itemIdThe role of the parameter:When you setitemId="0"then,tagListThe tag will ignore the association with the specific document on the current page and instead query all existing Tag tags in the entire website database. This is the core setting to obtain the full site tag list.

exceptitemId="0"other than,tagListIt also provides some practical parameters to help us better control the display of tags:

  • limit(Display number)This parameter can limit how many tags you want to display. For example, if you want to display the top 10 tags in the sidebar, you can setlimit="10". It even supports offset mode, such aslimit="2,10"Will start displaying 10 labels from the second one.
  • letter(Index letter): If you want to filter tags in alphabetical order, for example, to display only tags that start with "A", you can setletter="A".
  • categoryId(Category ID): Although tags are usually not bound to categories, if you want to display only tags related to a specific or a few specific categories (for example, only display tags used in articles under the "News" category), you can usecategoryId="1"(If the category ID is 1) orcategoryId="1,2,3"(Multiple categories).
  • siteId(Site ID): For users running multiple sites, this parameter allows you to specify which site to retrieve tag data from. Generally, if you only operate one site, it is not necessary to set it.

tagListThe label data obtained will be returned in the form of a list (or array). Therefore, we need to use the template in theforLoop to traverse and display each tag. Each tag item will contain some available fields, such as:Id(Tag ID),Title(Tag Name),Link(Tag detail page link),Description(label description),FirstLetter(initial letters) et al.

Code examples and detailed explanation

Here is a simple template code example showing how to list all the Tag tags on the AnQiCMS template.

<div class="tag-cloud">
    <h3>热门标签</h3>
    <ul>
        {# 使用 tagList 标签获取所有标签，通过 itemId="0" 确保获取的是全站标签 #}
        {# limit="30" 可以限制显示的标签数量，这里设置为显示30个 #}
        {% tagList tags with itemId="0" limit="30" %}
            {% for item in tags %}
            <li>
                {# item.Link 是标签详情页的URL，item.Title 是标签的名称 #}
                <a href="{{item.Link}}" title="{{item.Title}}">
                    {{item.Title}}
                </a>
            </li>
            {% empty %}
            {# 如果没有任何标签，则显示此内容 #}
            <li>目前没有任何标签</li>
            {% endfor %}
        {% endtagList %}
    </ul>
</div>

Code analysis:

  1. <h3>热门标签</h3>This is a common HTML title used to mark the area of the tag list.
  2. {% tagList tags with itemId="0" limit="30" %}: This is the core part.
    • tagsWe will store the tag list namedtags.
    • itemId="0"：Indicate that the system should retrieve all tags instead of tags specific to a particular document.
    • limit="30"：We choose to display only the first 30 tags. You can adjust this number according to the page layout and requirements.
  3. {% for item in tags %}：TraversetagsEach variable label,itemrepresents the single label object being cycled through.
  4. <li><a href="{{item.Link}}" title="{{item.Title}}">{{item.Title}}</a></li>: For each label, we create a list item.<li>.
    • {{item.Link}}Output the detail page link of the current tag. Clicking it will take the user to a page containing all content of the tag.
    • {{item.Title}}：Output the current tag name, which is the text that we want the user to see.title="{{item.Title}}"It is to display the tag name when the mouse hovers over it, improving the user experience.
  5. {% empty %}This isforAn optional part of the loop, whentagsNo data is present in the list (i.e., the website has not set any tags) it will display<li>目前没有任何标签</li>.
  6. {% endfor %}and{% endtagList %}: respectively denoteforloop andtagListEnd of tag.

You can place this code in the website sidebar, footer, or any other location where you want to display all tags.

Display the Tag tag list on a dedicated page and support pagination.

AnQiCMS usually names the page template specifically used to display all tags astag/index.htmlIf you want to display all the Tag tags in a paginated form on this page, you can combinetagListoftype="page"Parameters andpaginationthe tag.

<div class="all-tags-page">
    <h1>所有网站标签</h1>
    <ul class="tag-list-paginated">
        {# 使用 tagList 标签获取所有标签并启用分页，这里每页显示20个标签 #}
        {% tagList tags with itemId="0" type="page" limit="20" %}
            {% for item in tags %}
            <li>
                <a href="{{item.Link}}">
                    <h5>{{item.Title}}</h5>
                    {% if item.Description %}
                        <p>{{item.Description}}</p>
                    {% endif %}
                </a>
            </li>
            {% empty %}
            <li>目前没有任何标签。</li>
            {% endfor %}
        {% endtagList %}
    </ul>

    {# 分页代码 #}
    <div class="pagination-controls">
        {% pagination pages with show="5" %}
            {# 显示首页链接 #}
            <a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
            {# 显示上一页链接 #}
            {% if pages.PrevPage %}
            <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
            {% endif %}
            {# 显示中间页码 #}
            {% for item in pages.Pages %}
            <a class="{% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
            {% endfor %}
            {# 显示下一页链接 #}
            {% if pages.NextPage %}
            <a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
            {% endif %}
            {# 显示尾页链接 #}
            <a class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
        {% endpagination %}
    </div>
</div>

This code will first usetagListTo get all the tags and prepare the pagination data, then usepaginationCreate pagination links for tags, convenient for users to browse all tag pages.

Summary

BytagListTags, AnQiCMS provides a flexible way to display all Tag tags on the website.It can be achieved by simple template code, whether it is to create a popular tag cloud or to build an independent page containing all tags.Make good use of tags, not only can it make the structure of the website content clearer, but also help users conveniently explore website information, and at the same time improve the performance of the website in search engines.

Frequently Asked Questions (FAQ)

  1. Question: How to only display Tag tags under a specific category in the tag list?Answer: If you want the tags listed to come only from certain categories within the website, you cantagListadd in thecategoryIdParameters. For example, to display all tags under categories with IDs 1 and 2, you can set it like this:{% tagList tags with itemId="0" categoryId="1,2" %}.

  2. Question: How to control the display quantity of Tag tags or paginate the tag list?Answer:tagListTags providedlimitParameters to control the display quantity, such aslimit="10"It will display 10 tags. If you need pagination, especially on specialized tag pages liketag/index.htmlyou can settagListlabel'stypethe parameter totype="page"and combiningpaginationTag to implement pagination navigation. For example:{% tagList tags with itemId="0" type="page" limit="20" %}Then match with{% pagination pages with show="5" %}...{% endpagination %}To generate pagination links.

  3. Ask: How is the detail page URL of the Tag label generated in AnQiCMS? Can I customize it?Answer: AnQiCMS will generate the detail page URL of the Tag label according to the pseudo-static rules set in the background. For example, the default format may be/tag/标签IDor/tag/标签别名. You can find the 'Static Rules' setting in the AnQiCMS backend function management and adjust the Tag as needed