How to display a list of all used tags (Tags) in the website?

In website operation, tags are an important tool for content organization and user discovery.A clear and complete list of tags can not only help users quickly find the content they are interested in, but also improve the website's SEO performance and guide search engines to better understand the structure of the website content.AnQi CMS provides powerful and flexible tag management and display functions, allowing you to easily display the list of all tags used on the website.

Display method of the site-wide tags list

If you want to set up a special page on the website to display all the tags used, a "tag cloud" or "tag index" page is usually created. In Anqi CMS, this can be done through template tagstagListcooperate with pagination tagspaginationto achieve.

First, you can go to the custom template directory (for example,templatein the foldertag/index.htmlor in the page template you customized), and usetagListLabel to get all tag data. To implement pagination, we willtagListto specifytype="page", and set the number of tags displayed per page (limit)

For example, the following code snippet shows how to retrieve and display all tags and provides pagination functionality:

<div class="tag-list-container">
    {% tagList tags with type="page" limit="50" %} {# 获取所有标签，每页显示50个 #}
        {% if tags %}
            <ul class="tag-cloud">
                {% for item in tags %}
                    <li><a href="{{ item.Link }}" title="{{ item.Title }}">{{ item.Title }}</a></li>
                {% endfor %}
            </ul>
        {% else %}
            <p>目前网站还没有任何标签。</p>
        {% endif %}
    {% endtagList %}

    {# 接着，使用分页标签来展示分页导航 #}
    {% pagination pages with show="5" %} {# 显示5个页码按钮 #}
        <nav class="pagination-nav">
            {% if pages.PrevPage %}
                <a href="{{ pages.PrevPage.Link }}" class="prev">上一页</a>
            {% endif %}
            {% for p in pages.Pages %}
                <a class="{% if p.IsCurrent %}active{% endif %}" href="{{ p.Link }}">{{ p.Name }}</a>
            {% endfor %}
            {% if pages.NextPage %}
                <a href="{{ pages.NextPage.Link }}" class="next">下一页</a>
            {% endif %}
        </nav>
    {% endpagination %}
</div>

In this code block:

• {% tagList tags with type="page" limit="50" %}Will retrieve all tags from the database and organize them in a paginated manner.tagsIs the variable name you define for the tag list,type="page"Specified to enable pagination mode,limit="50"It controlled the number of tags displayed per page.
• {% for item in tags %}Loop through each tag obtained.
• {{ item.Link }}It will output the URL address of the label,{{ item.Title }}It displays the name of the tag.
• {% pagination pages with show="5" %}Tags are used to generate pagination navigation.pagesIs the variable name you define for pagination data,show="5"indicating that up to 5 page number buttons are displayed. By judgingpages.PrevPage/pages.NextPageand traversingpages.PagesYou can build a complete "Previous page", "Next page", and numeric page number navigation.

Through such settings, your website can have a rich and easy-to-navigate full-site tag list page.

Show related tags on the individual document page.

In addition to the site-wide tag list, you may also want to display related tags at the bottom or side of each document (article, product, etc.) on the details page. This can also be done bytagListTag implementation, but needs to be配合itemIdthe parameter.

In the template of the document detail page (for examplearchive/detail.html) assuming the current document ID can be obtained througharchive.IdYou can display related tags like this:

<div class="document-tags">
    <h3>本文标签：</h3>
    {% tagList docTags with itemId=archive.Id %} {# 获取与当前文档（archive.Id）相关联的标签 #}
        {% if docTags %}
            <ul>
                {% for tag in docTags %}
                    <li><a href="{{ tag.Link }}" title="查看更多关于{{ tag.Title }}的内容">{{ tag.Title }}</a></li>
                {% endfor %}
            </ul>
        {% else %}
            <p>该文档暂无标签。</p>
        {% endif %}
    {% endtagList %}
</div>

here,itemId=archive.IdIt is crucial, it tellstagListTags only return tags associated with the current document ID.docTagsIt is the variable name you define for the tag list of this specific document.

Flexible use to enhance user experience

Whether it is a full-site tag list or document-related tags, the tag function of Anqi CMS provides high flexibility.You can customize the CSS styles for these tags according to the design style of the website, such as displaying them in different font sizes (simulating a tag cloud), different colored backgrounds, or adding spacing between them, etc., to enhance the visual effects and user experience.

Reasonably display and utilize tags, which can not only help users conveniently explore the website content, form a good internal circulation, but also help search engines better capture and understand the thematic relevance of the website, thereby improving the overall SEO effect of the website.

Frequently Asked Questions (FAQ)

How can I make the site tag list display in alphabetical order?

By default,tagListTags are sorted according to the creation or update time of the tags in the background. If you need to sort them in alphabetical order (or by the first letter of the pinyin), the front-end of Anqi CMS is currentlytagListThe tag does not provide a direct sorting parameter. You can consider two methods: one is to follow a certain order when naming and managing tags in the background management interface;The second is to get the tag list through JavaScript on the front end, and then use JavaScript's sorting function to implement custom sorting display.

2. Can you only display tags under specific categories instead of all site tags?

Can.tagListTags provide acategoryIdThe parameter is used to specify which tags associated with documents under a certain or several specific categories should be displayed. For example,{% tagList tags with categoryId="1,2" %}It will display the tags used by documents with category IDs 1 and 2.

How to limit the display quantity of tag lists, for example, to only show the top 10 most popular tags?

tagListlabel'slimitParameters can help you control the display quantity. For example,{% tagList tags with limit="10" %}Only the first 10 tags will be displayed. It should be noted that,tagListIt does not have a built-in "hot" sorting parameter, it usually takes the top N by default sorting (such as creation time).If you need to sort by 'popular' (such as frequent usage), you may need to customize the data retrieval logic on the backend or implement it through more advanced template variable processing.