AnQiCMS as an efficient and flexible content management system, provides a rich set of features to help operators manage and display website content.Among them, the Tag feature of the article is an important aspect for optimizing content organization, enhancing user experience, and improving SEO effectiveness.Understand how to retrieve and display these tags in frontend templates is crucial for building a feature-complete website.

Manage tags in the AnQiCMS backend

Before delving into front-end templates, let's briefly review how tags work in the AnQiCMS backend. AnQiCMS provides a user-friendly tag management interface.

InContent managementPart, whether it isPublish documentOrEdit documentYou can find the "Tag label" field.Here, you can add one or more tags to the article, you can either choose existing tags or directly input a new tag and press Enter to create it.These tags act as keywords for the content, linking articles on related topics.

In addition,Content managementThere is also a special one belowDocument LabelFunction, you can view, edit, and delete all created tags here, and even set custom URLs, SEO titles, and descriptions for them. This is very helpful for the SEO optimization of the tab pages.

Through these background operations, we have prepared rich label data for the frontend display.

Understand the basics of AnQiCMS template

The template engine syntax of AnQiCMS is similar to Django, which allows front-end developers to get started quickly. In template files, we mainly interact with data through two methods:

  • Use{{变量}}Output the value of the variable directly.
  • Use{% 标签 %}and{% end标签 %}Perform logical judgments, loops, data queries, and other operations.

Understanding these basic syntaxes is the premise for successfully obtaining and displaying tags on the front end.

Obtain and display the Tag tags of the article on the article detail page

When a user browses a specific article, they usually need to see the tags associated with the article in order to quickly understand the topic of the article or to jump to more content under related tags.In the AnQiCMS article detail template, it is very direct to retrieve and display the current article's tags.

We can usetagListThis tag will retrieve the tag list associated with the current article. By default, it will read the article ID of the current page, so you do not need to specify any additional information.itemIdParameter.

The following is a simple code example demonstrating how to display tags on the article detail page:

<div class="article-tags">
    <strong>标签：</strong>
    {% tagList tags with limit="10" %} {# 获取当前文章的最多10个标签 #}
    {% for item in tags %}
    <a href="{{item.Link}}" class="tag-item">{{item.Title}}</a>
    {% endfor %}
    {% endtagList %}
</div>

In this code,tagList tags with limit="10"Assigns up to 10 tags associated with the current article totagsthe variable. Then, we use{% for item in tags %}Loop through these tags and。“{{item.Link}}Get the link address of the tag。“{{item.Title}}Get the tag name, thus rendering a clickable tag list on the front end。“

Display the list of hot tags across the entire site (tag cloud)

In addition to displaying tags in a single article, websites usually also need a 'tag cloud' or 'popular tags' section to concentrate on showing all the tags of the site, guiding users to discover more content.

To get the tag list of the entire site, use the same method astagListtags, but you need to specify explicitlyitemId="0", which means it does not associate with any specific article but retrieves all tags. You can also uselimitParameter controls the number of items displayed, for example, displaying the top 20 tags.

The following is an example of code to get and display the most popular tags on the entire site:

<div class="popular-tags">
    <h2>热门标签</h2>
    <ul>
        {% tagList allTags with itemId="0" limit="20" %} {# 获取全站的最多20个标签 #}
        {% for tag in allTags %}
        <li><a href="{{tag.Link}}" class="tag-link">{{tag.Title}}</a></li>
        {% endfor %}
        {% endtagList %}
    </ul>
</div>

Here we assign all tags toallTagsVariables, and display their names and links through a loop.You can add different styles or adjust the sorting of these tags according to your actual needs (for example, based on the number of articles or page views).

Create an independent tag list page ()tag/index.html)

AnQiCMS allows you to create a dedicated tag list page, such as/tagsThe path for displaying all tags of the website, supporting pagination. According to the AnQiCMS template conventions, such pages are usually namedtag/index.html.

In such a page,tagListTag combinationtype="page"Parameters can be used to implement pagination of the tag list display. At the same time, it coordinates withpaginationTags can generate a complete pagination navigation.

{# 假设这是 tag/index.html 模板文件 #}
<h1>所有标签</h1>

<div class="tag-list-pagination">
    {% tagList tags with type="page" limit="20" %} {# 每页显示20个标签，并启用分页 #}
    <ul class="tag-grid">
    {% for item in tags %}
    <li>
        <a href="{{item.Link}}" class="tag-card">
            <h3>{{item.Title}}</h3>
            <p>{{item.Description | truncatechars:100}}</p> {# 显示标签描述，并截取前100字 #}
        </a>
    </li>
    {% empty %}
    <li>
        暂无任何标签。
    </li>
    {% endfor %}
    </ul>
    {% endtagList %}

    {# 分页导航 #}
    <div class="pagination-controls">
        {% pagination pages with show="5" %}
            {# 首页 #}
            <a class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
            {# 上一页 #}
            {% if pages.PrevPage %}
            <a class="page-link" href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
            {% endif %}
            {# 中间多页 #}
            {% for item in pages.Pages %}
            <a class="page-link {% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
            {% endfor %}
            {# 下一页 #}
            {% if pages.NextPage %}
            <a class="page-link" href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
            {% endif %}
            {# 尾页 #}
            <a class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
        {% endpagination %}
    </div>
</div>

Display the article list under a specific tag (tag/list.html)

When a user clicks on a specific tag, the website usually jumps to a page that displays all the content under that tag