How to display all related Tag tags on the article detail page?

As a professional deeply familiar with the operation of Anqi CMS, I know that every detail of content creation and presentation is related to user experience and the SEO performance of the website.Properly displaying associated Tag tags on the article detail page not only helps readers quickly understand the core of the article and discover more related content, but also has a positive effect on search engine optimization.Below, I will elaborate on how to implement this feature on the article detail page of Anqi CMS.

AnQi CMS Tag tag feature overview

The AnQi CMS provides powerful Tag label features, allowing content creators to add multiple tags to articles, products, and other content.These tags are similar to thematic keywords, which can associate related content across categories and models, providing users with more flexible navigation and content discovery paths.When editing articles in the background, we can manually enter or select existing tags to associate them with the article.This feature has been enhanced since version 2.1.0 of AnQiCMS, making content management and association more convenient.

Locate the article detail page template

To modify the display content of the article detail page, we first need to find the corresponding template file. According to the template design conventions of AnQi CMS, the template for the article detail page is usually located in the model subdirectory under the template directory, for example{模型table}/detail.htmlor{模型table}_detail.html. This is typically for the article modelarticle/detail.htmlorarticle_detail.html. If you have set a custom template for a specific article or category, you need to modify the corresponding custom template file.

UsetagListTemplate tag retrieves article associated tags

In the AnQiCMS template system, we use specific template tags to retrieve and display data. To display all associated Tag tags on the article detail page, we need to usetagListThe tag. This tag is used to retrieve the list of tags of the document.

tagListThe usage of the tag is relatively intuitive, it has a key parameteritemId. In the context of the article detail page,itemIdIf the parameter is not explicitly specified, it will default to reading the current document's ID, thereby automatically obtaining the tags associated with the current article.This makes it very convenient to call tags on the article detail page.

Call in templatetagListThe basic structure is as follows:

{% tagList tags %}
    {% for item in tags %}
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    {% endfor %}
{% endtagList %}

In this code block:

• {% tagList tags %}: Declare a variable namedtagsto store all related tags of the current article.
• {% for item in tags %}: Loop through.tagsEach label in the array.
• {{ item.Link }}: Output the link address of the current tag.
• {{ item.Title }}Display the current tag name.

If you need to limit the number of tags displayed, you can uselimitparameters, for example{% tagList tags with limit="10" %}Only the first 10 tags will be displayed.

Integrate tags into the article detail page

Now, we will integrate the abovetagListtag code snippet into the template of the article detail page. Assuming we have already integrated it through the template.archiveDetailThe tag has retrieved other detailed information about the article, and we can choose a suitable position (such as below the article title, above the content, or at the bottom of the article) to display these tags.

The following is an example of an integration:

<article>
    <h1>{% archiveDetail with name="Title" %}</h1>

    <div class="article-meta">
        <!-- 其他文章元信息，如分类、发布时间、浏览量等 -->
        <a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a>
        <span>发布于：{% archiveDetail with name="CreatedTime" format="2006-01-02" %}</span>
        <span>阅读量：{% archiveDetail with name="Views" %}</span>
    </div>

    <div class="article-tags">
        <strong>标签：</strong>
        {% tagList tags %}
            {% for item in tags %}
                <a href="{{ item.Link }}" class="tag-link">{{ item.Title }}</a>
            {% endfor %}
        {% else %}
            <!-- 如果文章没有标签，可以显示一个提示 -->
            <span>暂无标签</span>
        {% endtagList %}
    </div>

    <div class="article-content">
        {%- archiveDetail articleContent with name="Content" %}
        {{ articleContent|safe }}
    </div>

    <!-- 其他详情内容，如上一篇、下一篇、相关文章等 -->
</article>

In this example, we willtagListplace the code in adivInside the container, and added the text prompt 'Label:'. For the aesthetic and readability of the page, you can use the CSS style of the website totag-linkAdd the corresponding styles, such as background color, border, padding, etc., to make the label stand out prominently.

By following these steps, the article detail page can dynamically display all associated Tag tags, greatly enriching the link depth of the article content, and also providing users with a diverse way to explore content.

Frequently Asked Questions (FAQ)

1. Why did I add a tag in the article detail page and there are no tags displayed on the page?tagList标签后，页面上却没有任何标签显示？

First, make sure that the template file you are editing is the actual template used for the current article detail page.You can check the "Document Template" field in the article editing interface on the backend to confirm if a custom template is used.Next, check if the article has really been added with the Tag tag.On the article editing page, find the "Tag label" section, make sure you have associated at least one tag with the article.If the article does indeed have tags but still does not display, please check the template code in thetagListandforDoes the loop syntax completely correct, including variable names, label names, etc.Finally, clear the system cache of AnQiCMS and try clearing the browser cache and refreshing the page.

2. How can I limit each article detail page to display a maximum of 5 Tag tags?

You can do this bytagListthe tag withlimitThe parameter is used to limit the number of displays. For example, if you want to display only the first 5 tags, you can modify the code as follows:

{% tagList tags with limit="5" %}
    {% for item in tags %}
        <a href="{{ item.Link }}" class="tag-link">{{ item.Title }}</a>
    {% endfor %}
{% else %}
    <span>暂无标签</span>
{% endtagList %}

This, even if the article is associated with 10 tags, the page will only display the first 5 associated tags.

3. What is the difference between Tag labels and article categories in AnQiCMS? How should I choose to use them?

In AnQiCMS, Tag tags and article categories are used to organize content, but they have different purposes and usages.

• Article Category (Category): Typically represents the hierarchical structure of content with clear hierarchical relationships.An article generally belongs to only one main category, the category structure helps users understand the overall content architecture of the website, and allows for content filtering from large to small.Categories are often used in SEO to build clear URL structures and website hierarchies.
• Tag label (Tag)It focuses more on describing the keywords or themes of the article, which are usually without hierarchical relationships, and an article can be associated with multiple unrelated tags.Tags are more like a 'non-structured' keyword association, which is convenient for users to quickly find related content through a specific topic, even if these contents may belong to different categories.In SEO, tags can enrich the keyword density of a page and create more internal links, enhancing relevance.

When choosing to use, consider the organization logic of the content: if the content has an obvious hierarchy and belonging relationship, it is more appropriate to use classification; if the content can be described from multiple dimensions and these dimensions are not suitable for constructing a hierarchy, then Tag labels will be a better choice, which can act as a supplement to classification and provide more granular content association.