In the AnQi CMS, article tags are not only a tool for organizing content and improving user experience, but also an important element for optimizing search engine crawling and ranking (SEO).They can help visitors quickly find related content and also enable search engines to better understand the structure of the website.How can I flexibly traverse and display these article tag lists in the AnQiCMS template?This is actually simpler than you imagine, the powerful template tag system of AnQiCMS makes everything very intuitive.

AnQiCMS uses a syntax similar to Django template engine, which makes it easy for content developers to get started. When dealing with article tags, we mainly use a core tag:tagList.

Deep understandingtagListtags

tagListTags are specifically used to retrieve and display article tag data.It allows you to get tags based on different needs, such as getting the tags of the current article, specifying the tags of an article, or even the tag list of the entire site.

to usetagListLabel, you need to wrap it like this{% tagList ... %}and{% endtagList %}structure, and use{% for ... %}loop to traverse the label data obtained.

Let's take a looktagListLabel commonly used parameters and what information it can provide:

  • itemId: This parameter is very critical.
    • If you use it on the article detail pagetagListand do not specifyitemIdIt will default to getting the tags of the article currently being viewed.
    • If you want to get the tags of a specified article (for example, on the article list page, displaying each article's respective tags), you can pass the article's ID.itemId="文章ID"to pass the article's ID.
    • If you want to get the tags of the entire site without targeting a specific article, you canitemIdset"0".
  • limit: This parameter can help you control the number of tags displayed, such aslimit="5"This indicates that up to 5 tags can be displayed. This is very useful when displaying popular tags or limiting the number of tags on article detail pages.
  • typeOn:tag-archiveTag.mdis mentionedtype="page"can be used to display tag lists in pagination, mainly intag/index.htmlThis label is used in the homepage template. Usually, there is no need to set this parameter for displaying labels in a loop within the article.
  • siteId: If you have used the multi-site management function of AnQiCMS and need to call data from other sites, you can specify the site ID through this parameter.Generally, there is no need to fill in.

In{% for ... %}In a loop, each label item is usually treated as a variable (for example, we can name ititem). It will include the following useful fields:

  • {{item.Title}}: The display name of the label, such as "Website Operation
  • {{item.Link}}: Tag corresponding URL link, clicking on it will usually jump to the article list page under the tag.
  • {{item.Id}}：The unique ID of the label.
  • {{item.Description}}：Tag description information (if set in the background).

Practical Training: Tag display in common scenarios

Next, let's see how to apply the template in several common scenariostagListLabel.

Scenario one: Displaying the current article tags on the article detail page

This is the most common type of requirement. When a user reads a specific article, we hope to display all the tags associated with the article at the bottom or sidebar of the article.

You can add the following code in the corresponding template file for article details (usuallyarchive/detail.htmlor a custom article template)

<div class="article-tags">
    <h4>文章标签：</h4>
    {% tagList tags %} {# 不指定 itemId，默认获取当前文章的标签 #}
        {% for item in tags %}
            <a href="{{item.Link}}" class="tag-item">{{item.Title}}</a>
        {% endfor %}
    {% endtagList %}
    {% empty %} {# 如果文章没有标签，可以显示一个提示 #}
        <span>暂无标签</span>
    {% endtagList %}
</div>

This code will traverse all the tags of the current article and generate a clickable link for each tag. You can beautify their display with CSS styles (for example.tag-item)。

Scene two: Display tags for each article on the article list page

On the article list page (such as the category list pagecategory/list.htmlor home pageindex/index.html），we may wish to briefly display several related tags below the title or abstract of each article. This requires the nested use ofarchiveListTags andtagListtags.

{% archiveList archives with type="page" limit="10" %} {# 外部循环：获取文章列表 #}
    {% for archive in archives %}
        <article class="post-item">
            <h3><a href="{{archive.Link}}">{{archive.Title}}</a></h3>
            <p class="post-description">{{archive.Description}}</p>
            <div class="post-meta">
                <span>发布日期：{{stampToDate(archive.CreatedTime, "2006-01-02")}}</span>
                <span class="tags-list">
                    {% tagList tags with itemId=archive.Id limit="3" %} {# 内部循环：获取当前文章的标签，并限制显示3个 #}
                        {% for tag in tags %}
                            <a href="{{tag.Link}}" class="tag-small">{{tag.Title}}</a>
                        {% endfor %}
                    {% empty %}
                        <span></span>
                    {% endtagList %}
                </span>
            </div>
        </article>
    {% endfor %}

    {# 如果需要，这里可以添加分页代码 {% pagination pages with show="5" %}...{% endpagination %} #}
{% endarchiveList %}

Here,itemId=archive.Idis crucial, it ensures thattagListEach time it retrievesThe article being traversed currentlytag. Throughlimit="3"We limit each article to display only 3 tags to keep the list page tidy.

Scenario three: Display the list of popular or latest tags across the entire site

The sidebar, footer, or dedicated tag archive page of a website usually displays a hot tag cloud or a list of recent tags.At this time, we are not concerned about the tags of specific articles, but we hope to obtain global tag data.

<div class="sidebar-block">
    <h4>热门标签</h4>
    <div class="tag-cloud">
        {% tagList globalTags with itemId="0" limit="20" %} {# itemId="0" 获取全站标签，limit限制数量 #}
            {% for tag in globalTags %}
                <a href="{{tag.Link}}" class="global-tag">{{tag.Title}}</a>
            {% endfor %}
        {% endtagList %}
    </div>
</div>

By settingitemId="0",tagListwill get the full site's tag list. You can adjust them according to your needs.limitvalue, and give them different sizes or colors through CSS to form a tag cloud effect.

Content operation and SEO tips

Displaying article tags reasonably in templates can not only enhance the user experience of the website, but also have a positive impact on SEO:

  1. Enhance internal linksEach tag link points to a related tag archive page, which provides more internal links for search engine crawlers, helping to improve the inclusion and weight distribution of website content.
  2. Improve content discoveryUsers can quickly find related topics of interest through tags, increase page stay time, and reduce bounce rate.
  3. **Clarify the topic