How to display the Tag tag list and corresponding documents of articles in AnQiCMS template?

In Anqi CMS, the organization and presentation of content are diverse, among which the Tag label feature of articles provides users with flexible keyword association and content discovery paths.No matter if you want to display related tags on the article detail page or create a page that aggregates content with specific tags, Anqi CMS provides intuitive and powerful template tags to meet these needs.

Next, we will discuss how to effectively display the Tag list of articles and their corresponding documents in the AnQiCMS template.

I. Display of article Tag label list

First, let's take a look at how to display the Tag tag of the article in the template.This usually has two main scenarios: one is to display the tags belonging to a single article page;Secondly, on the website's sidebar, footer, or a dedicated tag index page, it displays a list of all site or popular tags.

1. Display the current article tags on the article detail page

When a user reads a specific article, you may want to display tags associated with the article at the bottom or sidebar.This helps the reader understand the theme of the article and quickly jump to other articles with the same tag.

AnQi CMS providestagListTags to obtain the list of article tags. In the template of the article detail page (usually{模型table}/detail.html),tagListThe tag will automatically identify the ID of the current article.

You can use it like this:

<div class="article-tags">
    <strong>标签：</strong>
    {% tagList tags %}
        {% for item in tags %}
            <a href="{{ item.Link }}" title="{{ item.Title }}">{{ item.Title }}</a>
        {% endfor %}
    {% endtagList %}
</div>

In this code block:

  • We use{% tagList tags %}To get all the tags of the current article and assign the result totagsVariable.
  • Then, through{% for item in tags %}Iterate through each tag.
  • item.LinkIt will automatically generate a URL pointing to the tag detail page.
  • item.TitleIt displays the name of the tag.

This will elegantly display all related tags on your article detail page, each tag is clickable for easy exploration of more content.

2. Display popular/all tags in the website sidebar or dedicated page

If you want to display a certain number of tags on non-article detail pages of the website, such as the homepage sidebar, blog list page, or an independent "tag cloud" page, you can use it againtagListLabels, and make use of themlimitparameter to control the number of displayed items.

For example, display the latest 10 labels:

<div class="hot-tags-widget">
    <h3>热门标签</h3>
    <ul>
        {% tagList tags with limit="10" %}
            {% for item in tags %}
                <li><a href="{{ item.Link }}" title="{{ item.Title }}">{{ item.Title }}</a></li>
            {% endfor %}
        {% endtagList %}
    </ul>
</div>

here,limit="10"It will ensure that only the latest 10 labels are displayed. If you want to display all labels, you can omit itlimitParameter, or set it to a sufficiently large number. It should be noted that if it is not called on the article detail page, and you want to display the tags of the entire site rather than the tags of a specific article, you must ensureitemIdThe parameter is not explicitly set or set toitemId="0"to avoid the tag list being affected by the current page content ID.

II. Display of document list under Tag tag

When a user clicks on a tag, it usually jumps to a tag detail page, which aggregates all articles associated with this tag. This page is usually corresponding to the template directory under AnQi CMS.tag/list.htmlortag/index.html.

We need to use a specific tag to display a list of documents on this page,tagDataListwhich is used to fetch articles under the specified tag. In the tag details page,tagDataListThe tag will automatically identify the tag ID of the current page (tagId).

Here is an example of a list of documents under the tag with pagination functionality:

