How to display all articles under a specified Tag with pagination support?

As an experienced CMS website operation personnel, I know that high-quality and easy-to-understand content is crucial for user experience.Today, we will discuss how to implement the article list display under specified tags in Anqi CMS, and add practical pagination functions to it, which is of great importance for improving user browsing experience and website SEO.

Understanding the importance of the tag page

In Anqi CMS, a tag (Tag) is a powerful content organization tool.They allow us to associate content from different categories or even different models through common themes or keywords, forming unique aggregation pages.A well-constructed tag page can not only help users quickly find the content they are interested in, but also provide more crawling entries for search engines and improve the keyword ranking of the website.Display the article list under the specified tag is the core link to build these valuable pages.

Locate the template file

According to the Anqi CMS template design agreement, the list of tag-related articles is usually located in your template directory.tag/list.htmlThe file is responsible for rendering. If you are customizing a new template, make sure to create or modify this file under this path so that the system can correctly identify and apply it.

Core tag: Get the list of articles under the specified tag

Intag/list.htmlIn the file, we will use the built-in Anqi CMS oftagDataListTag to get all articles associated with the current tag. This tag feature is powerful, able to filter content based on multiple conditions.

To get the list of articles under the current tag being accessed.tagDataListThe tag will automatically identify the tag ID of the current page, no need for us to specify it manuallytagIdparameter. If you indeed need to get articles with a specific ID tag, you can pass it in the form oftagId="X".

In order to implement pagination, we must settypethe parameter to"page". At the same time, throughlimitparameters to control the number of articles displayed per page. For example,limit="10"this means that 10 articles will be displayed per page.

A basictagDataListAs shown in the usage, we will assign the list of articles obtained toarchivesVariable:

{% tagDataList archives with type="page" limit="10" %}
    {% for item in archives %}
        <article>
            <h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
            <p>{{ item.Description|truncatechars:150 }}</p>
            {% if item.Thumb %}
                <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
            {% endif %}
            <time>{{ stampToDate(item.CreatedTime, "2006-01-02") }}</time>
            <span>浏览量：{{ item.Views }}</span>
        </article>
    {% empty %}
        <p>当前标签下没有任何文章。</p>
    {% endfor %}
{% endtagDataList %}

