In website operation and content management, article tags (Tag) are a key tool to enhance content organization, user experience, and search engine optimization (SEO) effectiveness.They can not only help users quickly find the relevant content they are interested in, but also provide clearer content theme information for search engines, thus improving the overall performance of the website.AnqiCMS as an efficient content management system provides intuitive template tags, allowing you to easily get and display the tag list and its link associated with the article in the template.

Understand the tag mechanism of AnqiCMS

AnqiCMS's template system uses syntax similar to Django template engine, by{% 标签 %}to call functions, by{{ 变量 }}Show data. For obtaining the tag list, the system provides a namedtagListThe powerful tag. This tag can help us obtain corresponding tag data according to different needs.

When we need to display the current article's associated tags on the article detail page,tagListtags come in handy. It allows us to pass in aitemIdParameters, explicitly specify which article's tags to retrieve. If not specifieditemId,tagListAttempts to retrieve the article ID of the current page.

Gathers and displays the Tag list associated with the article in the template

To display related tags in the article detail page (usuallyarchive/detail.htmlsuch template files), we need to follow several steps:

  1. Determine the current article's ID:In the article detail page, all the information of the current article is available. We can usearchiveDetailtags to get the ID of the current article so that it can be passed totagList. Although in the article detail page, the current article's ID can be accessed directly througharchive.Idfor the universality and readability of the code, it is better to usearchiveDetailtags to obtain it explicitly.

  2. UsetagListLabel acquisition of label data:Once the article ID is obtained, it can be calledtagListLabel. Assign the article ID toitemIdParameter, and you can also setlimitParameter to limit the number of displayed labels, for examplelimit="10"The maximum number of tags displayed is 10.

  3. Loop through and display tags: tagListTags 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), then render it to the page.

Below is a sample code snippet that displays related tags of an article in the 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" %}Gained the current article's ID and stored it incurrentArticleIdthe variable.
  • {% tagList tags with itemId=currentArticleId limit="10" %}Called the tag list, specified the article ID to be queried, and stored the results intagsthe variable, while limiting the display quantity 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, avoiding unnecessary blank spaces or the phrase 'No tags available'.
  • {% for tag in tags %}Loop through each label object,tag.Linkprovides the link to the article list page corresponding to the label,tag.Titlewhich is the display name of the label.
  • {% if not forloop.Last %},{% endif %}It is a practical little trick to add a comma-separated delimiter after each tag, but not after the last tag.

Through this method, users can clearly see the topic tags involved in the article while browsing, and by clicking on these tags, they can seamlessly jump to the list pages of all articles containing these tags, greatly enhancing the navigation of the website's content and user engagement.

More tag list retrieval methods

Besides getting the tags associated with the current article,tagListTags also support more flexible usage:

  • Get all site tags or popular tags:If you want to display the site's popular tag cloud in the sidebar or footer, you can omititemIdthe parameter (or set it toitemId="0"）to get the full site tag list. Then you can sort and display based on the number of tags or the relevance of the articles.
  • Get tags by category: tagListIt also supportscategoryIdParameters can obtain the tag list under a specific category, which is very useful for building a tag wall for specific content modules.
  • Display the article list under a specific tag:AnqiCMS also providestagDataListtags, its function is totagListthe opposite, it retrieves the list of all related articles under 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 operation, capable of meeting various complex tag display needs.

Common Questions (FAQ)

  1. Q: If an article does not have any tags set, what will be displayed in the template?A: In the above example code, since it uses{% if tags %}Perform a judgment, if the article is not associated with any tags,tagsThe variable will be empty, therefore the text “No related tags are available.” will be displayed. If you do not want to display any prompts, you can directly remove it.{% else %}Part.

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

  3. Q: Where else can the associated tags of the article be displayed, besides the article detail page?A: Article associated tags are usually only displayed on the article detail page, as 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 show popular tag clouds or tags under specific categories in the website sidebar, footer, and other locations to enhance the website's navigation and content discovery capabilities.