In AnQiCMS (AnQiCMS) template development, implementing different display parameters for pagination of different content types (such as articles, products, tags) is an important link to improve user experience and website professionalism. As a senior website operations expert, I know that refined content display can effectively guide users, so today we will delve into how to skillfully use it in AnQiCMS.paginationlabel'sshowParameters, achieve this goal.
Fine-grained control of pagination display: How AnQiCMS customizes for different content typesshowParameter
In website operation, we often find that users browsing the "article" list tend to prefer more page navigation for quick jumps;When browsing the "product" list, due to the large space occupied by product images, the number of page navigation may need to be reduced to avoid visual clutter;For the "label" aggregation page, the page number settings may be different.AnQiCMS is a flexible and highly customizable content management system that fully considers these operational requirements, allowing us to easily implement these refined controls through its powerful template tag system.
The core lies in the template tags of AnQiCMSpagination. This tag is specifically used to generate pagination navigation, and one of its most important parameters isshow.showThe parameter allows us to specify the maximum number of middle page number links to be displayed in the pagination navigation. For example,show="5"Means the pagination bar will display the current page and up to 5 page number links (if the total number of pages is sufficient). Understanding this, we can set it separately in different types of content list templates.showParameters, to implement personalized pagination display.
Overview of AnQiCMS pagination mechanism.
Before delving into customization, we first need to understand the pagination principle of AnQiCMS. Whether it is an article list, product list, or tag-related content list, AnQiCMS usually first uses specific list tags such asarchiveListUsed for articles and products,tagDataListUsed for tag-related content) to query and retrieve data. When using these list tags, if we willtypethe parameter to"page", then these tags will also generate a pagination information list when returning the content listpagesobject. Subsequently, ourpaginationtags will receive and parse thispagesAn object, thus rendering a complete pagination navigation.
This means,paginationThe tag itself is generic; it does not care whether it is generating pagination for articles, products, or tags, it only responsible for the input.pagesObjects and their own configurationsshowParameters to render the page. Therefore, different parameters need to be applied for different content typesshowParameters, we just need to find and configure them in the corresponding template filespaginationTag it and it is.
Customize pagination display for the article list
Imagine that your website has a large number of technical articles, and users may need to frequently switch between different pages to find the information they need.At this time, we may hope that the pagination navigation of the article list page can display more page numbers.
Assuming your article list template file is locatedtemplate/default/archive/list.htmlortemplate/default/article/list.html(The specific path depends on your template structure and model settings), you can configure it like this:
{# template/default/archive/list.html (或对应的文章模型列表模板) #}
{# 使用 archiveList 标签获取文章列表数据，并启用分页模式 #}
{% archiveList articles with type="page" moduleId="1" limit="10" %}
{# 这里是遍历 articles 变量，显示每篇文章的标题、简介等内容的代码 #}
{% for item in articles %}
<div class="article-item">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description }}</p>
<span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</div>
{% empty %}
<p>暂时没有更多文章。</p>
{% endfor %}
{% endarchiveList %}
{# 在这里配置文章列表的分页导航，我们希望显示7个页码链接 #}
<div class="pagination-area">
{% pagination pages with show="7" %}
{# 这里是分页链接的详细结构，例如首页、上一页、中间页码、下一页、末页等 #}
<a class="first-page {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{ pages.FirstPage.Link }}">首页</a>
{% if pages.PrevPage %}<a class="prev-page" href="{{ pages.PrevPage.Link }}">上一页</a>{% endif %}
{% for item in pages.Pages %}
<a class="page-number {% if item.IsCurrent %}active{% endif %}" href="{{ item.Link }}">{{ item.Name }}</a>
{% endfor %}
{% if pages.NextPage %}<a class="next-page" href="{{ pages.NextPage.Link }}">下一页</a>{% endif %}
<a class="last-page {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{ pages.LastPage.Link }}">末页</a>
{% endpagination %}
</div>
By usingshow="7"Set in the pagination tag of the article list template, your readers will be able to see a wider page navigation when browsing articles, making it convenient to quickly browse a large amount of content.
Customize pagination display for product list
Compared to articles, product list pages usually focus on images and brief information, and the layout may be quite compact.In order to keep the page neat and focus on the product itself, we may want to have fewer page numbers in the pagination navigation.
Assuming your product list template file is locatedtemplate/default/product/list.htmlortemplate/default/archive/list.html(WhenmoduleIdWhen corresponding to the product model), you can configure it in the following way:
{# template/default/product/list.html (或对应的产品模型列表模板) #}
{# 使用 archiveList 标签获取产品列表数据，并启用分页模式 #}
{% archiveList products with type="page" moduleId="2" limit="8" %}
{# 这里是遍历 products 变量，显示每个产品的图片、名称、价格等内容的代码 #}
{% for item in products %}
<div class="product-item">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
<h4><a href="{{ item.Link }}">{{ item.Title }}</a></h4>
<p>价格: {{ item.Price }}</p>
</div>
{% empty %}
<p>暂时没有更多产品。</p>
{% endfor %}
{% endarchiveList %}
{# 在这里配置产品列表的分页导航，我们希望只显示3个页码链接，更简洁 #}
<div class="pagination-area">
{% pagination pages with show="3" %}
{# 这里同样是分页链接的详细结构 #}
<a class="first-page {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{ pages.FirstPage.Link }}">首页</a>
{% if pages.PrevPage %}<a class="prev-page" href="{{ pages.PrevPage.Link }}">上一页</a>{% endif %}
{% for item in pages.Pages %}
<a class="page-number {% if item.IsCurrent %}active{% endif %}" href="{{ item.Link }}">{{ item.Name }}</a>
{% endfor %}
{% if pages.NextPage %}<a class="next-page" href="{{ pages.NextPage.Link }}">下一页</a>{% endif %}
<a class="last-page {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{ pages.LastPage.Link }}">末页</a>
{% endpagination %}
</div>
In this case, we willshowthe parameter to"3"Making the pagination navigation on the product list page more compact, with the product's