In content operation, tags (Tags) are a very practical tool that can help us organize content more flexibly, making it convenient for readers to quickly find related topics of interest.Imagine that after a user finishes reading an exciting article, if they can immediately see other popular topics or keywords related to the article, it will undoubtedly greatly enhance their browsing experience and encourage them to explore other content on the website.tagListTag it to complete.

Why should associated tags be displayed on the article detail page?

Displaying related tags on the article detail page not only improves the navigation experience for users, but also brings various benefits to the website.Firstly, from the user's perspective, these tags are the 'index' of the content, they can click on the tags and easily jump to other articles under the same theme, thereby extending the website's stay time.Secondly, for search engine optimization (SEO), using tags properly helps search engines better understand the article topic, crawl and index relevant content, thereby improving the visibility of the website in search results.Moreover, it also helps with content discovery, ensuring that your high-quality content is not buried and forms a rich internal link structure on your website.

Know about AnQi CMStagListTag

The template system of AnQi CMS is very flexible, the core of which is its rich tag library.tagListIt is one of the tags specifically used to retrieve the list of document tags.Its design初衷 is to facilitate developers and content operators to quickly display related tags on articles, product details pages, and other pages.On usage, it is very easy to get started, similar to the Django template engine syntax.

In the article detail page,tagListTags do not require special configuration to intelligently recognize the ID of the article currently being viewed and automatically extract all tags associated with the article.These tags are usually returned in an array format, which is convenient for us to display through loops in the template.

How to add related tag lists on the article detail page?

To display related tags on the article detail page of your Anqi CMS website, simply add a few lines of simple code to the corresponding template file. Below is a practical code snippet and step-by-step instructions:

{# 在文章详情页中，tagList标签会默认读取当前文章的ID来获取标签 #}
{% tagList tags %}
    {% if tags %} {# 检查是否有标签，避免在没有标签时显示空区域 #}
        <div class="article-tags">
            <strong>相关标签：</strong>
            {% for item in tags %}
                <a href="{{ item.Link }}" title="{{ item.Title }}">{{ item.Title }}</a>
            {% endfor %}
        </div>
    {% endif %}
{% endtagList %}

This code will traverse all the associated tags of the current article and generate a clickable link for each tag.item.LinkIt will automatically direct to the detail page of the tag, anditem.TitleThe label's display name. This way, when the reader clicks on the label, they can see a list of all articles containing that label.

Deployment steps:

In practice, adding the associated tag list to the article detail page is very simple:

  1. Confirm the template file:Open the folder of the template used by your current site. The template file for the article detail page is usually located in{模型table}/detail.htmlFor example, if your article model isarticle, then the file path may betemplate/您的模板名称/article/detail.html.
  2. Select a suitable location:Find the position after the article content display area, before the related recommendations or comments section, which is the ideal area for displaying tags in the template file.
  3. Insert the code:Take the provided abovetagListCopy and paste the code snippet to the selected location.
  4. Save and update:Save template file.If you are developing locally, refresh your article detail page to see the effect.If operating in an online environment, you usually need to log in to the Anqi CMS backend, click the "Update Cache" feature to ensure that the latest template files take effect.

Optimize label display:

tagListThe label also provides some parameters that allow you to control the display of the label more flexibly:

  • Limit the display quantity (limit):If you find that there are too many tags, which may affect the beauty of the page or the loading speed, you can uselimitParameters to limit the number of displayed tags. For example, display only the first 5 tags:
    
{% tagList tags with limit="5" %}
    {# ... 标签循环代码 ... #}
{% endtagList %}
  • Display all tags (itemId="0"):It should be noted that,tagListThe default is to display the tags of the current article. If you have some special requirements and want to display *all site tags* on the article detail page instead of the tags of the current article, you canitemIdthe parameter to0:
    
{% tagList tags with itemId="0" limit="10" %}
    {# ... 标签循环代码 ... #}
{% endtagList %}
    However, it is quite rare to display the entire site tags on the article detail page, usually we are more concerned with tags directly related to the current content.
  • Filter by category (categoryId):Assuming you only want to display tags under a specific category (even if these tags are also associated with the current article), you can alsocategoryIdParameter filtering. For example, only display tags associated with articles of category ID 1: “`twig {% tagList tags with categoryId=“1” limit=“10” %} {# … tag loop code