In AnQi CMS, using the template feature to display all Tag tags on the website is an important operation that helps 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.

Understand the Tag feature of AnQiCMS

In AnQiCMS, tags (Tag) can be seen as topics or keywords that connect different content.They do not follow a strict hierarchical structure like categories, but provide a more flexible way to classify content, making it convenient for users to quickly find relevant articles or products based on their interests.In the background content management, whether it's articles or products, multiple tags can be added. These tags not only help users perform in-site searches but are also 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 particular model or category; the same tag can be used to mark multiple types of content.

Core: UsingtagListDisplay all Tag tags

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

In most cases,tagListTags can be displayed based on the document ID of the current page and show tags related to that document. However, if our goal is to display all tags on the website rather than just the tags of a specific document,tagListA key parameter for setting the label:itemId="0".

  • itemIdThe function of the parameter: When you setitemId="0"whentagListThe tag will ignore the specific document association of the current page and instead query all existing Tag tags in the entire website database. This is the core setting for obtaining the full site tag list.

ExceptitemId="0"in addition to,tagListIt also provides some practical parameters to help us better control the display method of tags:

  • limit(Number of displayed items)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 from the second label.
  • letter(Index letters): If you want to filter labels in alphabetical order, for example, to display only labels starting 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, to 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 from which site to obtain tag data. Generally, if you only operate one site, there is no need to set it.

tagListThe label data obtained by the label will be returned in the form of a list (or an array). Therefore, we need to use the template in theforLoop to iterate and display each label. Each label item will contain some available fields, such as:Id(Label ID),Title(Label Name),Link(Label detail page link),Description(Tag description),FirstLetterTags starting with the first letter, etc.

Code examples with detailed explanations

This is a simple template code example showing how to list all Tag tags in AnQiCMS templates:

<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 list area of this tag.
  2. {% tagList tags with itemId="0" limit="30" %}This is the core part.
    • tagsWe will store the tag list obtained in a file namedtags.
    • itemId="0": Indicates that the system retrieves all tags, rather than tags specific to a particular document.
    • limit="30": We choose to display only the first 30 tags. You can adjust this number based on the page layout and requirements.
  3. {% for item in tags %}: Iterate overtagsEach label in the variable,itemrepresents the single label object being cycled to.
  4. <li><a href="{{item.Link}}" title="{{item.Title}}">{{item.Title}}</a></li>For each label,<li>.
    • {{item.Link}}Output the detail page link of the current tag. Clicking it will direct the user to the page containing all content with the tag.
    • {{item.Title}}Output the current label name, which is the text that we want the user to see.title="{{item.Title}}"It is to display the label name when the mouse hovers over it, enhancing the user experience.
  5. {% empty %}：This isforAn optional part of the loop, whentagsThere is no data in the list (i.e., the website has not set any tags) and<li>目前没有任何标签</li>.
  6. {% endfor %}and{% endtagList %}: respectively markforloop andtagListThe end of the tag.

You can place this code in the website sidebar, footer, or any 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 dedicated to displaying all tags astag/index.htmlIf you want to display all Tag tags in a paginated form on this page, you can combinetagListoftype="page"parameters withpaginationtags to achieve this.

<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 usetagListRetrieve all tags and prepare pagination data, thenpaginationGenerate pagination links for tags, for easy browsing of all tag pages.

Summary

PasstagListTags, AnQiCMS provides a flexible way to display all Tag tags on the website.Whether it's creating a popular tag cloud or building a standalone page with all tags, it can be achieved through simple template code.Using labels reasonably not only makes the structure of the website content clearer, but also helps users explore the website information more conveniently, while also improving the website's performance in search engines.

Common Questions (FAQ)

  1. Question: How to display Tag tags only under specific categories in the tag list?Answer: If you want the tags listed to only come from the content of a specific category or a few specific categories on the website, you cantagListadd tags to itcategoryIdParameters. For example, to display all tags under the 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 providelimitParameter to control the display quantity, for example,limit="10"it will display 10 tags. If you need to display in pages, especially ontag/index.htmlsuch dedicated tag pages, you can settagListTagstypeparameter settingstype="page"and combine.paginationTag for 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. Question: How is the detail page URL of the Tag label in AnQiCMS generated? Can I customize it?Answer: AnQiCMS will generate the detail page URL of Tag tags according to the pseudo-static rules set in the background. For example, the default form may be/tag/标签IDor/tag/标签别名You can find the 'URL Rewrite Rule' setting in the Function Management of AnQiCMS backend and adjust the Tag as needed