Content operation assistant: AnQi CMStagListThe Clever Use of Tags

In the vast sea of the internet, how to efficiently organize information, make it easy to find, and ultimately reach the target users accurately is a problem that every content operator is thinking about. AnQiCMS, as a content management system designed specifically for enterprises and self-media, understands this pain point and provides such features in its powerful template tag system astagListSuch powerful tools help us easily master content tags, adding the charm of classification and aggregation to the website.

Today, let's delve deeper into the security features of the CMS.tagListThe secrets of labels, see how they help us flexibly call the document's Tag list, and add a touch of brilliance to the organization and presentation of website content.

Why are content tags so important?

In AnQi CMS, tags (Tag) are not just keywords of documents, they are more like bridges, skillfully connecting documents of different categories, models, but related to the same theme.For example, an article introducing “Go language programming skills” and a document on “AnQi CMS secondary development tutorial” may both be tagged with “Go language” or “development”.This cross-dimensional correlation can not only greatly enhance the user's content discovery experience on the website, but also optimize the crawling and indexing of search engines, helping to improve the website's SEO performance.

The backend of Anqi CMS provides an intuitive tag management interface, where you can add, edit, or delete tags for documents. You can even set custom URLs, SEO titles, and descriptions for tags, making each tag a valuable aggregation page. To display these carefully designed tags on the front-end page,tagListLabel is our first choice.

tagListExploring Labels: Basic Usage

tagListThe label is the core used in the AnQi CMS template engine to obtain the document tag list.Its usage style follows the concise style of Django template engine, by wrapping content with a pair of tags and defining a variable, it can easily traverse and display tag data.

The most basic form of call is usually like this:

{% tagList tags with limit="10" %}
    {% for item in tags %}
        <a href="{{item.Link}}">{{item.Title}}</a>
    {% endfor %}
{% endtagList %}

In this code,tagsIt is a variable name we define, which will carrytagListLabel data obtained by the tag acquisition, and returned in the form of an array. Next, we go throughforLoop through thistagsArray,itemA variable represents a specific tag object in each loop. Byitem.Linkanditem.TitleWe can respectively obtain the link and title of the label, thus rendering a clickable label list on the page.

Precisely control:tagListDetailed explanation of label parameters

tagListThe power of tags lies in their rich parameters, allowing us to accurately filter and call the required tag list according to different scenarios.

  • itemId: The magic of filtering document IDsThis parameter determinestagListwhich document tags to retrieve. If we call thetagListon the document detail page, usually it is not necessary to explicitly setitemIdIt will default to obtaining the tags associated with the current document. But if you want to get the tags of a specific document, just pass the ID of that document, for example,itemId="123"。English More importantly, if you want to getall tags on the site(such as displaying popular tags on the homepage), you canitemIdset"0"，so thattagListIt will not bind the current document automatically, but will obtain tags from the global range.

  • limit: Controls the number of displayed items and pagination. limitThe parameter is used to control.tagListThe number of returned tags. By default, it displays up to 10 tags, but you can adjust it as needed, for examplelimit="20"to display 20 tags. For more advanced usage,limitSupports "Offset" mode, that is,limit="2,10"This means starting from the second tag and getting 10 tags. It is very useful for implementing some special tag layouts.

  • categoryId: Focus on a specific categoryWhen you want to only display document tags under a specific category,categoryIdthe parameter comes into play. You can pass a single category ID, such ascategoryId="1", also can pass multiple classification IDs, separated by English commas, such ascategoryId="1,2,3". This allows you to display exclusive tag aggregation for different classification pages.

  • letter: Filter by the first letter.If you need to create a label navigation sorted alphabetically (for example, an A-Z index page),letterThe parameter allows you to only retrieve tags that start with a specific initial letter. The value range is A-Z, such asletter="A".

  • siteId: Application in multi-site environmentsFor users who use the multi-site management function of Anqi CMS,siteId参数允许您调用其他站点的数据。通常情况下，如果您只管理一个站点，无需填写此参数。

标签对象的可用字段

When you go throughforto iteratetagList返回的标签对象（即item）When，you can access the following commonly used fields to display label information：

  • Id：The unique ID of the label.
  • Title：The display name of the label, which is also the field we use most frequently.
  • Link：Label detail page link, clicking will jump to the document list page aggregated under the label.
  • Description：Description information of the label, which may be used for the SEO description of the label page.
  • FirstLetter：The first letter of the tag name.
  • CategoryId：If the tag is associated with a specific category, the category ID will be displayed here.

Practice makes perfect：“tagListFlexible application scenarios of

Let us experience through several actual scenarios.tagListThe power and convenience of tags:

Scenario one: Display related tags on the article detail page.

Show related tags at the bottom of the article to guide users to discover more interesting content.

<div class="article-tags">
    <span>相关标签：</span>
    {% tagList tags %} {# 在文档详情页，无需指定itemId，默认获取当前文档标签 #}
        {% for item in tags %}
            <a href="{{item.Link}}" class="tag-item">{{item.Title}}</a>
        {% endfor %}
    {% endtagList %}
</div>

Scenario two: Display the site-wide popular tag cloud in the sidebar.

On the website sidebar or footer, display the most popular or latest tags on the entire site to attract users to click.

<div class="hot-tags-cloud">
    <h3>热门标签</h3>
    {% tagList hotTags with itemId="0" limit="20" %} {# itemId="0"表示获取全站标签 #}
        {% for item in hotTags %}
            <a href="{{item.Link}}" class="hot-tag-link">{{item.Title}}</a>
        {% endfor %}
    {% endtagList %}
</div>

场景三：创建标签列表页（Tag Index Page）并实现分页

如果您的网站有专门的标签索引页（例如：English）/tags），and hope to display all tags with pagination, then you need totag/index.htmluse in the templatetype="page"parameter andpaginationLabel.

{# 假设这是 tag/index.html 模板文件 #}
<div class="tag-list-container">
    <h1>所有标签</h1>
    {% tagList tags with type="page" limit="20" %} {# type="page"开启分页模式 #}
        <ul>
            {% for item in tags %}
                <li><a href="{{item.Link}}">{{item.Title}}</a> ({{item.Description}})</li>
            {% empty %}
                <li>暂无标签</li>
            {% endfor %}
        </ul>
    {% endtagList %}

    {# 结合分页标签显示页码 #}
    <div class="pagination-controls">
        {% pagination pages with show="5" %}
            {# 这里是分页的HTML结构，例如首页、上一页、数字页码、下一页、尾页 #}
            <a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
            {% if pages.PrevPage %}
                <a href="{{pages.PrevPage.Link}}">上一页</a>
            {% endif %}
            {% for pageItem in pages.Pages %}
                <a class="{% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
            {% endfor %}
            {% if pages.NextPage %}
                <a href="{{pages.NextPage.Link}}">下一页</a>
            {% endif %}
            <a class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">尾页</a>
        {% endpagination %}
    </div>
</div>

Through these flexible parameter combinations,tagListLabels can meet your various needs for displaying document tags on different pages, whether it is to display related tags of a single document or to build a tag index for the entire site, it can do so with ease.

Concluding remarks

Secure CMS