Anqi CMS: Precisely locate and display the list of articles under a specific tag

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 also benefiting the SEO performance of the website.By adding meaningful tags to articles, we can connect similar content 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 features of 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 AnQi CMS backend content management module, you can conveniently create and manage website tags.When you publish 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 "technical tutorial" category, and can also be tagged with "SEO", "content marketing", "user experience", and so on.When a user is browsing a website, by clicking on a label, they can see all articles with that label.

Get and display the list of articles under a specific tag

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

You usually will use a dedicated page template for displaying articles under tags (for example, in your template directory)/template/您的模板名/tag/list.html). Use it.

Dynamically retrieve the articles under the current tag

When a user visits a specific tag page (for example您的域名/tag/SEO), Anqi CMS will recognize the tag information of the current page. In this case,tagDataListthe tag does not need to be specified explicitlytagIdIt will automatically retrieve the current page's tag ID and retrieve 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 tag page and assign it tocurrentTagVariable.
  • {% tagDetail tagDescription with name="Description" %}Get the description of the current tag.
  • {% tagDataList archives with type="page" limit="10" %}Is the core, it will query the articles associated with the current tag.type="page"Means enabling pagination feature,limit="10"Then set 10 articles per page to be displayed.
  • {% for item in archives %}Loop through the list of articles obtained,itemThe variable contains the details of each article, such as the title,item.Title), link (item.Link), description (item.Description) and so on.
  • {% empty %}the block will bearchivesWhen the list is empty, it displays the specified content, which is a very friendly design that avoids a blank page.

Add pagination navigation to the article list

When there are many articles under a tag, the pagination feature becomes particularly important. CombinedtagDataListoftype="page"Parameters, we can easily implement pagination navigation.

In the abovetagDataListAfter the loop ends, add immediately.paginationLabel it:

{# ... 前面的 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" %}It will generate pagination information and assign it topagesVariable.show="5"It indicates that up to 5 page number buttons are displayed. 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 at the bottom of each article detail page,tagListTags to display all the tags associated with the current article. Each tag can link to its correspondingtag/list.htmlpage, making it 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 retrieved are for the current article.

  • SEO friendliness:The AnQi CMS supports pseudo-static URLs and custom URL aliases, ensuring that your tag page has a clear, friendly URL structure (for example),您的域名/tag/SEO.htmlIt is crucial for search engine optimization. At the same time, setting appropriate TDK (Title, Description, Keywords) for the tag page is also a key factor in improving search engine visibility.

  • Custom tag page template:Security CMS allows you to set the tag home page (tag/index.html) and tag article list page (tag/list.htmlThis defines an independent template. This means you can customize these pages according to content display requirements, creating a uniquely characteristic tag aggregation page.

By flexibly using the Anqi CMS providedtagDataList/tagDetail/tagListandpaginationTags, you can provide website users with an intuitive and efficient tag browsing experience, whether it is for the organization and management of website content, or for the path of users discovering information, it will be significantly optimized.

Frequent Questions (FAQ)