AutoCMS: Display a list of articles under specific tags

In AnQi CMS, the Tag is a very practical feature that can help us classify and manage website content more finely, improving the efficiency of users discovering related content through keywords, and it is also very beneficial to the SEO performance of the website.By adding meaningful tags to the articles, we can connect similar topics scattered across different categories, providing users with a more coherent and in-depth reading experience.

This article will delve into how to make full use of the powerful template tag function of the Anqi CMS, accurately obtain and display article content associated with specific tags, thereby helping you better organize website information and improve user browsing experience.

Understand the Tag Function in Anqi CMS

In the background content management module of AnQi CMS, you can conveniently create and manage website tags.When you post or edit an article, you can add one or more tags to the article. These tags are like keywords for the content, linking different articles together.For example, an article discussing “website optimization techniques” may belong to the category of “technical tutorials”, and can also be tagged with “SEO”, “content marketing”, “user experience”, and other tags.Users can see all articles with the tag by clicking on a label while browsing the website.

Get and display the list of articles under a specific tag

In the template design of Anqi CMS, we mainly usetagDataListLabel to get the list of articles under a certain label. This label is very flexible and can be configured according to different scenarios.

Generally, you will use a dedicated template for displaying articles under a label (for example, in your template directory/template/您的模板名/tag/list.html).

Dynamically retrieve articles under the current label

When a user visits a specific tag page (such as您的域名/tag/SEO), AnQi CMS will identify the tag information of the current page. In this case,tagDataListyou do not need to specify the tag explicitlytagIdIt will automatically retrieve the current page's tag ID and fetch associated articles.

To display the current tag's name and description at the top of the page, we can combine the use oftagDetailTags:

{# 假设这是您的标签文章列表页模板：tag/list.html #}

{% tagDetail currentTag with name="Title" %}
<h1>标签：{{ currentTag }}</h1>

{% tagDetail tagDescription with name="Description" %}
{% if tagDescription %}
<p>简介：{{ tagDescription }}</p>
{% endif %}

{# 使用 tagDataList 获取当前标签下的文章列表 #}
{% tagDataList archives with type="page" limit="10" %}
    {% for item in archives %}
        <article>
            <h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
            <p>{{ item.Description }}</p>
            <div class="meta">
                <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                <span>发布时间：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                <span>浏览量：{{ item.Views }}</span>
            </div>
        </article>
    {% empty %}
        <p>此标签下暂无文章，敬请期待。</p>
    {% endfor %}
{% endtagDataList %}

In this code block:

  • {% tagDetail currentTag with name="Title" %}It will get the title of the current tab and assign it.currentTaga variable.
  • {% tagDetail tagDescription with name="Description" %}Get the description of the current tab.
  • {% tagDataList archives with type="page" limit="10" %}Is the core, it will query the articles associated with the current tag.type="page"Means enable pagination feature,limit="10"Then set the display of 10 articles per page.
  • {% for item in archives %}Loop through the obtained article list,itemThe variable contains detailed information of each article, such as the title (item.Title), link (item.Link), description (item.Description）etc.
  • {% empty %}The block will bearchivesThe list is empty and shows a specified content, which is a very friendly design, avoiding a blank page on the page.

Add pagination navigation to the article list

When the number of articles under a label is large, the pagination feature becomes particularly important. CombinedtagDataListoftype="page"Parameters, we can easily implement pagination navigation.

the abovetagDataListAfter the loop ends, add immediatelypaginationthe tag:

{# ... 前面的 tagDataList 循环代码 ... #}

{# 分页导航 #}
<div class="pagination-container">
    {% pagination pages with show="5" %}
    <nav>
        <ul>
            {# 首页链接 #}
            <li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
            {# 上一页链接 #}
            {% 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 %}
            {# 末页链接 #}
            <li class="{% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a></li>
        </ul>
    </nav>
    {% endpagination %}
</div>

Here{% pagination pages with show="5" %}Will generate pagination information and assign it topagesa variable.show="5"Represents a maximum of 5 pagination button displays. You can customize the HTML structure and style of pagination according to your design style.

More scenarios and practical skills

  • Display related tags on the article content page:You can use it at the bottom of each article detail page,tagListLabel to display all tags associated with the current article. Each tag can be linked to its corresponding.tag/list.htmlPage, convenient for users to find more related content.

    {# 在文章详情页模板中（如archive/detail.html） #}
<div class="article-tags">
    <strong>标签：</strong>
    {% tagList articleTags with itemId=archive.Id limit="10" %}
        {% for tag in articleTags %}
            <a href="{{ tag.Link }}">{{ tag.Title }}</a>
        {% endfor %}
    {% endtagList %}
</div>

    HereitemId=archive.Idwill ensuretagListThe tags obtained are those of the current article.

  • SEO friendliness:The CMS supports pseudo-static URLs and custom URL aliases, ensuring that your tag page has a clear and friendly URL structure (for example您的域名/tag/SEO.htmlThis is crucial for search engine optimization.Also, setting appropriate TDK (Title, Description, Keywords) for tag pages is crucial for enhancing search engine visibility.

  • Custom tag page template:English CMS allows you to label the home page (tag/index.html) and the label article list page (tag/list.html) Define an independent template. This means you can highly customize these pages according to your display needs, creating uniquely characteristic tag aggregation pages.

By flexibly utilizing the features provided by the Anqi CMS,tagDataList/tagDetail/tagListandpaginationTags such as [auto], you can provide website users with intuitive and efficient tag browsing experience, whether it is the organization and management of website content, or the optimization of users' discovery path of information.

Frequently Asked Questions (FAQ)