{# 假设这是 tag/list.html 或 tag/index.html 模板 #}
<h1>标签：{% tagDetail with name="Title" %}</h1>
<p>{% tagDetail with name="Description" %}</p>

<div class="tag-documents">
    {% tagDataList archives with type="page" limit="10" %}
        {% for item in archives %}
            <div class="document-item">
                <a href="{{ item.Link }}" title="{{ item.Title }}">
                    {% if item.Thumb %}
                        <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="document-thumb">
                    {% endif %}
                    <h2>{{ item.Title }}</h2>
                </a>
                <p class="document-description">{{ item.Description }}</p>
                <div class="document-meta">
                    <span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                    <span>阅读量：{{ item.Views }}</span>
                    {% if item.CategoryId %}
                        <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                    {% endif %}
                </div>
            </div>
        {% empty %}
            <p>该标签下暂时没有任何文章。</p>
        {% endfor %}
    {% endtagDataList %}

    {# 分页导航 #}
    <div class="pagination-container">
        {% pagination pages with show="5" %}
            <ul>
                {% if pages.FirstPage %}
                    <li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a></li>
                {% endif %}
                {% if pages.PrevPage %}
                    <li><a href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a></li>
                {% endif %}
                {% for pageItem in pages.Pages %}
                    <li class="{% if pageItem.IsCurrent %}active{% endif %}"><a href="{{ pageItem.Link }}">{{ pageItem.Name }}</a></li>
                {% endfor %}
                {% if pages.NextPage %}
                    <li><a href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a></li>
                {% endif %}
                {% if pages.LastPage %}
                    <li class="{% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a></li>
                {% endif %}
            </ul>
        {% endpagination %}
    </div>
</div>

In this code block:

  • <h1>标签：{% tagDetail with name="Title" %}</h1>Used to display the name of the current tag,tagDetailThe tag will automatically obtain the Tag ID of the current page.
  • {% tagDataList archives with type="page" limit="10" %}Get the list of articles associated with the current tag.type="page"Enables pagination,limit="10"Then set each page to display 10 articles.
  • {% for item in archives %}Traverse each article.item.Link/item.Title/item.Description/item.ThumbCorrespond to the link, title, introduction and thumbnail of the article.
  • stampToDate(item.CreatedTime, "2006-01-02")Is a practical function used to format timestamps into readable dates.
  • {% categoryDetail with name="Title" id=item.CategoryId %}Used to display the category name of the article in the article list.
  • {% pagination pages with show="5" %}Tags are used to generate pagination navigation,show="5"Controls the maximum number of page buttons displayed, up to 5.

In this way, after the user clicks on any tag, they can clearly see all related articles and can easily browse through the pages.

Summary

The Anqi CMS tag system provides great flexibility for content management and user experience. ThroughtagListandtagDataListTwo core tags, you can easily display article tags at various locations on the website and build a comprehensive tag aggregation page.This kind of tagged content organization not only helps with the website's SEO, but also enhances the fun and efficiency of users exploring content on your site.

Frequently Asked Questions (FAQ)

1. How to create and manage Tag tags in the Anqi CMS backend?

You can find "Content Management" in the left menu of the Anqi CMS backend and then click on "Document Tag".In here, you can add tags, set names, index letters, custom URLs, SEO titles, keywords, and descriptions for each tag.The creation of tags is very flexible, not dependent on specific categories or models, and can be associated across content models, making them more flexible in content organization than categories.

2. What is the difference between Tag tags and article categories? How should I choose to use them?

Article categories (Category) are typically used for organizing content in a hierarchical structure, with clear parent-child relationships, and each article must belong to a category.It helps users and search engines understand the overall structure of a website.For example, a "news" category can have subcategories such as "domestic news" and "international news".

Tag labels are more focused on keyword association and thematic aggregation, it does not have a strict hierarchical relationship, an article can have multiple tags.Tags can be considered as the "horizontal" association of an article. For example, an article about "AnQi CMS tutorial" can be classified under the "Tutorial" category, and it can also be tagged with "CMS", "Website Building", "Go Language", and other tags.

Choose to use it when you need clear structure and hierarchy, please use categories;If your content requires flexible keyword association and multi-dimensional aggregation to facilitate users in discovering related topics, then tags are a better choice.Both are usually combined to achieve **content organization effects.

3. How to customize the URL structure of the Tag tag page to optimize SEO?

AnQi CMS supports pseudo-static rules, allowing you to customize