As a professional well-versed in the operation of security CMS, I know that every detail of content creation and display is crucial to user experience and the SEO performance of the website.In the article detail page, appropriately displaying related Tag tags can not only help readers quickly understand the core of the article and find 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 the Anqi CMS.

AnQiCMS Tag tag function overview

The CMS provides powerful Tag function, allowing content creators to add multiple tags to articles, products, and other content.These tags are similar to thematic keywords and 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 establish a connection with the article.This feature has been enhanced since AnQiCMS v2.1.0, making content management and association more convenient.

Locate 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. For the article model, this is usuallyarticle/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 associated tags of the article

In AnQiCMS template system, we use specific template tags to retrieve and display data. To display all related Tag tags on the article detail page, we need to usetagListLabel. This label is specifically used to get the Tag list of the document.

tagListThe usage of the label is relatively intuitive, with a key parameter.itemIdIn the context of the article detail page,.itemIdParameters that are not explicitly specified 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.

Called in the template.tagListThe 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 associated 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 }}：Output the display name of the current tag.

If you need to limit the number of tags displayed, you can uselimitparameters, such as{% tagList tags with limit="10" %}It will only display up to 10 tags.

Integrate tags into the article detail page

Now, we will integrate thetagListtag code snippet into the article detail page template. Assuming we have already integrated througharchiveDetailThe label has obtained other detailed information of the article, 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.

An example of a typical integration is as follows:

<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 adivContainer inside, and added the text prompt "Label: ". For the aesthetics and readability of the page, you can customize the CSS style of the website.tag-linkAdd the corresponding styles, such as background color, border, padding, etc., to make the label stand out prominently.

Through these steps, the article detail page can dynamically display all related Tag tags, greatly enriching the link depth of the article content, and also providing users with diverse ways to explore content.

Common Questions and Answers (FAQ)

1. Why is there no tag display on the page after I added a tag in the article detail page?tagList标签后，页面上却没有任何标签显示？

First, make sure that the template file you are editing is the one currently in use for the actual article detail page.You can view the "Document Template" field in the background article editing interface to confirm if a custom template is used.Next, check whether the article has been tagged with the Tag tag.In the article editing page, find the "Tag tags" section, ensure that you have associated at least one tag with the article.tagListandforIs the loop syntax completely correct, including the case of variable names and label names.Finally, clear the system cache of AnQiCMS, and then try to clear the browser cache and refresh the page.

2. I want to limit each article detail page to display a maximum of 5 Tag tags, how should I do it?

You can do this by intagListtag.limitParameter 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 %}

So, even if the article is associated with 10 tags, only the first 5 associated tags will be displayed on the page.

3. In AnQiCMS, what is the difference between Tag tags and article categories? How should I choose between using them?

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

  • Article Category (Category)English typically represents the hierarchical structure of content, with clear hierarchical relationships.An article generally belongs to only one main category, and the category structure helps users understand the overall content architecture of the website and perform content filtering from large to small.Categories are often used in SEO to build clear URL structures and website hierarchies.
  • Tag label (Tag)：Then it is more focused 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, convenient for users to quickly find related content through specific themes, even though this content may belong to different categories.In SEO, tags can enrich the keyword density of the page and create more internal links, enhancing relevance.

When selecting, consider the organizational logic of the content: if the content has clear hierarchy and belonging relationships, using categories is more appropriate; if the content can be described from multiple dimensions and these dimensions are not suitable for constructing a hierarchy, then Tag tags will be a better choice, which can act as a supplement to categories and provide more granular content association.