In website operation, article tags (Tag) not only help in categorizing and retrieving content, but also enhance the page SEO effect through the form of keywords. Often, we need to place them at specific positions on the page, such as<meta name="keywords">Tags are displayed at the bottom of the article, or in the article content, separated by commas.AnQiCMS (AnQiCMS) provides a concise and flexible template syntax, making this operation very direct.

Understand the source of the article tag data

In the AanQi CMS, the tag data of an article can be accessed viatagListLabel acquisition. This label is designed to be very flexible, when you use it on the article detail page, if omitteditemIdParameters, it will automatically identify and retrieve all tags associated with the current article. Each tag will be returned as an object, which includes information such asTitle(Title),Link(links) and so on.

How to connect tags into a string

Due totagListThe return is a list of tag objects, not a simple list of strings, and we cannot use it directlyjoinThe filter connects them. The most common and effective method is to combineforloop and conditional judgment, output the label title one by one and manually add separators.

The following is a detailed step-by-step guide and code example for implementing this feature:

  1. Get the tag list of the articleFirstly, we need to usetagListTags to get all tags of the current article. On the article detail page (for examplearchive/detail.htmlor a custom document detail template) can be directly called, it will automatically associate with the current displayed article.

    {% tagList articleTags %}
    {# articleTags 将包含当前文章的所有标签对象 #}
{% endtagList %}

    Here, we assign the obtained tag list toarticleTagsthis variable.

  2. Build a comma-separated string in the loopNext, we will traversearticleTagsList, get each tag ofTitleProperties, and add a comma and space after each label title, but avoid adding a comma after the last label. This can be done byforloop.lastProperties to determine.

    <div class="article-tags">
    <strong>关键词：</strong>
    {% tagList articleTags %}
        {% for tag in articleTags %}
            {{ tag.Title }}
            {% if not forloop.last %}, {% endif %}
        {% endfor %}
    {% else %}
        <span>暂无标签</span>
    {% endtagList %}
</div>
    • {% for tag in articleTags %}: to start traversingarticleTagsList, assign each tag object to.taga variable.
    • {{ tag.Title }}: Output the current tag's title.
    • {% if not forloop.last %}, {% endif %}: This is a critical condition judgment.forloop.lastReturns when the current iteration is the last element in the loop.true.if not forloop.lastmeans 'If this is not the last element', we output a comma and a space.,.
    • {% else %} <span>暂无标签</span> {% endtagList %}: If the article has no tags, a default prompt can be displayed to enhance user experience.

Complete example code

Assuming you want to display these tags below the article content on the article detail page:

<article class="article-detail">
    <h1>{{ archive.Title }}</h1>
    <div class="article-meta">
        发布日期: {{ stampToDate(archive.CreatedTime, "2006-01-02") }} | 浏览量: {{ archive.Views }}
    </div>

    <div class="article-content">
        {{ archive.Content|safe }}
    </div>

    <div class="article-keywords">
        <strong>关键词：</strong>
        {% tagList articleTags %}
            {% for tag in articleTags %}
                <a href="{{ tag.Link }}" title="{{ tag.Title }}">{{ tag.Title }}</a>{% if not forloop.last %}, {% endif %}
            {% endfor %}
        {% else %}
            <span>暂无标签</span>
        {% endtagList %}
    </div>
</article>

In this example, each tag is wrapped in an anchor text with a link, which, when clicked, jumps to the aggregation page of the tag. This is very beneficial for SEO and user navigation.

Use the label string for<meta name="keywords">

If you need to use these labels on the page,meta keywordsyou can usesetThe label title is collected first, and then concatenated. Because AnQiCMS's template engine does not directly support dynamically building a list within a loop and usingjoinFilter, the safest approach is to prepare this string on the backend, or to process it through JavaScript on the frontend (but this is not a template-level solution).

However, considering the modern SEO practices,meta keywordsThe weight has already been very low, even ignored by most search engines. A more common and recommended practice is to display the tags as visible content on the page and ensure they have good accessibility and internal links.If it is necessary to construct in the template, it may be necessary to consider more advanced features of the template engine or background data processing.

Summary

PasstagListTag combinationforloop andforloop.lastCondition judgment, you can flexibly connect multiple tags of articles in AnQiCMS template into a comma-separated string and choose whether to convert them into clickable links as needed.This method not only meets the needs of content display, but also provides basic support for the website's SEO optimization.

Common Questions (FAQ)

  1. Q: Can I make the output tags directly clickable links instead of plain text comma-separated strings?答：完全可以。在上面的示例代码中，我们已经展示了如何通过在{{ tag.Title }}外面包裹<a>tags and use{{ tag.Link }}As a link address, making each tag clickable. This is not only beautiful, but also improves the user experience and the SEO effect of internal links on the website.

  2. 问：If an article has no tags, what will be displayed on the page?答：In the provided sample code, we used{% else %}sentence. IftagListno tags are retrieved, thenforThe content inside the loop will not be executed, but will execute instead{% else %}The content that follows, which is displayed<span>暂无标签</span>. You can modify this prompt text according to your needs or choose not to display any content.

  3. 问：How to display tags for each article on the article list page instead of only on the detail page?答：On the article list page, you usually usearchiveListtags to cycle through multiple articles.archiveListThe loop (for item in archives) internally, you can nest againtagListtags, and throughitemId=item.IdParameters can explicitly specify the tag to be retrieved for the current loop article. As a result, the tags of each article will be displayed correctly. For example:

    {% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <div class="article-item">
            <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
            <div class="article-tags">
                {% tagList currentArticleTags with itemId=item.Id %}
                    {% for tag in currentArticleTags %}
                        <a href="{{ tag.Link }}">{{ tag.Title }}</a>{% if not forloop.last %}, {% endif %}
                    {% endfor %}
                {% endtagList %}
            </div>
        </div>
    {% endfor %}
{% endarchiveList %}