In the above code snippet, we traversedarchiveseach article in the variable (itemIt shows the title, link, description, thumbnail, publish time, and views.Description|truncatechars:150It is a filter used to truncate the description text to 150 characters.stampToDateTags are used to format timestamps into readable date formats.

Implement pagination functionality

After the content of the article list is displayed, we need to introducepaginationtags to generate pagination navigation. This tag is related totagDataListCombine usage, can automatically identifytype="page"Pagination data under the mode.

paginationLabels usually receive apagesA variable that contains all the information needed for pagination, such as the total number of items, total number of pages, current page number, as well as links to the previous page, next page, first page, last page, and middle page numbers.showParameters can control the maximum number of page buttons displayed in the pagination navigation. For example,show="5"It will display up to 5 page numbers around the current page.

The usage examples of pagination tags are as follows:

<div class="pagination-container">
    {% pagination pages with show="5" %}
        {% if pages.FirstPage %}
            <a class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
        {% endif %}

        {% if pages.PrevPage %}
            <a class="page-link" href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a>
        {% endif %}

        {% for item in pages.Pages %}
            <a class="page-link {% if item.IsCurrent %}active{% endif %}" href="{{ item.Link }}">{{ item.Name }}</a>
        {% endfor %}

        {% if pages.NextPage %}
            <a class="page-link" href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a>
        {% endif %}

        {% if pages.LastPage %}
            <a class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a>
        {% endif %}
    {% endpagination %}
</div>

Combine the article list and pagination function, a completetag/list.htmlThe template file content will include these two parts, ensuring that users can get a smooth and complete experience while browsing the tag aggregation content.

a complete template code example

Merge the above two parts of the code, you cantag/list.htmlbuild a fully functional tag article list page in the

{# tag/list.html #}

{# 获取当前标签的详细信息，用于页面TDK或标题展示 #}
{% tagDetail currentTag with name="Title" %}
{% tdk seoKeywords with name="Keywords" %}
{% tdk seoDescription with name="Description" %}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{ currentTag }} - {% tdk with name="Title" siteName=true %}</title>
    <meta name="keywords" content="{{ seoKeywords }}">
    <meta name="description" content="{{ seoDescription }}">
    {# 引入您的CSS文件 #}
    <link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
</head>
<body>
    {# 引入公共头部，如果您的模板有的话 #}
    {% include "partial/header.html" if_exists %}

    <main class="main-content">
        <section class="tag-articles">
            <h1>标签：{{ currentTag }}</h1>

            <div class="article-list">
                {% tagDataList archives with type="page" limit="10" %}
                    {% for item in archives %}
                        <article class="article-item">
                            <h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
                            <p class="article-description">{{ item.Description|truncatechars:150 }}</p>
                            {% if item.Thumb %}
                                <div class="article-thumb">
                                    <a href="{{ item.Link }}">
                                        <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
                                    </a>
                                </div>
                            {% endif %}
                            <div class="article-meta">
                                <time datetime="{{ stampToDate(item.CreatedTime, "2006-01-02T15:04:05") }}">发布于: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</time>
                                <span>浏览量: {{ item.Views }}</span>
                            </div>
                        </article>
                    {% empty %}
                        <p class="no-content-message">当前标签下暂时没有相关的文章。</p>
                    {% endfor %}
                {% endtagDataList %}
            </div>

            <div class="pagination-container">
                {% pagination pages with show="5" %}
                    <ul class="pagination">
                        {# 首页 #}
                        {% if pages.FirstPage %}
                            <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                                <a class="page-link" href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
                            </li>
                        {% endif %}
                        {# 上一页 #}
                        {% if pages.PrevPage %}
                            <li class="page-item">
                                <a class="page-link" href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a>
                            </li>
                        {% endif %}
                        {# 中间多页 #}
                        {% for item in pages.Pages %}
                            <li class="page-item {% if item.IsCurrent %}active{% endif %}">
                                <a class="page-link" href="{{ item.Link }}">{{ item.Name }}</a>
                            </li>
                        {% endfor %}
                        {# 下一页 #}
                        {% if pages.NextPage %}
                            <li class="page-item">
                                <a class="page-link" href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a>
                            </li>
                        {% endif %}
                        {# 尾页 #}
                        {% if pages.LastPage %}
                            <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                                <a class="page-link" href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a>
                            </li>
                        {% endif %}
                    </ul>
                {% endpagination %}
            </div>
        </section>
    </main>

    {# 引入公共底部，如果您的模板有的话 #}
    {% include "partial/footer.html" if_exists %}
</body>
</html>

Frequently Asked Questions (FAQ)

ask: Can I use nontag/list.htmlDisplay a list of articles with a specified Tag and pagination in the template?

Of course, you can use it in any template file (such as the homepageindex/index.htmlor a custom pagetagDataListLabel. In this case, you need to specify explicitly throughtagId="X"the parameter to specify which label's articles you want to display, and set it accordinglytype="page"andlimitParameters. Please note that generating pagination links may require you to manually construct the URL or ensure that your URL structure can correctly pass pagination parameters.

How to optimize the SEO performance of the tag page?

Answer: In addition to ensuring content quality and page loading speed, the SEO optimization of tab pages includes several key points.Firstly, make sure each tag has a unique, attractive name, and set meaningful SEO titles, keywords, and descriptions in the background.Secondly, keep the label content up to date and avoid having a large number of empty tab pages.Also, consider linking to the tag page in related articles, and including the URL of the tag page in the sitemap to help search engines discover and index.

Will pagination links be affected if I set custom static rules?

Answer: Anqi CMS'paginationLabels are usually smartly generated according to the pseudo-static rules you set in the background to create correct, SEO-friendly pagination links. As long as your pseudo-static rules are configured correctly (especially including{page}Parameters are used to handle pagination, the system is responsible for generating URLs that comply with the rules. If you encounter any problems, please check.plugin-rewrite.mdConfiguration guide to the static page rules in the document and ensure that your templatepaginationtag has not passedprefixunnecessary redefine the parameters.