Optimize AnQiCMS Tag List: How to Add Pagination Skillfully to Enhance User Browsing Experience?

As a senior website operations expert, I am well aware that the core value of a content management system lies in its provision of efficient, customizable, and user-friendly solutions.AnQiCMS, this enterprise-level CMS built on the Go language is committed to becoming a powerful assistant for small and medium-sized enterprises and content operation teams with its high performance, modular design, and rich SEO tools.In daily content operation, we often encounter the problem of the continuous growth of website content, especially when there are many Tag tags, how to effectively manage and improve user experience.

Imagine when your website has hundreds even thousands of tags, if a user visits the Tag list page, they will be faced with an endless scrolling page.This not only makes users feel tired, it is difficult to quickly find interesting topics, but it may also lead to a decrease in the efficiency of search engine crawling, affecting the overall SEO performance of the website.This is a key step to enhance user experience and optimize the website structure by adding pagination functionality to the Tag list page.

AnQiCMS was designed with full consideration of the flexibility and scalability of content display, with a template engine syntax similar to Django, which allows content operators to easily handle the front-end display.Adding pagination to the Tag list is an excellent practice utilizing the powerful template function of AnQiCMS.This does not require in-depth backend code modification, only a simple and clever adjustment at the front-end template level.

Embrace Order: The Necessity of Pagination for Long Tag Lists

With the continuous enrichment of website content, Tag labels as a powerful content organization method can help users explore website information from different dimensions. However, when the number of Tags reaches a certain scale, a long and disordered Tag list page will bring multiple challenges:

  1. User experience deteriorates:Users are prone to feel overwhelmed when faced with a large amount of information, find it difficult to focus, and may therefore give up browsing.
  2. Page loads slowly:Rendering a large number of Tag tags can lead to increased page load time, which directly affects user retention and bounce rate.
  3. SEO optimization is limited:The search engine crawler may not be able to effectively crawl deep or backend Tag pages, and overly long page content may also dilute the page weight.

Therefore, adding pagination to the Tag list can not only make the page load faster and browsing smoother, but also effectively guide users and search engines, enhancing the overall usability and visibility of the website.

AnQiCMS's template magic: the way of pagination from complex to simple in English

AnQiCMS's template system is designed to be very intuitive, allowing us to call backend data and render through preset tags (Tag). For pagination of the Tag list, we will focus on two core template tags:tagList(Used to obtain tag data) andpagination(Used to generate pagination navigation).

Generally, the Tag list page corresponds to the template folder intag/index.htmlortag/list.htmlfiles. We will make modifications to such files.

Core Implementation: Inject pagination logic into Tag list

To implement pagination in AnQiCMS, no complex backend programming is required. Everything can be done at the template level, which greatly reduces the threshold for operation.

Firstly, we need to adjust the method used to retrieve the Tag listtagListLabel. This label defaults to retrieving all matching Tags, but when we want it to support pagination, we need to addtype="page"a parameter and specify the number of tags to display per page, for examplelimit="20"like this,tagListNot only will it return the tag data of the current page, but it will also automatically generate a pagination object namedpagesfor subsequentpaginationUse the label.

Next, it is to introducepaginationThis tag will render the actual pagination navigation. This tag will receivetagListby this tag.pagesobject, and generates 'Home', 'Previous Page', 'Next Page' as well as the page number links in the middle according to the configuration. It also providesshow参数，让我们可以控制中间页码链接显示的数量，比如show="5"indicating that up to 5 middle page numbers are displayed.

分页标签会暴露一系列有用的字段，例如pages.FirstPage/pages.PrevPage/pages.Pages（一个包含所有中间页码的数组）、pages.NextPageandpages.LastPageEach page object includesName(page name, such as "Home", "1", "2") andLink(the corresponding URL link) as well asIsCurrent(whether it is the current page).

Let us understand how totag/index.htmlortag/list.htmlapply this pagination logic in:

{# 假设这是您的 tag/index.html 或 tag/list.html 模板文件 #}

{# 引入Tag列表数据，并开启分页模式，每页显示20个标签 #}
{% tagList tags with type="page" limit="20" %}
    <div class="tag-list">
        {% for item in tags %}
            <a href="{{ item.Link }}" class="tag-item">
                <h3>{{ item.Title }}</h3>
                <p>{{ item.Description }}</p>
                {# 您可以根据需要添加更多标签信息，例如Logo、内容等 #}
            </a>
        {% empty %}
            <p>目前还没有任何标签。</p>
        {% endfor %}
    </div>
{% endtagList %}

{# 分页导航区域，将由 tagList 生成的 pages 对象传给 pagination 标签 #}
<div class="pagination-nav">
    {% pagination pages with show="5" %}
        <ul class="pagination-list">
            {# 显示首页链接 #}
            <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                <a href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
            </li>

            {# 显示上一页链接 #}
            {% if pages.PrevPage %}
            <li class="page-item">
                <a 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 href="{{ item.Link }}">{{ item.Name }}</a>
            </li>
            {% endfor %}

            {# 显示下一页链接 #}
            {% if pages.NextPage %}
            <li class="page-item">
                <a href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a>
            </li>
            {% endif %}

            {# 显示末页链接 #}
            <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                <a href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a>
            </li>
        </ul>
        <p class="pagination-info">总计 {{ pages.TotalItems }} 个标签，共 {{ pages.TotalPages }} 页，当前第 {{ pages.CurrentPage }} 页。</p>
    {% endpagination %}
</div>

In this code,tagListis responsible for getting the tag data,paginationwhile the tags take over the rendering of the pagination data. You can see,pages.FirstPage.Link/pages.PrevPage.Link等都直接提供了可点击的URL，IsCurrentThe property can help you add CSS styles to the current page to provide better visual feedback.This is the representation of the efficiency of AnQiCMS, a front-end and back-end separated, template-driven development mode.

不仅仅是分页：提升用户体验与SEO表现

Adding pagination to the Tag list brings more benefits than just a neat page:

  • A more fluid user experience:Users no longer need to endlessly scroll, but can quickly jump to different page numbers through clear pagination navigation, browse more tags, and improve exploration efficiency.
  • Optimized page loading speed:Each page loads a small number of tags, significantly reducing the amount of data and rendering time on a single page, thus improving the page loading speed, especially for mobile user experience.
  • Improve search engine crawling:分页让每个Tag页面都拥有独立的、结构化的URL，搜索引擎爬虫可以更容易地抓取和索引所有的标签页面，提高了内容的可见性。AnQiCMS supports pseudo-static and 301 redirect management, ensuring that the pagination URL structure is SEO-friendly.
  • Enhance website depth and authority:More indexable pages mean that the depth of the website's content increases, which helps to establish a higher authority in search engines.

Concluding remarks

AnQiCMS as a content management system designed for efficient operation, with its powerful template functions and flexible extensibility, allows content operators to easily cope with the challenges brought by website growth.Through the above simple template adjustment, you can add a beautiful and practical pagination feature to AnQiCMS's Tag list. This not only greatly enhances the user's browsing experience but also injects new vitality into the website's SEO performance.The Auto CMS is dedicated to providing a stable, flexible and efficient content management solution, giving strong support to your content marketing and global layout.

Common Questions (FAQ)

问：Why does the pagination navigation not display after adding pagination to my Tag list?

Answer:The most common reason is that you may have forgotten to set thetagListsetting in the labeltype="page"parameter, or did not specifylimitParameter to limit the number of tags displayed per page.paginationTag requires `tagList`