In AnQiCMS, efficiently manage and display website tags can not only help users find interesting content faster, but also effectively improve the website's SEO performance.Tags as a flexible content classification method can associate content across 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 common tags on your website and how to show associated tags for specific documents.

The importance of tags.

In AnQiCMS, a tag is 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.For users, tags provide a convenient way to discover related content.For search engine optimization (SEO), the tab can create more topic-related pages, increase the internal links of the website, and help search engines better understand the structure of the website content.

一、Display the list of commonly used website tags (such as in the sidebar, footer, or tag aggregation page)

You may want to display popular or newly released tags on prominent locations 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 achieve this requirement.

1. Get commonly used tags on the entire site

If you want to display popular or latest tags throughout the entire site, you cantagListLabel and setitemId="0"to get.limitThis parameter is used 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 explanation:

  • {% 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 them in a namedtags.limit="20"It means that we only display 20 tags.itemId="0"This is the key here, it explicitly indicates that the system retrieves *all* available tags, not just those related to the current page.
  • {% for item in tags %}: This is a loop structure, it will iterate overtagsEvery label included in the variable.
  • {{ item.Link }}In the loop,itemThe variable represents the current label.item.LinkWill output the URL address corresponding to the label.
  • {{ item.Title }}:item.TitleThen output the name of the label.
  • {% empty %}IftagsNo tags in the list will be displayed{% 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）in it.

2. Integrate the tag list into the template

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

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

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

II. Display tags for specific documents (e.g., on 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 related to the same theme.

Similarly, we still usetagListlabels, but this time the usage is slightly different.

1. Get the labels of the current document

When you are on the details page of a document,tagListThe label will attempt to retrieve tags associated with the current document by default, no explicit specification is requireditemId. But for clarity of code and to avoid potential ambiguity, we can also explicitly pass the ID of the current document.itemIdParameter.

Suppose you are currently viewing a document, and the detailed data of the document is stored in a variable namedarchive(this is usually obtained after usingarchiveDetailtags), you can display the tags 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 explanation:

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