In website content operation, tags are an important tool for connecting related content, improving user experience, and optimizing search engine rankings.AnQiCMS as an efficient content management system, naturally supports the association function between articles and tags.How can these related tags be clearly displayed on each article's detail page to allow readers to quickly find more interesting content?This article will guide you in easily implementing the tag list display on the article detail page of AnQiCMS.

The importance of tags: connecting content with users

The application of tags is not just about adding a few keywords to the content, it brings value to website operation at multiple levels:

  • Improve user experience:Readers can quickly find all articles related to the theme they are interested in by clicking on the tags on the website, greatly shortening the content discovery path, improving browsing efficiency and user stickiness.
  • Optimize content organization:
  • Help with search engine optimization (SEO):The tag page can be used as the entrance page of the website, providing more keywords for search engines to crawl and increasing the relevance of the page.At the same time, the tag links displayed on the article detail page also constitute important internal links, which help to improve the overall link structure and weight transmission of the website.

Find your article detail page template

We first need to locate the template file that controls the display of the article detail page to display the tag list.Generally, the AnQiCMS article detail page template may vary depending on the model and custom settings you use.

According to AnQiCMS template design conventions, the default template for the article detail page may be located in/template/您的模板目录/{模型table}/detail.html. For example, if you are using the default article model, the template file is likely to be intemplate/default/article/detail.html. If you have set a custom template for a specific article or category, you need to open the corresponding custom template file.

Open this file after, we will add the code to display the labels in this file.

UsetagListLabel get associated labels

AnQiCMS provided a dedicated template tag for retrieving the tag listtagList. This tag feature is powerful, it can get tags based on multiple conditions, and our current goal is to gettags associated with the current article. This requires usingtagListlabel'sitemIdThe parameter value is the ID of the current article.

In the article detail page, AnQiCMS will automatically assign the current article object to the background.archiveVariable. Therefore, the ID of the current article can be obtained througharchive.IdDirectly obtain.

The following is a code snippet for displaying the tag list of the article detail page:

{# 关联标签列表 #}
{% tagList tags with itemId=archive.Id limit="10" %}
    {% if tags %} {# 检查是否有标签，避免显示空的标题 #}
        <div class="article-tags-section">
            <strong>相关标签：</strong>
            {% for item in tags %}
                <a href="{{ item.Link }}" title="查看更多关于{{ item.Title }}的文章" class="tag-item">{{ item.Title }}</a>
            {% endfor %}
        </div>
    {% else %}
        <div class="article-tags-none">
            本文暂无相关标签。
        </div>
    {% endif %}
{% endtagList %}

Code analysis: understand the role of each part.

Let's take a detailed look at each component of this code:

  1. {% tagList tags with itemId=archive.Id limit="10" %}:

    • tagList: This is the core tag provided by AnQiCMS, used to retrieve tag data.
    • tags: You can customize this variable name, which will be used to store the list of labels obtained. In subsequent loops,forwe will usetagsa variable to iterate over each label.
    • itemId=archive.IdThis is the most critical parameter. It tellstagListthe tag to get all tags associated with the current article (viaarchive.Idget its ID).archiveThe object is globally available on the article detail page, representing the article currently being viewed.
    • limit="10": This parameter is used to limit the number of displayed tags. In this example, the article can display up to 10 related tags. You can adjust this number according to your page design and needs.

  2. {% if tags %}...{% else %}...{% endif %}:

    • This is a conditional judgment statement. It checkstagswhether the variable contains any tags.
    • Iftagsis not empty (i.e., the article has associated tags), then executeifThe code within displays the "Related Tags" title and tag list.
    • IftagsIs empty (i.e., the article has no associated tags), then execute.elseThe code within displays the prompt "This article has no related tags." This can avoid the appearance of an empty "Related Tags" title when there are no tags, improving user experience.

  3. <div class="article-tags-section">and<div class="article-tags-none">:

    • These are HTML containers used to wrap tag lists or no tag prompts. They all have a CSS class (article-tags-sectionandarticle-tags-none），方便您后续通过CSS样式表对标签的显示进行美化和布局。

  4. {% for item in tags %}...{% endfor %}:

    • This is a loop statement used to iteratetagListTags retrieved from comments.tagsList.
    • In each iteration,itemEach variable represents a tag object being traversed currently.

  5. <a href="{{ item.Link }}" title="查看更多关于{{ item.Title }}的文章" class="tag-item">{{ item.Title }}</a>:

    • This will generate a clickable link for each tag.
    • {{ item.Link }}: Output the URL address of the current tag. Clicking it will take the user to the list page of all articles under the tag.
    • {{ item.Title }}: Output the name of the current tag.
    • title="...": Add a link totitlea property, when the user hovers over the label, a tooltip text will be displayed, which also helps improve user experience and SEO.
    • class="tag-item": It is the same CSS class, convenient for style control.

Integrated into the article detail page template

Insert the above code snippet into your article detail page template (for exampletemplate/default/article/detail.html) Where do you want to display the tags? Usually, the tag list is placed after the article content or in the sidebar area.

A more complete example might look like this:

`twig