How to display a list of commonly used tags on a website or tags of specific documents?

In AnQiCMS, efficiently manage and display website tags, which can not only help users find the content they are interested in faster, but also effectively improve the website's SEO performance.Tags as a flexible content classification method can associate content spanning different categories and even different models, forming a content matrix.Below, we will start from several common application scenarios and explain in detail how to display the list of commonly used tags on your website, as well as how to display the associated tags for specific documents.

The importance of tags

In AnQiCMS, tags are a powerful content management tool.They allow you to attach keywords to articles, products, or other content types, which can be independent of the traditional classification structure.Tags provide a convenient way for users to discover related content.For search engine optimization (SEO), tabs can create more themed pages, increase the internal links of the website, and help search engines better understand the structure of the website content.

One, display the list of commonly used website tags (such as in the sidebar, footer, or tag aggregation page)

You may wish to display popular or recently published tags on a prominent location of the website, such as the sidebar, footer, or a dedicated 'tag cloud' page.This helps users quickly browse the core content themes of the website.

In AnQiCMS, you can usetagListtags to easily meet this need.

1. Get the site-wide common tags

If you want to display the most popular or latest tags across the entire site, you can usetagListtags and setitemId="0"Get it.limitparameter to control the number of tags displayed.

<div class="tag-cloud">
    <h3>热门标签</h3>
    <ul>
        {% tagList tags with limit="20" itemId="0" %}
            {% for item in tags %}
                <li><a href="{{ item.Link }}" title="{{ item.Title }}">{{ item.Title }}</a></li>
            {% empty %}
                <li>暂无标签可显示。</li>
            {% endfor %}
        {% endtagList %}
    </ul>
</div>

Code description:

• {% tagList tags with limit="20" itemId="0" %}This line of code tells the system that we want to get a list of tags and store it in a namedtags.limit="20"This indicates that we only display 20 tags.itemId="0"It is the key here, it explicitly indicates that the system should retrieve *all* available tags, not just those related to the current page.
• {% for item in tags %}: This is a loop structure, it will traversetagsEach tag contained in the variable.
• {{ item.Link }}: In the loop,itemThe variable represents the current tag.item.LinkIt will output the URL address corresponding to the tag.
• {{ item.Title }}:item.TitleThen it will output the name of the tag.
• {% empty %}If:tagsIf there are no tags in the list, it will display.{% empty %}and<li>暂无标签可显示。</li>The content between.
• </div>The tag wraps the entire tag list, you can place it anywhere on the page according to your website design, such as the public sidebar template file (partial/sidebar.html) or the footer (partial/footer.html).

2. Integrate the tag list into the template

To maintain the modularity and reusability of the code, it is recommended to save the above tag list code snippet as a separate template file, for examplepartial/common_tags.htmlThen, in your main template file (such asindex.htmlorbase.html) or any place where you need to display common tags, useincludeLabel it to introduce:

{# 在您的主模板文件（例如 index.html 或 base.html）中 #}
<div class="main-content">
    {# ... 您的主要内容 ... #}
    <aside class="sidebar">
        {% include "partial/common_tags.html" %}
    </aside>
</div>

This way, you can easily update or adjust the display of the tag list without modifying the main template structure.

II. Display tags of specific documents (such as in the article detail page)

On the article or product detail page, displaying tags directly related to the current document is an important way to enhance user experience and content relevance.Users can click on these tags to explore more content on the same topic.

Similarly, we still usetagListtags, but this time the usage is a bit different.

1. Get the current document tag

When you are on the detail page of a document,tagListThe tag will try to retrieve the tags associated with the current document, no explicit specification is requireditemIdBut in order to clarify the code and avoid potential ambiguity, we can also explicitly pass the ID of the current document toitemIdParameter.

Assuming you are currently viewing a document and the details of the document are stored in a variable namedarchive(which is usually obtained after usingarchiveDetailtag), you can display the label as follows:

<div class="article-tags">
    <strong>标签：</strong>
    {% tagList tags with itemId=archive.Id limit="10" %}
        {% for item in tags %}
            <a href="{{ item.Link }}" class="tag-link">{{ item.Title }}</a>
        {% empty %}
            <span>该文档暂无标签。</span>
        {% endfor %}
    {% endtagList %}
</div>

Code description:

• {% tagList tags with itemId=archive.Id limit="10" %}: Here,