As a website operator who is well-versed in the operation of AnQiCMS, I understand that it is crucial to efficiently organize and present a large number of articles in content display.The pagination display function not only greatly enhances the user's browsing experience, but also avoids visual fatigue caused by too much content on a single page, and is an indispensable part of the Search Engine Optimization (SEO) strategy.In AnQiCMS, the pagination display of the article list is achieved, thanks to its flexible template engine and dedicated tag system, the whole process is clear and efficient.
The core principle of implementing pagination display for the article list
The AnQiCMS content management system allows us to control the display of the website's frontend by defining template files. The pagination display feature of the article list is essentially completed by the collaboration of two core template tags: archiveListThe label is responsible for retrieving article data from the database and performing pagination.paginationThe label is responsible for generating pagination navigation links on the user interface. This clear division of labor ensures the effective separation of data logic and display logic, making template development more intuitive.
AnQiCMS's template files follow the syntax similar to Django template engine, variables are enclosed in double curly braces{{变量}}Definition, while conditional judgments, loop controls, and other logical operations are represented using single curly braces and the percent sign{% 标签 %}Definition, and tags are usually used in pairs. This provides strong support for us to build dynamic article lists and pagination navigation.
Prepare template files
In AnQiCMS, the article list page usually selects the corresponding template file based on the model type and category ID. According to the template making conventions, the list page template files are generally stored in/templateTemplate folder, and follow{模型table}/list.htmlor{模型table}/list-{文档分类ID}.htmlThe naming format. For example, if your article model table name isarticle, and the list page is not bound to a specific category, then you may need to editarticle/list.htmlFile to add pagination logic. If your website uses a flat file organization mode, it might bearticle_list.html. Make sure you are editing the correct list page template file.
Get paginated article list data
Firstly, we need to use the list page templatearchiveList标签来获取需要分页显示的文章数据。这个标签是AnQiCMS用于查询和展示文章列表的核心工具。为了实现分页，我们必须将typeparameter settings"page".
The following is an example of fetching a list of paginated articles.
{% archiveList archives with type="page" moduleId="1" limit="10" %}
{% for item in archives %}
<div class="article-item">
<a href="{{item.Link}}">
{% if item.Thumb %}
<img src="{{item.Thumb}}" alt="{{item.Title}}">
{% endif %}
<h3>{{item.Title}}</h3>
<p>{{item.Description}}</p>
</a>
<div class="article-meta">
<span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
<span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>阅读量：{{item.Views}}</span>
</div>
</div>
{% empty %}
<p>当前分类下没有找到任何文章。</p>
{% endfor %}
{% endarchiveList %}
In this code, we define a variable namedarchivesto store the article list data.type="page"Explicitly tell the system that pagination needs to be processed for this list.moduleId="1"Specified the model ID of the article (for example, 1 usually represents the article model).limit="10"Then 10 articles per page were set.forWe traversed inside the loop.archivesEach article in theitem），and displayed the article's thumbnail, title, description, category, publish date, and reading volume information.emptyBlock displays a prompt message when there is no article.
Render pagination navigation
After successfully obtaining and displaying the paginated article list, the next step is to generate clickable pagination navigation links. AnQiCMS providespaginationLabel. This label usually follows.archiveListTags{% endarchiveList %}.
Here is an example of rendering pagination navigation:
<div class="pagination-container">
{% pagination pages with show="5" %}
<ul class="pagination">
{# 首页链接 #}
<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a class="page-link" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
</li>
{# 上一页链接 #}
{% if pages.PrevPage %}
<li class="page-item">
<a class="page-link" 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 class="page-link" href="{{item.Link}}">{{item.Name}}</a>
</li>
{% endfor %}
{# 下一页链接 #}
{% if pages.NextPage %}
<li class="page-item">
<a class="page-link" href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
</li>
{% endif %}
{# 末页链接 #}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a class="page-link" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
</li>
</ul>
<div class="pagination-info">
总计 {{pages.TotalItems}} 篇文章，共 {{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页。
</div>
{% endpagination %}
</div>
In this example, we will store pagination information inpagesthe variable and setshow="5"To control the maximum number of middle page number links displayed in the pagination navigation. We usepages.FirstPage/pages.PrevPage/pages.NextPageandpages.LastPageto generate the links for home page, previous page, next page, and last page.pages.PagesArray iteration generates the middle page link and passesIsCurrentAttribute judgment of the current page and addsactiveThe total number of articles, total pages, and current page number are also displayed, enhancing the user's perception of the page content.
Code interpretation and optimization suggestions
The code snippet above provides the basic framework for implementing article list pagination display in AnQiCMS.In practical applications, you can further customize and optimize according to the design of the website and the needs of user experience.
archiveListTagslimitThe parameter is the key to controlling the number of articles displayed per page, which can be adjusted according to content density and user habits.categoryIdThe parameter allows you to create pagination for the article list of a specific category, if you want to display all categories of articles, you can leave it unspecified or configure it in the background.orderThe parameter can change the sorting method of the article, for example, sort by publication time in reverse order (id desc) or by views (views desc).
In the article list, we usecategoryDetailLabel to obtain the name of the category to which the article belongs, making the article information more complete. Timestamp formatting is done throughstampToDateLabel implementation, you can adjust the date and time display format as needed.
About SEO, AnQiCMS pseudo-static rules (help-plugin-rewrite.mdMentioned) It can ensure that the pagination link generates a friendly URL structure, for example/category/list-1.html//category/list-2.htmlThis helps search engines better crawl and index your pagination content. Although the document does not directly mention settingrel="prev"andrel="next"Attributes, but modern search engines are able to handle pagination content well, it is important to ensure that pagination links can be crawled and content uniqueness.
By combining these tags, AnQiCMS makes it a direct and flexible task to implement pagination display of article lists, helping you build a user-friendly and SEO-optimized website.
Common Questions and Answers (FAQ)
How to adjust the number of articles displayed per page?You can modify
archiveListthe tag inlimitParameter to adjust the number of articles displayed per page. For example, if you want to display 15 articles per page,limit="10"Change tolimit="15".How is the URL structure of pagination links determined?The URL structure of pagination links is mainly determined by the 'pseudo-static rules' set in the AnQiCMS backend.The system provides a variety of preset modes, such as "numeric mode" or "categorized naming mode", and you can also customize the rules.
{page}Use a variable to represent the page number. Make sure your pseudo-static rules are correctly configured to generate friendly pagination URLs.Does the pagination feature support SEO optimization?Yes, the pagination feature of AnQiCMS is SEO-friendly.System supports pagination by generating clear, SEO-friendly static URLs.This means that each page of content has a unique URL, which is convenient for search engine indexing.
rel="prev/next"Tags, but the pseudo-static URL structure of AnQiCMS itself has a positive effect on SEO, ensuring the visibility and accessibility of content.