How to get and display the list of tags and links associated with the article in the template?

In website operation and content management, article tags (Tag) are a key tool to enhance content organization, user experience, and search engine optimization (SEO) effects.They can not only help users quickly find relevant content of interest, but also provide clearer content theme information for search engines, thereby improving the overall performance of the website.AnqiCMS as an efficient content management system provides intuitive template tags, allowing you to easily obtain and display the list of related tags and their links in the template.

Learn about the AnqiCMS tag mechanism

AnqiCMS's template system uses a syntax similar to the Django template engine, through{% 标签 %}to invoke the function, through{{ 变量 }}Display data. The system provides a namedtagListThe powerful tag. This tag can help us obtain the corresponding tag data according to different needs.

When we need to display the tags associated with the current article on the article detail page,tagListtags come into play. It allows us to pass in aitemIdThe parameter, explicitly specify the tag of the article to be retrieved. If not specifieditemId,tagListIt will try to get the article ID of the current page

Retrieve and display the list of tags associated with the article in the template

In order to display related tags on the article detail page (usuallyarchive/detail.htmlin such a template file), we need to perform several steps:

1. Determine the current article ID:In the article detail page, all information about the current article is available. We can obtainarchiveDetailthe ID of the current article using tags so that it can be passed totagList. Although in the article detail page, the current article ID can be accessed directly througharchive.Id, but for the universality and readability of the code, usingarchiveDetailtags to explicitly obtain is better.

2. UsetagListTag get tag data:Once the article ID is obtained, it can be calledtagListTag. Assign the article ID toitemIdParameter, at the same time it can be setlimitParameter to limit the number of tags displayed, for examplelimit="10"Indicate that up to 10 tags can be displayed.

3. Loop through and display the tags: tagListThe tags will return an array of tag objects. We need to use{% for ... in ... %}Loop through this array and extract the title from each label object (item.Title) and link (item.Link) and then render it to the page.

Here is an example code snippet that displays associated tags in an article detail template:

{# 假设这是文章详情页模板的一部分，例如位于 article/detail.html 或 product/detail.html #}

{# 首先，获取当前文章的ID。这里我们将ID赋值给一个变量 currentArticleId，以便后续使用 #}
{% archiveDetail currentArticleId with name="Id" %}

{# 使用 tagList 标签获取与当前文章ID关联的标签列表 #}
{# itemId 参数指定了文章ID，limit 参数限制最多显示10个标签 #}
{% tagList tags with itemId=currentArticleId limit="10" %}
    {# 检查是否有标签关联，避免显示空的标签区域 #}
    {% if tags %}
        <div class="article-tags">
            <strong>标签：</strong>
            {% for tag in tags %}
                {# 循环遍历每个标签，显示其标题并链接到该标签的文章列表页 #}
                <a href="{{ tag.Link }}" title="查看更多关于 {{ tag.Title }} 的文章">{{ tag.Title }}</a>{% if not forloop.Last %},{% endif %}
            {% endfor %}
        </div>
    {% else %}
        {# 如果当前文章没有关联任何标签，可以显示一个提示或者不显示任何内容 #}
        <div class="article-tags">
            暂无相关标签。
        </div>
    {% endif %}
{% endtagList %}

In this code block:

• {% archiveDetail currentArticleId with name="Id" %}The ID of the current article was obtained and stored incurrentArticleIdthe variable.
• {% tagList tags with itemId=currentArticleId limit="10" %}Called the tag list, specified the article ID to be queried, and stored the result intagsthe variable, while also limiting the display count to 10.
• {% if tags %}This line makes a judgment to ensure that the tag area will only be rendered when the article is indeed associated with tags, to avoid unnecessary blank spaces or the phrase 'No tags' on the page.
• {% for tag in tags %}Loop through each label object,tag.LinkProvided the link to the article list page corresponding to the label,tag.Titleis the display name of the label.
• {% if not forloop.Last %},{% endif %}It is a practical little trick used to add a comma-separated symbol after each label, but not after the last label.

In this way, when users browse articles, they can clearly see the topic tags involved in this article, and by clicking on these tags, they can seamlessly jump to the list pages of all articles containing these tags, greatly enhancing the navigation and user engagement of the website content.

How to get more label list

In addition to getting the tags related to the current article,tagListLabels also support more flexible usage:

• Get all site tags or hot tags:If you want to display the site's hot tags in the sidebar or footer, you can omititemIdparameter (or set it toitemId="0") To get the tag list of the entire site. Then you can sort and display them according to the number of tags or the relevance of the articles.
• Get tags by category: tagListit also supportscategoryIdParameter, can obtain the tag list under a specific category, which is very useful for building a tag wall for a specific content module.
• Display the list of articles under a specific tag:AnqiCMS also providestagDataListtags, its function is opposite totagList, it is to get all related articles under the tag according to the tag ID. This is usually used for tag detail pages (such astag/list.htmlLet the user see all the content under a certain tag.

These flexible tag calling methods make AnqiCMS highly customizable in content operations, able to meet various complex tag display needs.

Frequently Asked Questions (FAQ)

1. Q: What will be displayed in the template if an article is not tagged?A: In the above example code, since it uses{% if tags %}Make a judgment, if the article is not associated with any tags,tagsThe variable will be empty, therefore the text “No related tags.” will be displayed. If you do not want to display any prompts, you can simply remove it.{% else %}Section.

2. Q: Can I customize the style and display of label links, for example, showing them as buttons?A: Of course you can. In the template code, the<a href="...">...</a>Part is just HTML structure. You can add custom CSS classes (such as<div class="article-tags">or<a href="{{ tag.Link }}" ...>add custom CSS classes (such asclass="tag-button"), then in your website stylesheet (style.cssBy defining the styles for these classes, you can render them into any effect you want, such as buttons, blocks, etc.

3. Q: Where else can the tags associated with the article be displayed, besides the article detail page?A: Article tags are usually only displayed on the article detail page because they directly relate to the content the user is currently reading.But in some designs, you can also briefly display the first few tags of the article under each list item on the article list page, or display popular tag clouds or tags under specific categories in the website sidebar, footer, or other locations to enhance the website's navigation and content discovery capabilities.