Display article tags flexibly in the AnQiCMS template

In website content operation, tags are a highly effective content organization method.They can not only help users find relevant content faster and improve the browsing experience of the website, but also have an indispensable positive effect on search engine optimization (SEO).AnQiCMS as a feature-rich enterprise-level content management system naturally also provides powerful tag management and call functions, allowing us to easily display all tags associated with the current article on the article detail page.

This article will guide you on how to flexibly and efficiently display the tags of the current article in the AnQiCMS template, making your content more organized and discoverable.

The role and value of tags

Imagine, when readers finish reading an article, if they can immediately see the keyword tags related to the article, they are likely to click on these tags and explore more content on the same topic.This not only prolonged the user's stay on the website, but also brought more page views to the website.

In terms of the website itself, the tag system has multiple values:

  • Enhancing content relevance：Link articles with similar topics or keywords through tags to form a content network.
  • Enhancing user experience：Provide users with multi-dimensional navigation methods to facilitate their discovery of content based on interest.
  • Optimize SEO: The tab itself can be a valuable landing page, helping search engines better understand the structure and theme of the website content, and increase the coverage of keywords.AnQiCMS has especially added the Tag label feature for articles and products in version v2.1.0, and built-in advanced SEO tools, fully reflecting its emphasis on tags in SEO.

In AnQiCMS background management label

Before starting template development, make sure your article has been tagged. The AnQiCMS backend operation is very intuitive:

  1. Publish or edit articlesWhen you enter the article editing interface, you will find an input box named "Tag Tag" in the sidebar or at the bottom (the specific location may vary depending on the model configuration).
  2. Add Tag: You can enter a new label name here, then press Enter to confirm, and it will automatically be converted into a label.Or, you can also click the input box, and the system will pop up a list of existing tags for you to choose from.
  3. Independence of TagsThe AnQiCMS tag is universally used across the entire site, without distinguishing between article models or product models. This means you can use the same tags for different types of content, further strengthening the connection between content.

Make sure your article is associated with at least one tag so that we can see the actual effect in the frontend template.

How to call article tags in the template: core steps

AnQiCMS uses syntax similar to the Django template engine to make template creation very easy to pick up. To view the article details page, it is usuallyarchive/detail.htmlOr you can customize the article template) to display the tags of the current article, we need to use the AnQiCMS providedtagList.

tagListTags are used to retrieve the list of tags associated with the article. In the context of the article detail page, it will default to retrieving all tags of the current article.

Here is a basic code snippet that shows how to call and display tags in a template:

<div class="article-tags">
    <strong>标签：</strong>
    {% tagList currentArticleTags %}
        {% for tag in currentArticleTags %}
            <a href="{{ tag.Link }}" class="tag-item">{{ tag.Title }}</a>
        {% empty %}
            <span>这篇文章暂时还没有关联任何标签哦！</span>
        {% endfor %}
    {% endtagList %}
</div>

Let's go into a detailed explanation of this code:

  1. {% tagList currentArticleTags %}: This is the calltagListThe label begins. We will assign the list of labels we obtain to a custom variablecurrentArticleTags. You can name this variable according to your preference, just make it easy to understand.
  2. {% for tag in currentArticleTags %}: Due tocurrentArticleTagsis a list containing multiple label objects, we need to useforloop to iterate through it, each loop will assign a label object totagVariable.
  3. {{ tag.Link }}and{{ tag.Title }}: inside the loop,tagAn object includes all the properties of a label. The most commonly used isLink(The link address of the tab) andTitle(The display name of the label). By{{ }}Braces syntax, we can output these values to HTML.
  4. {% empty %}: This is a very practical feature. If the current article has no tags,forthe loop will execute.emptyBlock content, rather than nothing displayed, which can provide a friendly prompt to the user.
  5. {% endfor %}and{% endtagList %}: These are the end tags corresponding to the labels, ensuring the integrity of the template structure.

Place this code in your article detail template, and it will automatically fetch and display all the tags associated with the current article. Don't forget to.article-tagsand.tag-itemAdd some CSS styles to make the label look more beautiful.

Further customize and optimize.

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

  • Limit the display quantity (limit)If you want to display only the first few tags of the article, you can uselimitParameter.

    {% tagList currentArticleTags with limit="5" %}
    {# ... 循环代码 ... #}
{% endtagList %}

    Even if the article is associated with ten tags, only the first five will be displayed.

  • To get the tags of a specific article (itemId): Although the default behavior on the article detail page is to fetch the current article tags, if you want to fetchotherthe tags of the article, you can useitemIdparameters and pass in the ID of the article.

    {# 假设你想获取ID为100的文章的标签 #}
{% tagList otherArticleTags with itemId="100" %}
    {# ... 循环代码 ... #}
{% endtagList %}

  • Retrieve all site tags (itemId="0")Sometimes, you may need to display a list of all site tags in the sidebar or other areas (such as popular tag clouds). At this point, you canitemIdis set to0.

    {% tagList allSiteTags with itemId="0" limit="20" %}
    {# ... 循环代码 ... #}
{% endtagList %}

    cooperatelimitParameters can easily build a tag cloud.

By using these flexible tags, you can create a diverse tag display effect according to the design and operation needs of the website in AnQiCMS, making your website content more organized and more favored by readers and search engines.

Summary

Displaying article tags in AnQiCMS is a simple and powerful feature. Through convenient tag management on the back end, combined with the front-end template intagListThe flexible use of tags, you can easily enhance the relevance of website content, improve user experience, and lay a solid foundation for SEO performance.Go ahead and try to add and display these practical tags in your AnQiCMS website!

Frequently Asked Questions (FAQ)

Q1: Why does the tag I added in the article background not display on the front page?

A1: Please check the following aspects:

1.