When you are running a website, the discoverability of content and user experience are crucial.An article meticulously written, if it can guide readers to explore more related content through appropriate associated information, it will undoubtedly greatly increase the user's stay time and the depth of website visits.In the powerful and flexible content management system AnQiCMS, tags (Tag) are the efficient tool to achieve this goal.They not only help you organize and classify content, but also have a positive impact on search engine optimization (SEO).Today, let's delve into how to elegantly display a list of all associated tags for an article in AnQiCMS.

AnQiCMS tag: The bridge of content connection

help-content-tag.md(Document) Making everything orderly.

Core operation: UsetagListTag display related tags

To display all related tags on the article detail page of AnQiCMS, you need to use a very convenient template tag -tagList.This label design is very smart. When you use it on the article detail page, it will default recognize the current article's ID and automatically retrieve all related tags without you needing to manually pass the article ID.

Since an article may be associated with multiple tags,tagListThe function will return a list containing these tags (usually called an array or a slice), you need to use the template engine provided by AnQiCMSforIterate over the tags and display them one by one. Each tag item in the loop contains some useful properties, such asitem）Title(the display name of the tag) andLink(The link that jumps to the page after clicking the tag, usually the article list under the tag), these are the basis for building tag display.

Below is a specific code example for implementing this feature:

{# 假设您已经在文章详情页的模板中，可以直接使用以下代码来显示当前文章的所有Tag #}
<div class="article-tags">
    <span class="tags-label">相关标签：</span>
    {% tagList tags %} {# 在文章详情页，不指定itemId，默认获取当前文章的Tag #}
        {% for item in tags %}
            <a href="{{ item.Link }}" class="tag-item">{{ item.Title }}</a>
        {% empty %} {# 如果当前文章没有关联任何标签，则显示此内容 #}
            <span class="no-tags">暂无相关标签</span>
        {% endfor %}
    {% endtagList %}
</div>

{# 提示：为了更好的样式，您可能需要为.article-tags, .tags-label, .tag-item等添加相应的CSS样式。 #}

Practice Deployment: Integrate Code into Your Template

Normally, you will be in the template file of the article detail page, such as/template/您的模板目录/article/detail.htmlor/template/您的模板目录/product/detail.htmlFind the appropriate position to insert this code. Place the above code snippet below the article content or in the sidebar, or any other position you find suitable.

This code will first go throughtagList tagsGet all tags of the current article and assign the result totagsthe variable. Then,{% for item in tags %}The loop will iterate over thetagsgenerate a hyperlink for each tag in the list<a>Label.{{ item.Link }}The value will automatically parse to the list page URL corresponding to the tag.{{ item.Title }}It will then display the name of the tag. If the current article has no associated tags,{% empty %}The content within the block will be displayed, avoiding page blank or display errors.

PasstagListTags and simpleforLoop, and you can easily display all related tags for each article on the AnQiCMS website, thereby greatly enhancing the discoverability and user experience of the content.

Common Questions (FAQ)

  1. Ask: Can I display a specific article's tag list on pages other than the article detail page?Answer: Of course you can.tagListTags provide aitemIdParameters, you can manually specify the article ID. For example, if you want to display the tags of the article with ID 123, even if the current page is not the article detail page, you can use it like this:{% tagList tags with itemId="123" %}.

  2. Question: How to control the number of displayed tags, such as showing only the first 5 tags?Answer: You can uselimitparameter to limit the number of displayed tags. For example,{% tagList tags with limit="5" %}The article will only display the first 5 tags associated with the current article. If you need to display 5 tags starting from the second tag, you can also uselimit="2,5"such an offset pattern.

  3. Ask: Can the display order of tags be customized? For example, by popularity or alphabetical order?Answer: In the current AnQiCMS,.tagListThere is no direct provision in the tag design.orderControl the display order of tags in the list.Tags are usually displayed according to their inherent logic such as default sorting in the background or creation time.TitlePerform logical judgment to implement this.