A powerful assistant for content operation: In Anqi CMStagListThe clever use of tags

In the vast world of the Internet, how to efficiently organize information, make it easy to search for, and ultimately reach the target users accurately is a problem that every content operator is thinking about. AnQiCMS (AnQiCMS) as a content management system specially designed for enterprises and self-media is well aware of this pain point and provides such things as in its powerful template tag system.tagListSuch a powerful tool helps us easily handle content tags, adding the charm of classification and aggregation to the website.

Today, let's delve into the Anqi CMS.tagListThe mystery of tags, see how it helps us flexibly call the document's Tag list, adding a touch of elegance 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 with related themes.For example, an article introducing “Go language programming skills” and a document about “AnQi CMS development tutorial” may be tagged with “Go language” or “development”.This cross-dimensional association can not only greatly enhance the user's content discovery experience on the website, but also optimize the search engine's crawling and indexing, helping to improve the website's SEO performance.

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

tagListExploring the tag: Basic usage

tagListThe tag is the core used in the Anqi CMS template engine to obtain the document tag list.Its usage inherits the concise style of the Django template engine, where a pair of tags wrap the content and define a variable, making it easy to iterate and display the tag data.

The most basic form of invocation 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 block,tagsIt is a variable name we define, which will carrytagListThe tag data obtained, returned as an array. Then, we go throughforLoop through thistagsarray,itemThe variable represents a specific tag object in each loop. Throughitem.Linkanditem.TitleWe can get the link and title of the tag respectively, thereby rendering a clickable tag list on the page.

Precisely control:tagListParameter details of the tag

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

  • itemId: Magic filter of document IDThis parameter determinestagListwhich document tags to retrieve. If we call in the document detail pagetagListusually, it is not necessary to explicitly setitemIdIt will default to getting the tags associated with the current document. But if you want to get the tags of a specific document, you just need to pass the document ID, for exampleitemId="123". It is particularly worth mentioning that if you want to retrieveAll labels on the site(for example, to display popular tags on the homepage), you canitemIdis set to"0", like thistagListit will not automatically bind to the current document, but will retrieve tags from the global scope.

  • limit: Control the display quantity and pagination limitThe parameter is used to controltagListThe number of tags returned. By default, it displays a maximum of 10 tags, but you can adjust it as needed, for examplelimit="20"Display 20 tags. For more advanced usage,limitit also supports the 'offset' mode, that is,limit="2,10"This indicates starting from the second tag to retrieve 10 tags. This is very useful in implementing special tag layouts.

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

  • letterFilter by the first letter:If you need to create a label navigation in alphabetical order (for example, an A-Z index page),letterParameters allow you to retrieve tags with specific initial letters. The range of values is A-Z, such asletter="A".

  • siteId: Application under multi-site environmentFor users using the AnqieCMS multi-site management function,siteIdThe parameter allows you to call data from other sites. In most cases, if you only manage one site, you do not need to fill in this parameter.

The available fields of the label object

When you go throughforLoop throughtagListThe returned label object (i.e.itemYou can access the following common fields to display tag information:

  • Id: Unique ID of the label.
  • Title: The display name of the tag, which is also the most commonly used field.
  • Link: The detail page link of the tag, clicking on it will jump to the document list page under the tag.
  • Description: The description information of the tag, which may be used as the SEO description of the tag page.
  • FirstLetter: The initial 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 feel through several actual scenarios.tagListThe power and convenience of tags:

Scenario one: Display related tags on the article detail page

Display tags related to the current article at the bottom 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's popular tag cloud in the sidebar

Display the most popular or latest tags on the site's sidebar or footer 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>

Scene three: Create a Tag Index Page and implement pagination

If your website has a dedicated tag index page (for example:/tags），and you want to display all tags with pagination，then you need totag/index.htmltemplate usagetype="page"the parameter and cooperatepagination.

{# 假设这是 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>

By using these flexible parameter combinations，tagListTags can meet all your needs for displaying document tags on different pages, whether it's showing associated tags for a single document or building an index of tags for the entire site, you can do it with ease.

Conclusion

Security CMS