Efficiently displaying a large amount of content and ensuring a good user experience and search engine optimization are the keys to successful operation in the AnQiCMS content management system.And undoubtedly, the pagination display of the content list plays a core role among them.archiveListTags andpaginationThe clever combination of tags is a powerful tool to achieve this goal, especially inarchiveListadoptstype="page"pattern time.
Let's delve into how these two tags work together to build a smooth and easy-to-manage article list for your AnQiCMS website.
Build a dynamic content list:archiveListThe 'Pagination' mode of the tag
archiveListTags are a powerful tool in AnQiCMS used to obtain various document content (such as articles, products, etc.).It can filter and sort content based on different conditions and present it in a list format.type="page"The mode shines on the stage.
When you arearchiveListsetting in the labeltype="page"When it comes to it, it will intelligently perceive the pagination information that may be included in the current page URL, and accordingly obtain the content of the corresponding page. At this time, limitThe parameter is no longer simply a limit on the total number of items displayed, but definesThe number of items displayed per pageThis is like telling the system: 'Please prepare a paged content set, displaying this many items per page.'
For example, if you want to display articles on the article list page with ten articles per page, you can use it like thisarchiveList:
{% archiveList archives with type="page" moduleId="1" categoryId="1" limit="10" %}
{# 循环输出当前页的文章内容 #}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
<p>{{item.Description}}</p>
<span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
</a>
</li>
{% empty %}
<li>暂无相关内容。</li>
{% endfor %}
{% endarchiveList %}
In this example,moduleId="1"It indicates that the content of the article model is to be retrievedcategoryId="1"It limits a specific article categorylimit="10"It determines that ten articles are loaded per page.archivesThe variable now contains the ten articles of data that need to be displayed on the current page. However, just having a list of articles is not enough; users also need to navigate to other pages. At this time,paginationTags have played their role.
Master the pagination navigation:paginationThe exquisite linkage of tags
paginationTags arearchiveListIntype="page"The **partner** under the mode. It is responsible for generating the page number navigation at the bottom of the page, allowing users to easily jump to different content pages.paginationLabel does not require you to manually input complex page number calculation logic, it will automatically receive and processarchiveListIntype="page"mode generatedPagination context data.
WhenarchiveListBytype="page"When running in mode, it will prepare a namedpagesThe global or local variable (usually in){% archiveList ... %}is immediately available afterwards), thispagesobject contains all information related to pagination, such as the total number of content itemsTotalItems, the total number of pages)TotalPages, and the current page numberCurrentPage, Home linkFirstPage, Last page linkLastPage, as well as the previous pagePrevPage, Next pageNextPagewith detailed information, even an array containing links to all visible page numbersPages.
paginationThe key parameter of the label isshowwhich determines how many consecutive page numbers are displayed in page navigation. For example,show="5"it will display five page numbers centered around the current page.
The followingpaginationTypical usage of the label:
<div class="pagination-container">
{% 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>
<p>总计：{{pages.TotalItems}}条内容，共{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页。</p>
{% endpagination %}
</div>
Collaborative Work: The Perfect Blend of Content List and Pagination Navigation
toarchiveListandpaginationWhen combined, they can build a complete and powerful content pagination list. Typically, you would first usearchiveListGet the content of the current page and then immediately usepaginationto generate navigation links.
<section class="article-list">
<h3>最新文章</h3>
<ul>
{% archiveList articles with type="page" moduleId="1" limit="10" %}
{% for article in articles %}
<li>
<a href="{{article.Link}}">
<h4>{{article.Title}}</h4>
<p>{{article.Description|truncatechars:100}}</p>
<time>{{stampToDate(article.CreatedTime, "2006年01月02日")}}</time>
</a>
</li>
{% empty %}
<p>抱歉，目前没有找到任何文章。</p>
{% endfor %}
{% endarchiveList %}
</ul>
{# 分页代码紧随其后，使用 archiveList 自动提供的 pages 变量 #}
<nav class="pagination">
{% pagination pages with show="5" %}
<p class="page-info">当前是第 {{pages.CurrentPage}} 页，总共有 {{pages.TotalPages}} 页，共 {{pages.TotalItems}} 条内容。</p>
<ul class="page-numbers">
{% if pages.FirstPage %}
<li {% if pages.FirstPage.IsCurrent %}class="active"{% endif %}><a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
{% endif %}
{% if pages.PrevPage %}
<li><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
{% endif %}
{% for pageItem in pages.Pages %}
<li {% if pageItem.IsCurrent %}class="active"{% endif %}><a href="{{pageItem.Link}}">{{pageItem.Name}}</a></li>
{% endfor %}
{% if pages.NextPage %}
<li><a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a></li>
{% endif %}
{% if pages.LastPage %}
<li {% if pages.LastPage.IsCurrent %}class="active"{% endif %}><a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a></li>
{% endif %}
</ul>
{% endpagination %}
</nav>
</section>
In this complete code block,archiveListis responsible for obtaining the article data of the current page,paginationand then utilizesarchiveListprovidedpagesvariables, generated a series of convenient page link for users. Each onepageItem.LinkAll URLs are correct, allowing users to click and navigate to the corresponding page content.Such design not only makes the template code more concise, but also greatly enhances the accessibility of the content and the overall user experience of the website.
With such collaboration, AnQiCMS allows you to easily manage a large amount of content on the website while maintaining the website's response speed and good SEO performance, as each page has its unique URL, which is convenient for search engines to crawl and index.
Common Questions (FAQ)
Q1:archiveListTagslimitParameter intype="page"andtype="list"mode is different?
A1: This is a very critical difference. WhenarchiveListUsetype="list"mode is active,limitParametersit directly determines the total number of items the label will retrieve and returnIt does not consider pagination, nor does it generate pagination data. For example,.limit="10"It simply retrieves the first 10 entries. WhilearchiveListUsetype="page"mode is active,limitthe parameter meansThe number of items displayed per pageIn this mode, the system calculates the total number of pages and returns the content to be displayed on the current page based on the requested page number, while also preparingpaginationTag usage pagination context data. In short,type="list"is "Fixed quantity",type="page"is "Fixed quantity per page".
Q2: If my content list needs to support search functionality,archiveListandpaginationHow to coordinate?
A2: AnQiCMS has considered this point for you. WhenarchiveListUsetype="page"the mode, it will automatically identify the URL inqParameters (i.e., search keywords) and other custom filter parameters. This means you only need to enter the keywords asqparameters passed to the list page URL,archiveListIt will filter content based on keywords. Even better,paginationThe page number links generated by the tags will also automatically include these search and filter parameters, ensuring that users can stay within the context of the search results when clicking on pagination.You do not need to manually concatenate complex URL parameters for pagination links.
Q3: While usingarchiveListandpaginationhow can I ensure that my pagination is SEO-friendly?
A3: Enabletype="page"modes andpaginationAfter the tag, AnQiCMS will generate independent and clear URLs for each page, which is very beneficial for SEO. To further optimize, you can ensure the following points:
- TDK Settings: Utilizing
tdkTags, set appropriate page title (Title), keywords (Keywords), and description (Description) for the list page, and can be dynamically adjusted according to the page number. - Canonical URL: If some pagination content is too similar, or you worry about duplicate content issues, consider in
tdksetting in the labelCanonicalUrlPoint to the first page or a more authoritative page (but use with caution, not all pagination requires it). - Hreflang Tag: If your website supports multiple languages, ensure that in
headinhreflangTags correctly point to different language and regional page versions, the AnQiCMS'slanguagestags can help you achieve. - clear navigation:
paginationThe 'Previous page', 'Next page' and numbered page link generated by the tag, which can help search engine spiders better discover and index all pagination content.