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

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

Next, we will together explore how to effectively display the Tag tag list and corresponding documents in the AnQiCMS template.

一、Article Tag List Display

Firstly, let's take a look at how to display the Tag label in the template.This usually has two main scenarios: one is to display the tags belonging to a single article page; the other is to display the list of tags, either on the site's sidebar, footer, or a dedicated tag index page, showing the entire site or popular tags.

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

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

AnQi CMS providestagListTags to get the list of article tags. In the article detail page template (usually{模型table}/detail.html),tagListThe label 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 labels of the current article, and assign the result totagsa variable.
  • Then, through{% for item in tags %}Traverse each label.
  • item.LinkIt will automatically generate a URL pointing to the detail page of the label.
  • item.TitleThen, the name of the tag is displayed.

So, your article detail page will elegantly display all related tags, each tag is clickable, convenient for users to explore more content.

2. In the website sidebar or a dedicated page, display popular/all tags

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 again.tagListLabel, and use itlimitto 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"Ensure that only the latest 10 tags are displayed. If you want to display all tags, you can omit it.limitParameters, 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 site-wide tags instead of tags for a specific article, be sure to ensureitemIdThe parameter has not been explicitly set or set toitemId="0"to avoid the tag list being affected by the current page content ID.

II. Display of the document list corresponding to the Tag tag

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

To display the document list under a specific tag on this page, we need to usetagDataListthe tag. This tag is specifically used to retrieve article data under a specified tag. In the tag detail page,tagDataListThe label will automatically identify the current page's label ID (tagId).

Here is an example of a demonstration of the document list under a label and includes 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 label,tagDetailThe label will automatically obtain the current page's Tag ID.
  • {% tagDataList archives with type="page" limit="10" %}Get the list of articles associated with the current tag.type="page"Indicates that pagination is enabled,limit="10"Then set to display 10 articles per page.
  • {% for item in archives %}Traverse each article.item.Link/item.Title/item.Description/item.ThumbCorresponding to the article link, title, summary, and thumbnail.
  • stampToDate(item.CreatedTime, "2006-01-02")Is a practical function 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"Control the maximum display of 5 page number buttons.

Through this method, users can clearly see all associated articles after clicking on any label, and can conveniently browse pages.

Summary

The tag system of AnQi CMS 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 feature-rich tag aggregation page.This tagging content organization method not only helps the website SEO, but also enhances the fun and efficiency of users exploring content on your site.

Common Questions (FAQ)

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

You can find "Content Management" in the left menu of the Anqi CMS backend and then click on "Document Tags".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. Tag label and article classification have what difference? How should I choose to use it?

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

Tag label is more focused on keyword association and thematic aggregation, it does not have a strict hierarchical relationship, and an article can have multiple tags.Labels can be considered as the 'horizontal' association of articles.For example, an article about "AnQi CMS tutorial" can be categorized under "Tutorial" and also tagged with "CMS

When selecting to use, if your content requires 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 the content organization effect.

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

AutoCMS supports pseudo-static rules, allowing you to customize