As an experienced website operations expert, I am well aware of the importance of an efficient content management system (CMS) for website operations. AnQiCMS, with its high concurrency features of Go language and flexible template mechanism, provides us with great convenience.Among many features, how to effectively display a large number of documents and provide friendly pagination navigation is the key to enhancing user experience and content accessibility.archiveListHow to combine tags withpaginationThe label cleverly combines to realize the pagination navigation function of the document list.
In the template system of AnQiCMS,archiveListThe label is the core tool for obtaining the document list, whilepaginationTags focus on generating beautiful and practical pagination navigation.They are not operating independently, but rather collaborating to form a complete document pagination display solution.Understanding the functions and collaboration mechanisms of these tags is the foundation for building high-performance, user-friendly websites.
archiveList: The core of building the document list
Firstly, let's get to knowarchiveListLabel. It is mainly responsible for retrieving and outputting a set of documents that meet specific conditions from the database. When we want to add pagination functionality to the document list,archiveLista key parameter of the documenttype——is particularly important.
When we set the value of thearchiveListoftypeparameter settings"page"When, the AnQiCMS system understands, we not only need to obtain the document data of the current page, but also need the system to provide all the metadata required for pagination, such as the total number of documents, the total number of pages, and the current page number, etc. This metadata ispaginationLabel generation for pagination navigation base.
Excepttype="page"in addition to,archiveListIt also supports rich parameters for precise control of document filtering and sorting, such as:
moduleId：Specify the document of the content model to be retrieved (such as article model or product model).categoryId：Specify the document(s) under a certain category or multiple categories.limit：Define the number of documents displayed per page, which directly affects the pagination size.order：Control the sorting method of documents, such as in descending order of publication time (id desc) or in descending order of views (views desc).
WhenarchiveListBytype="page"Mode running, it will store the processed document data into a variable we specify (for examplearchives), and also prepare the pagination metadata ready forpaginationlabels.
pagination: Intelligent generation of pagination navigation
Immediately following,paginationLabel appears. Its task is toarchiveListThe provided pagination metadata intelligently generates home, previous, next, last page, and a series of page number navigation links.The introduction of this tag greatly simplifies the complexity of pagination logic construction for front-end developers.
paginationLabel usually receives a parameter namedshowwhich is used to control the number of pages displayed in the navigation bar. For example,show="5"意味着在当前页码前后会显示共5个页码链接，以保持导航的简洁性。
pagination标签内部会提供一个变量（例如pagesThis variable contains all the information needed to build the pagination navigation:
pages.TotalItems: Total number of documents.pages.TotalPages: Total number of pages.pages.CurrentPage：Current page number.pages.FirstPage/pages.LastPage/pages.PrevPage/pages.NextPage: Represent the links and names of the first page, last page, previous page, and next page.pages.PagesThis is an array containing all visible page number information, each element of which hasName：(page number),Link(Page link), andIsCurrent(whether it is the current page) and other properties, making it convenient for us to iterate and render.
Actual operation: Strong cooperation to achieve pagination
Now, let's look at a specific code example, to seearchiveListandpaginationHow does it work together in the AnQiCMS template. Suppose we want to display a list of articles on a category page or the home page of a model, and add pagination.
{# 首先，使用archiveList标签获取文档列表，注意设置type="page"以启用分页 #}
<div>
{% archiveList archives with type="page" limit="10" moduleId="1" categoryId="1" order="id desc" %}
{# 遍历文档列表，并显示每篇文档的简要信息 #}
{% for item in archives %}
<article class="document-item">
<a href="{{item.Link}}">
<h2>{{item.Title}}</h2>
<p>{{item.Description}}</p>
<div class="meta-info">
<span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
<span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>阅读量：{{item.Views}}</span>
</div>
{% if item.Thumb %}
<figure class="document-thumb">
<img alt="{{item.Title}}" src="{{item.Thumb}}">
</figure>
{% endif %}
</a>
</article>
{% empty %}
{# 当没有文档时显示的内容 #}
<p class="no-content-tip">当前分类下暂无文档。</p>
{% endfor %}
{% endarchiveList %}
{# 接下来，使用pagination标签生成分页导航。它会自动使用archiveList提供的数据 #}
<nav class="pagination-navigation">
{% pagination pages with show="5" %}
<ul>
{# 首页链接 #}
<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>
<div class="pagination-info">
<span>总计：{{pages.TotalItems}}条</span>
<span>当前第：{{pages.CurrentPage}}/{{pages.TotalPages}}页</span>
</div>
{% endpagination %}
</nav>
</div>
In the above code, we first obtainarchiveListLabel obtained the article list and specifiedtype="page"and displayed per page10articles. Subsequently, we use aforto iteratearchivesVariables, showing the title, summary, category, publish date and reading volume of each article. If the list is empty,{% empty %}the hint information in the block will be displayed.
Immediately following,paginationthe tags receivedarchiveListProcessed pagination data, and uses its internalpagesvariable to build the complete pagination navigation. We usepages.FirstPage/pages.PrevPage/pages.NextPage/pages.LastPageto create special page number links, and by{% for item in pages.Pages %}The page number in the middle is dynamically generated. Where,item.IsCurrentBoolean values can help us easily add the current page number toactiveClasses, thus highlighting visually. Finally, we also show the total number of items and the current page/total pages information, further enriching the user experience.
Flexible customization and optimization: Take it further
ThisarchiveListCombinepaginationPagination method, not only provides basic functions, but also leaves sufficient customization space.
In terms of style, we can design according to our website's language.document-item/.pagination-navigation/.page-itemand.activeWrite unique styles for CSS classes to create pagination components that match the overall style of the website.Since AnQiCMS template supports Django template engine syntax, this means we can take advantage of its powerful conditional judgment and loop control features to perform more complex logic processing on pagination navigation, such as simplifying pagination display on mobile devices or hiding certain pagination links in specific situations.
In terms of SEO, AnQiCMS built-in pseudo-static feature ensures that the URL structure of pagination links is friendly and can be indexed by search engines, which is crucial for improving the overall SEO performance of the website.Through this standardized pagination implementation, search engines can better understand and index the deep content of websites, avoiding duplicate content or indexing issues caused by pagination.
Summary: Make content management more efficient
PassarchiveListandpaginationThese two labels work closely together, AnQiCMS provides us with a powerful and flexible document list pagination solution.It clearly separates complex backend data processing from the front-end page rendering logic, making content management and website front-end development more efficient and convenient.