In the template development of AnQiCMS, implementing different display parameters for pagination of different content types (such as articles, products, tags) is an important aspect for improving user experience and website professionalism. As an experienced website operations expert, I know that a refined content display can effectively guide users. Today, let's delve into how to巧妙运用AnQiCMS巧妙运用paginationTagsshowParameter, achieve this goal.
Fine-grained control of pagination display: How AnQiCMS customizes for different content typesshowParameters
In website operation, we often find that when users browse the 'articles' list, they may tend to see more page navigation for quick jumps; when browsing the 'products' list, due to the larger space occupied by product images, the number of page navigation may need to be less to avoid visual clutter; for the 'tags' aggregation page, the setting of the number of pages may be different again.AnQiCMS as a flexible and highly customizable content management system, fully considers these operation requirements, and can easily achieve these fine-grained controls through its powerful template tag system.
The core lies in the template tags of AnQiCMSpaginationThis tag is specifically used to generate pagination navigation, and one of its most important parameters isshow.showallows us to specify the maximum number of middle page number links to be displayed in the pagination navigation. For example,show="5"意味着分页条会显示当前页以及前后共5个页码链接（如果总页数足够）。理解了这一点，我们就可以通过在不同类型的内容列表模板中分别设置showParameters, to implement personalized pagination display.
Overview of AnQiCMS pagination mechanism
Before deep customization, we first need to understand the pagination mechanism of AnQiCMS. Whether it's an article list, product list, or tag-related content list, AnQiCMS usually uses specific list tags (such asarchiveListUsed for articles and products,.tagDataListUsed for content associated with tags) to query and retrieve data. When using these list tags, if we willtypeparameter settings"page"，then these tags will also generate a list containing all pagination informationpagesobject. Next, ourpaginationtags will receive and parse thispagesThe object is rendered to display the 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 is only responsible for generating pagination based on the parameters passed in.pagesObjects and their own configurationsshowparameters to render the page. Therefore, to apply different parameters to different content types,showwe only need to find and configure them in the corresponding template filespaginationLabel it.
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 required information.This is when we might want the pagination navigation on the article list page to show 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 see a wider page navigation when browsing articles, making it easier to quickly browse a large amount of content.
To customize pagination display for the product list
Compared to the article, the product list page usually focuses on images and brief information, and the layout may be more compact.To maintain the cleanliness of the page and keep the focus on the product itself, we may want to have fewer page numbers in the pagination navigation.
Assuming your product list template file is located attemplate/default/product/list.htmlortemplate/default/archive/list.html(when)moduleIdcorresponding to the product model), you can configure it like this:
{# 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>
Here, we willshowparameter settings"3"，makes the pagination navigation on the product list page more compact, with the product's