How to display the list of all Tags associated with an article?

When you are running a website, the discoverability of content and user experience are crucial.A well-written article, if it can guide readers to explore more related content through appropriate association information, it will undoubtedly greatly increase the user's stay time and the depth of website visits.In the powerful and flexible AnQiCMS content management system, tags (Tag) are the efficient tools 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 the list of all tags associated with an article in AnQiCMS.

AnQiCMS Tags: Bridge of Content Connection

In AnQiCMS, tags are not just simple keywords, but also a powerful content organization tool.You can add any number of tags to different content models such as articles and products, which can cross categories and models to connect related articles scattered throughout the website.For example, an article about "AnQiCMS Deployment" can have tags such as "AnQiCMS", "Deployment Tutorial", "Go Language", etc., while another article about "AnQiCMS Template Creation" can have tags such as "AnQiCMS", "Template Creation", "Front-end Development", etc.In this way, when the reader clicks on a tag, they can easily find all the content associated with that tag, greatly enriching the browsing experience.The "document tag" management function on the back end (for referencehelp-content-tag.mdDocument makes everything in order.

Core operation: usetagListTag display related tags

You need to use a very convenient template tag to display all related tags on the article detail page of AnQiCMS——tagList. This tag design is very smart, when you use it on the article detail page, it will automatically recognize the current article ID and retrieve all related tags associated with it, without you manually passing the article ID.

Due to an article possibly being associated with multiple tags,tagListIt will return a list containing these tags (usually called an array or slice), you need to use the AnQiCMS template engine providedforLoop through the tags to iterate and display them. In the loop, each tag item (item) contains some useful properties, such asTitle(the display name of the tag) andLink(Clicking on the tag jumps to the page link, usually the article list under the tag), these are the basis for building tag display.

The following is a specific code example of how to implement this function:

{# 假设您已经在文章详情页的模板中，可以直接使用以下代码来显示当前文章的所有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样式。 #}

Deploy in Practice: Integrate the Code into Your Template

Generally, 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 or in the sidebar at the position you find suitable.

This code will first passtagList tagsGet all tags of the current article and assign the result totagsVariable. Next,{% for item in tags %}The loop will iterate overtagsa list, and generate a hyperlink for each tag in the list<a>.{{ item.Link }}It will automatically be parsed as the URL of the corresponding list page, and{{ item.Title }}it will display the name of the tag. If the current article has no associated tags,{% empty %}The content within the block will be displayed, avoiding blank pages or display errors.

skillfully using tags, not only can enhance the depth of user browsing on the website, but also can bring a positive impact on search engine optimization (SEO)Each label page may become a potential traffic entry point, linking related content through labels, also enhancing the internal link structure of the website, which helps search engines better crawl and understand your website content.

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

Frequently Asked Questions (FAQ)

1. Ask: Can I display a list of tags for a specific article on pages other than the article detail page?Answer: Of course you can.tagListTags provide aitemIdParameter, 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. How to control the number of displayed tags, for example, I only want to display the first 5 tags?Answer: You can uselimitA parameter to limit the number of displayed tags. For example,{% tagList tags with limit="5" %}Only the first 5 tags associated with the current article will be displayed. If you need to display 5 tags starting from the second tag, you can also uselimit="2,5"such an offset mode.

3. Ask: Can the display order of tags be customized? For example, by popularity or alphabetical order?Answer: In the current AnQiCMS design,tagListthere is no direct provision for the tags.orderParameters control the display order of tags in the list. Tags are usually displayed according to their default sorting in the background or creation time and other intrinsic logic.If you have a specific sorting requirement, you may need to perform a secondary sorting operation on the tag list after obtaining it, or sort it based on certain properties of the tags (such asTitleMake a logical judgment to implement it.