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

As an experienced website operations expert, I am well aware of the core value of a content management system lies in its ability to provide efficient, customizable, and user-friendly solutions.AnQiCMS, this is an enterprise-level CMS built with Go language, 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 increasing website content, especially when the number of Tag tags is large, how to effectively manage and improve user experience.

Imagine when your website has hundreds or 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, but also difficult to quickly find topics of interest, which may also lead to a decrease in the efficiency of search engine crawling and affect the overall SEO performance of the website.At this time, adding pagination to the Tag list page has become a crucial step to improve user experience and optimize the website structure.

AnQiCMS was designed with full consideration of the flexibility and scalability of content display, and its template engine syntax similar to Django allows content operators to easily master the front-end display.To add pagination to the Tag list, it is an excellent practice to make full use of the powerful template function of AnQiCMS.This does not require in-depth modification of the backend code, just a simple and clever adjustment at the frontend template level.

Embrace Order: The Necessity of Introducing 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 is declining:Users easily feel overwhelmed when faced with a large amount of information, find it difficult to focus, and may therefore give up browsing.
  2. Page loading slow:Rendering a large number of Tag tags can cause the page loading time to increase, which directly affects user retention and bounce rate.
  3. SEO optimization is limited:Search engine crawlers may not be able to effectively crawl deep or backend Tag pages, and overly long page content may also dilute page weight.

Therefore, adding pagination to the Tag list not only allows the page to load faster and browse more smoothly, but also effectively guides users and search engines, enhancing the overall usability and visibility of the website.

The magic of AnQiCMS templates: the art of simplifying pagination

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

Generally, the Tag list page corresponds to the template foldertag/index.htmlortag/list.htmlfile. We will make modifications to such files.

Core implementation: Inject pagination logic to Tag list

To implement pagination in AnQiCMS, it does not require complex backend programming. Everything can be done at the template level, greatly reducing the operation threshold.

Firstly, we need to adjust the one used to obtain the Tag listtagListThe label defaults to fetching all matching Tags, but when we want it to support pagination, we need to addtype="page"parameters, and specify the number of tags to display per page, for examplelimit="20"Thus,tagListIt will not only return the tag data of the current page but also automatically generate a pagination object namedpagesfor subsequent usepaginationlabel usage

Next, it is time to introducepaginationThe tag to render the actual pagination navigation. This tag will receivetagListThe tag generatespagesAn object that generates the links for 'Home', 'Previous Page', 'Next Page' and the page number links in the middle. It also providesshowParameters, allowing us to control the number of middle page link displays, for exampleshow="5"This means that up to 5 middle page numbers can be displayed.

Pagination tags will expose a series of useful fields, such aspages.FirstPage/pages.PrevPage/pages.Pages(an array containing all the middle page numbers),pages.NextPageandpages.LastPage. Each page object includesName(page names, 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:

{# 假设这是您的 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 block,tagListis responsible for getting the label data, whilepaginationthe label then takes over the rendering of the pagination data. As you can see,pages.FirstPage.Link/pages.PrevPage.LinkAll of them directly provide clickable URLs,IsCurrentThe attribute can help you add CSS styles to the current page to provide better visual feedback.This is the embodiment of AnQiCMS's efficiency, a front-end and back-end separation, template-driven development mode.

More than pagination: improve user experience and SEO performance

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

  • A more fluid user experience:Users no longer need to endlessly scroll but can quickly navigate to different page numbers through clear pagination, browse more tags, and improve exploration efficiency.
  • Optimized page loading speed:Load only a small number of tags per page, which significantly reduces the amount of data and rendering time on a single page, thereby improving the page loading speed, especially for mobile user experience.
  • Improve search engine crawling:Pagination allows each Tag page to have an independent, structured URL, making it easier for search engine crawlers to crawl and index all tag pages, improving the visibility of the content.AnQiCMS supports pseudo-static and 301 redirect management, ensuring that the pagination URL structure is SEO-friendly.
  • Improve website depth and authority:More indexed pages mean the content depth of the website increases, which helps establish higher authority in search engines.

Conclusion

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

Frequently Asked Questions (FAQ)

Why does my Tag list still not show pagination navigation after adding pagination?

Answer:The most common reason is that you may have forgotten to specify thetagListSet in the labeltype="page"or you have not specifiedlimitParameters to limit the number of tags displayed per page.paginationTags need `tagList