How to connect multiple tags (Tag) in AnQiCMS template into a comma-separated keyword string?

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

Understand the source of article tag data

In Anqi CMS, the tag data of an article can be accessed throughtagListLabel acquisition. This label is designed to be very flexible, when you use it on the article detail page, if omitteditemIdParameter, it will automatically recognize and obtain all tags associated with the current article. Each tag will be returned as an object, which contains the tag'sTitle(Title),Link(link) and other information.

How to concatenate tags into a string

due totagListIt returns a list of tag objects, not a simple string list, and we cannot use it directlyjoinThe filter connects them together. The most common and effective method is to combineforLoop and conditional judgment, output each label title one by one and manually add separators.

Here are the specific steps and code examples to implement this function:

1. Get the tag list of the articleFirst, 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 called directly, which will automatically associate with the currently displayed article.

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

   Here, we assign the obtained tag list toarticleTagsthis variable.

2. Build a comma-separated string in a loopNext, we will traversearticleTagsList, take out each label'sTitleProperty, and add a comma and space after each label title, but avoid adding a comma after the last label. This can be done byforloop.lastProperty 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 %}: Start traversingarticleTagsList, assign each label object totagVariable.
   • {{ tag.Title }}: Output the title of the current label.
   • {% if not forloop.last %}, {% endif %}: This is a critical condition judgment.forloop.lastReturns when the current iteration is the last element in the looptrueThus,if not forloop.lastMeaning "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

Assume 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 can jump to the aggregation page of the tag, which 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 usesetLabel the title of the label first, then concatenate it. Because the AnQiCMS template engine does not directly support dynamically building a list within a loop and usingjoinFilter, the most reliable method is to prepare this string on the backend or to process it through JavaScript on the frontend (but this is not a solution at the template level).

However, considering modern SEO practices,meta keywordsThe weight has already dropped very low, even ignored by most search engines, and the more common and recommended practice is to display the label as visible content on the page, ensuring good accessibility and internal links.If persistence is needed to build in the template, you may need to consider more advanced features of the template engine or background data processing.

Summary

BytagListLabel combinationforloop andforloop.lastCondition judgment, you can flexibly connect multiple tags of an article into a comma-separated string in the AnQiCMS template and choose whether to convert it into a clickable link according to your needs.This method can meet the needs of content display and also provides basic support for the website's SEO optimization.

Frequently Asked Questions (FAQ)

1. Question: Can I make the output tags clickable links, rather than just comma-separated plain text strings?Answer: Absolutely. In the above example code, we have shown how to wrap in{{ tag.Title }}outside<a>tags and use{{ tag.Link }}As a link address, it makes each tag clickable. This is not only beautiful but also improves user experience and the SEO effect of internal links on the website.

2. Ask: What will the page display if the article has no tags?Answer: In the provided sample code, we used{% else %}statement. IftagListno tags are retrieved, thenforThe content within the loop will not be executed, but will be executed instead{% else %}The content below will be displayed<span>暂无标签</span>. You can modify this prompt text according to your needs or choose not to display any content.

3. Ask: How can I display tags for each article on the article list page instead of just on the detail page?Answer: On the article list page, you would usually usearchiveListtags to loop through multiple articles. InarchiveListof the loop(for item in archives) inside, you can nest againtagListLabel, and throughitemId=item.IdThe parameter explicitly specifies the tag to be retrieved for the current loop article. This way, 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 %}