AnQi CMS is an efficient and flexible content management system that provides content operators with rich features. Among them, 'tags' play a crucial role as an important means of content classification and association, contributing significantly to the structuring of website content, optimizing user experience, and SEO.As an experienced website operation expert, I know how to maximize the value of content with these tools.Today, let's talk about how to accurately display all the Tag tags associated with a document in AnQiCMS templates.

The importance of tags and the AnQiCMS tag management mechanism

Before diving into template operations, let's first review the value of tags (Tag).Tags are not just a 'small identifier' for content; they are more like keywords for the content, helping users quickly find related information, enhancing cross-references within the site's content, which is crucial for user engagement and search engine optimization (SEO).By tags, we can link content scattered across different categories or even different models, based on common themes or keywords, forming a network of content, which greatly enriches the depth and breadth of users' browsing.

AnQiCMS is well-versed in this field, providing an intuitive and powerful tag management feature.In the background, when you edit or publish a document, you can directly select existing tags in the 'Tag label' field, or quickly create a new tag by entering it and pressing the Enter key.The system will automatically associate these tags with the current document.In addition, AnQiCMS also provides an independent "Document Tag" management page, allowing you to uniformly view, edit, and manage the tags of the entire site, ensuring the standardization and consistency of the tag system.

The core of displaying tags in the template:tagListtags

To display all tags associated with a document in the AnQiCMS template, we mainly rely on a powerful template tag -tagListThis tag is designed to retrieve and display a list of tags, and it can intelligently identify the current page context. It can also specify the set of tags to be retrieved through parameters.

The template syntax of AnQiCMS is similar to Django template engine, variables are enclosed in double curly braces{{变量}}while logical controls are enclosed in single curly braces and percentage signs{% 逻辑 %}Understand this is crucial for writing template code.

Implementation steps for displaying tags on the document detail page.

Assume you are visiting an article or product detail page and you want to display all related tags at the bottom of the current document.

  1. 定位template file:usually, the template file for the detail page of the document (article or product) is located in the current theme directory.{模型table}/detail.html[for example]article/detail.htmlorproduct/detail.html）。If you specify a custom template for a specific document, you need to edit the corresponding template file.

  2. UsetagListGet tags to get the tag list:)In the document details page,tagListThe tag has a very convenient feature: when you do not specifyitemIdWhen the parameter is set, it automatically identifies the document ID of the current page and retrieves all tags associated with the document. This greatly simplifies the operation.

    Therefore, you can insert the following code at an appropriate location in the template (for example, below the document content, in the sidebar, etc.)

    <div class="document-tags">
    <strong>相关标签：</strong>
    {% tagList tags %}
        {% for item in tags %}
            <a href="{{ item.Link }}" class="tag-item">{{ item.Title }}</a>
        {% endfor %}
    {% endtagList %}
</div>

    Let's decode this piece of code:

    • {% tagList tags %}：This istagListThe start tag of the label. We assign the label list we get to a variable namedtags." Because we did not specifyitemIdthe parameter, the system will default to finding the tags associated with the current document.
    • {% for item in tags %}This is a colonforloop used for iteratingtagsthrough each label in the variable. Inside the loop, the data of each label is accessed throughitemthe variable.
    • <a href="{{ item.Link }}" class="tag-item">{{ item.Title }}</a>This is the display format of each label.
      • {{ item.Link }}【en】：Will output the link address of the tag. Clicking on it will usually navigate to the document list page under the tag.
      • {{ item.Title }}【en】：Will output the name of the tag.
      • class="tag-item"Here we add a CSS class name to make it easier for you to beautify the tag style through CSS later, making it more consistent with the overall design of the website.
    • {% endfor %}:forThe end marker of the loop.
    • {% endtagList %}:tagListThe end mark of a tag.

  3. Stylized tag (optional but recommended):To make the tag look beautiful on the page, you can add the corresponding styles in the website's CSS file, for example:

    .document-tags {
    margin-top: 20px;
    padding: 15px;
    background-color: #f8f8f8;
    border-radius: 5px;
}
.document-tags strong {
    font-weight: bold;
    margin-right: 10px;
    color: #333;
}
.tag-item {
    display: inline-block;
    padding: 5px 10px;
    margin-right: 8px;
    margin-bottom: 8px;
    background-color: #e0e0e0;
    color: #555;
    text-decoration: none;
    border-radius: 3px;
    font-size: 14px;
    transition: background-color 0.3s ease;
}
.tag-item:hover {
    background-color: #007bff;
    color: #fff;
}

Advanced Techniques: More Flexible Label Display

AlthoughtagListThe default behavior is already very intelligent, but in some specific scenarios, you may need more fine-grained control:

  • Display labels for specified documents:If you want to use tags for a non-document detail page, or need to display a specific document (instead of the current document), you can useitemIdParameters. For example, to display all tags of the document with ID 123:

    {% tagList specificTags with itemId="123" %}
    {% for item in specificTags %}
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    {% endfor %}
{% endtagList %}

  • Limit the number of tags displayed:If a document is associated with a very large number of tags, you may only want to display a subset of them.limitParameters can help you control the number of tags displayed, for example, showing only the first 5 tags:

    {% tagList topTags with limit="5" %}
    {% for item in topTags %}
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    {% endfor %}
{% endtagList %}

  • Handling cases without tags:If a document is not associated with any tags, by default:forThe loop will not output any content inside. To provide a better user experience, you can useforLoopingemptya clause to display a prompt message:

    {% tagList tags %}
    {% for item in tags %}
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    {% empty %}
        <span>暂无相关标签。</span>
    {% endfor %}
{% endtagList %}

Through this method, you can easily and flexibly display the tags associated with any document in AnQiCMS templates, thus effectively improving the organization of website content and user experience.

Common Questions (FAQ)

  1. Q: What will be displayed on the page if the document is not associated with any tags?A: If the document is not associated with any tags,{% tagList tags %}the tag inforThe loop will not output any content. For a better user experience, you can{% for %}use{% empty %}a clause to display a prompt text, such as “No related tags available.”

  2. Q:tagListIs the order of the tags obtained fixed? Can I control their sorting?A:tagListLabels are not provided with direct sorting parameters by default.It usually returns according to the creation or association order of the tags.If you have specific requirements for the display order of tags, you may need to adjust it in the tag management on the backend, or customize the sorting after obtaining tag data through JavaScript on the frontend.

  3. Q: Where will I be redirected after clicking the tag? How is this link generated?A: When you use it in a template{{ item.Link }}AnQiCMS will automatically generate the URL corresponding to the tag. Clicking on it will usually navigate the user to the