In website content operation, especially when the list content of articles, products, and other items becomes increasingly rich, how to efficiently display this information while ensuring user experience and website performance is a problem that requires careful consideration.A long list page not only loads slowly, but also makes visitors tired.It is particularly important to reasonably introduce the pagination display function at this time.
AnQiCMS as a powerful content management system, fully considers this operation demand.It provides intuitive and flexible template tags, helping us easily implement pagination display of article lists, making the website content clear and orderly, while also considering access speed and the convenience of user browsing.
Enable pagination mode for article list
To implement the pagination display of article lists in AnQiCMS, we mainly use two core template tags:archiveListandpaginationFirstly, we need to usearchiveListLabel to retrieve article data and clearly inform the system that we want to display these contents in a paginated form.
In the template file, when you need to display a paged article list, you can use it in this wayarchiveListTags:
{% archiveList archives with type="page" limit="10" %}
{# 循环输出每页的文章内容 #}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
<div>{{item.Description}}</div>
<div>
<span>{% categoryDetail with name="Title" id=item.CategoryId %}</span>
<span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>{{item.Views}} 阅读</span>
</div>
</a>
{% if item.Thumb %}
<a href="{{item.Link}}">
<img alt="{{item.Title}}" src="{{item.Thumb}}">
</a>
{% endif %}
</li>
{% empty %}
<li>
该列表没有任何内容
</li>
{% endfor %}
{% endarchiveList %}
In this code block,archiveList archives with type="page" limit="10"It is the key.
archivesIt is a variable name we define, which will carry the article data of the current page. You can name it as needed.type="page"Clearly inform AnQiCMS that this is a paginated list. Only by settingtype="page",paginationthe tag can be correctly identified and page information generated.limit="10"It sets the number of articles displayed per page, here it is 10 articles per page. You can adjust this value based on website design and content density.
By{% for item in archives %}We can loop through and display each article on the current page one by one, including the article title, description, category, publication time, and view count. If the current list has no articles,{% empty %}The content of the block will be displayed.
Carefully crafted pagination navigation
It is not enough to simply display a list of articles; users also need a clear and easy-to-understand pagination navigation to browse the content of different pages. At this point,paginationtags come into play. They can be used to classify and organize content.archiveListTag gets the pagination data, automatically generates 'Home', 'Previous Page', 'Next Page', and specific page number links.
paginationTags usually follow.archiveListAfter the tag, it is used to display pagination navigation, here is an example of its usage:
{# 分页代码 #}
<div class="pagination">
{% pagination pages with show="5" %}
<ul>
<li>总数：{{pages.TotalItems}}条，总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
<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>
{% endpagination %}
</div>
Let's interpret it in detailpaginationParts of the tag:
pagesThis is a custom variable name that contains all the information related to pagination, such as the total number of articles (TotalItems)、total number of pages (TotalPages)、current page (CurrentPage) and so on.show="5"The parameter controls the maximum number of page numbers displayed in the middle page area. In this example, it will display up to 5 page number links before and after the current page.- In
{% pagination pages with show="5" %}and{% endpagination %}Among them, we can flexibly organize the HTML structure of pagination navigation. pages.FirstPage/pages.LastPage/pages.PrevPage/pages.NextPageThey represent the objects of home page, last page, previous page, and next page, and they all containName(display name) andLink(Link address).pages.Pagesis an array that contains the pagination objects in the middle. We can traverse these page numbers by{% for item in pages.Pages %}and useitem.Nameanditem.Linkto generate page links.{% if pages.FirstPage.IsCurrent %}active{% endif %}Such conditional judgment can help us add specific CSS styles to the current page number, improving the user experience.
Comprehensive Application Example
toarchiveListandpaginationTo combine labels, a complete and functional pagination page of an article list is constructed. For example, an article list pagearticle/list.htmlThe core code may look like this:
{# 列表页面顶部可能包含面包屑、分类信息等 #}
<div class="article-list-container">
<ul>
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<li class="article-item">
<a href="{{item.Link}}">
<h3>{{item.Title}}</h3>
<p>{{item.Description}}</p>
<div class="meta">
<span>分类: {% categoryDetail with name="Title" id=item.CategoryId %}</span>
<span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>浏览量: {{item.Views}}</span>
</div>
</a>
</li>
{% empty %}
<li class="no-content">
当前分类下还没有文章哦。
</li>
{% endfor %}
{% endarchiveList %}
</ul>
{# 分页导航区域 #}
<div class="pagination-nav">
{% pagination pages with show="5" %}
<div class="summary">
共 {{pages.TotalItems}} 篇文章，分 {{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页
</div>
<ul class="page-numbers">
<li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
</li>
{% if pages.PrevPage %}
<li>
<a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
</li>
{% endif %}
{% for item in pages.Pages %}
<li class="{% if item.IsCurrent %}current{% endif %}">
<a href="{{item.Link}}">{{item.Name}}</a>
</li>
{% endfor %}
{% if pages.NextPage %}
<li>
<a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
</li>
{% endif %}
<li class="{% if pages.LastPage.IsCurrent %}active{% endif %}">
<a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
</li>
</ul>
{% endpagination %}
</div>
</div>
A friendly reminder and practical suggestions:
- Customize the style:The above code only provides the HTML structure, you can customize it according to the overall style of the website, to
.pagination-nav/.page-numbers/.currentAdd custom CSS styles to the class name to make it beautiful and easy to use. - Reasonable settings
limitValue:limitThe parameter determines the number of articles displayed per page.Too few may cause frequent page flipping, and too many may affect page loading speed and user browsing efficiency.Suggest adjusting according to the content type and user habits. - SEO friendliness:AnQiCMS has taken SEO factors into account in the generation of pagination links, in conjunction with its built-in pseudo-static feature, it can ensure that pagination pages can be correctly crawled and indexed by search engines.
By following these steps, you can easily implement the pagination function of the article list in AnQiCMS, providing visitors with a more smooth and efficient browsing experience.
Frequently Asked Questions (FAQ)
Q1: How do I fix the incorrect pagination page number display or the inability to jump with a click?
A1:First, please checkarchiveListin the tagtypewhether the parameters are set as"page". If not,paginationThe label cannot retrieve the correct pagination data. Secondly, confirm that the HTML structure of the pagination navigation in your template file is correctly referenced.pagesVariables and their sub-properties (such aspages.FirstPage.Linkwait).Finally, if the website uses pseudo-static, make sure the pseudo-static rules are configured correctly and can correctly parse pagination URLs.In most cases, the default pseudo-static rules of AnQiCMS can well support pagination.
Q2: How to adjust the number of articles displayed per page?
A2:The number of articles displayed per page is controlled byarchiveListlabel'slimitthe parameter. For example, if you want to display 15 articles per page, just setlimit="10"is modified tolimit="15"It will be adjusted. After adjustment, AnQiCMS will automatically recalculate the total number of pages and pagination links.
Q3: Will the pagination feature affect the website's search engine optimization (SEO)?
A3:AnQiCMS has considered SEO factors when designing the pagination feature. It generates standardized pagination links and is usually passed throughrel="next"andrel="prev"Property (if the template supports output) indicates the relationship between pages to search engines, avoiding duplicate content issues. Just set it reasonablylimitEnsure that each pagination page has enough unique and high-quality content, and cooperate with the powerful SEO tools of AnQiCMS (such as Sitemap generation, static URLs, etc.), the pagination feature will not have a negative impact on the website's SEO, but will improve the user experience and indirectly promote the SEO effect.