How to loop through and display the article tag list in AnQiCMS templates?

In 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 relevant content and also help search engines better understand the website structure.How can you flexibly iterate and display these article tag lists in AnQiCMS templates?This is actually simpler than you imagine, the powerful template tag system of AnQiCMS makes everything very intuitive.

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

Deep understandingtagListTag

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

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

Let's take a look attagListCommon parameters of labels and what information they can provide:

• itemId: This parameter is very critical.
  • If you use it on the article detail pagetagListand do not specifyitemId, it will default to getting the tags of the article currently being viewed.
  • If you want to get the tags of a specific article (for example, on the article list page, showing the tags of each article), you can pass the article ID throughitemId="文章ID"to pass the article ID.
  • If you want to get tags for the entire site without targeting a specific article, you canitemIdis set to"0".
• limit: This parameter helps you control the number of tags displayed, such aslimit="5"Indicates that up to 5 tags can be displayed. This is very useful when displaying popular tags or limiting the number of tags on the article detail page.
• type: Attag-archiveTag.mdmentionedtype="page"Can be used to display tag lists in pagination, mainly intag/index.htmlThis label is used in the home page template. Usually, it is not necessary to set this parameter for displaying tags in articles.
• siteId: If you use the multi-site management feature of AnQiCMS and need to call data from other sites, you can specify the site ID through this parameter.In most cases, there is no need to fill in.

In{% for ... %}In the loop, each label item is usually used as a variable (for example, we name it)item), it will contain the following useful fields:

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

Practice Exercise: Label Display in Common Scenarios

Next, let's see how to apply in the template through several common scenarios.tagList.

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

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

You can add the following code in the template file corresponding to the article detail page (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 iterate over all the tags of the current article and generate clickable links for each tag. You can enhance their display with CSS styles such as.tag-item) to beautify their appearance.

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

On the article list page (such as the category list pagecategory/list.htmlor the homepageindex/index.htmlWe may wish to briefly display some related tags below the title or introduction of each article. This requires combiningarchiveListTags andtagListtags for nested use.

{% 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 thattagListAlways get itCurrent article being traversedtag. Throughlimit="3"We limit each article to display only 3 tags to keep the list page tidy.

Scenario 3: Display the list of popular or latest tags on the entire site.

The website sidebar, footer, or dedicated tag archive page usually displays a hot tag cloud or the latest tag list.At this point, we do not care about the tags of specific articles, but we want 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",tagListYou will get the list of tags on the entire site. You can adjust them as neededlimitvalue, as well as assign them different sizes or colors through CSS to form a tag cloud effect.

Content operation and SEO tips

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

1. Strengthen 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 discovery: Users can quickly find related topics of interest through tags, increase page dwell time, and reduce bounce rates.
3. **Clear theme