In the AnQiCMS content management system, efficiently displaying a large amount of content and ensuring a good user experience and search engine optimization is the key to successful operation.This is undoubtedly the core role played by the pagination display of the content list.As an experienced website operations expert, I know thatarchiveListwith the tag andpaginationThe clever combination of labels is a powerful tool for achieving this goal, especially inarchiveListusetype="page"the pattern.
Let's delve deeper into how these tags work together to build a smooth and easy-to-manage article list for your AnQiCMS website.
Build dynamic content lists:archiveListThe 'pagination' mode of the tag
archiveListThe tag is a powerful tool used in AnQiCMS to obtain various types of document content (such as articles, products, etc.)It can filter and sort content based on different conditions and present it in a list format.When we need to add pagination functionality to this content list,type="page"The mode shines on stage.
when you arearchiveListSet in the labeltype="page"It will intelligently perceive the pagination information that may be contained in the current page URL and obtain the content of the corresponding page accordingly. 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 you telling the system: 'Please prepare a paginated content set, displaying this many items per page.'
For example, if you want to display articles on the article list page, ten 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"Indicates that the content of the article model is to be obtainedcategoryId="1"It also specifies a particular article category,limit="10"It determines ten articles per page loaded.archivesThe variable now contains the ten articles that need to be displayed on the current page. However, having just a list of articles is not enough, the user also needs to navigate to other pages. At this point,paginationThe tag has fulfilled its function.
Master the pagination navigation:paginationThe exquisite联动 of tags
paginationis a tagarchiveListIntype="page"Partner under the model. It is responsible for generating the page number navigation at the bottom of the page, allowing users to easily jump to different content pages.paginationThe label does not require you to manually input complex page number calculation logic, it will automatically receive and handle itarchiveListIntype="page"Generated in modePagination context data.
WhenarchiveListStart withtype="page"When the mode runs, it will prepare a namedpagesA global or local variable (usually in{% archiveList ... %}is available immediately afterwards), thispagesobject contains all information related to pagination, such as the total number of content itemsTotalItems, total number of pagesTotalPages, current page numberCurrentPageHome linkFirstPageEnd linkLastPageand the previous pagePrevPageNext pageNextPageDetails, even an array containing all visible page number linksPages.
paginationThe key parameter of the label isshowwhich determines how many consecutive page numbers are displayed in the 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>
Collaboratively working: The perfect integration of content list and pagination navigation.
toarchiveListandpaginationCombined, it can build a complete and powerful content pagination list. Usually, you will first usearchiveListRetrieve the content of the current page and then use it immediately belowpaginationto 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,archiveListwhich is responsible for retrieving the article data of the current page,paginationand then utilizesarchiveListprovidedpagesA variable generates a series of page link for easy browsing. EachpageItem.LinkIt contains the correct URL, allowing the user to click and jump to the corresponding page content.This design not only makes the template code more concise, but also greatly improves the accessibility of the content and the overall user experience of the website.
With such cooperation, AnQiCMS allows you to easily manage a large amount of content on your website while maintaining the website's response speed and good SEO performance, because each page has its unique URL, making it convenient for search engines to crawl and index.
Frequently Asked Questions (FAQ)
Q1:archiveListlabel'slimitThe parameter is intype="page"andtype="list"What is different in the mode?
A1: This is a very critical difference. WhenarchiveListUsetype="list"the mode,limitParameterdirectly determines the total number of items that the tag will retrieve and return.It does not consider pagination or generate pagination data. For example,limit="10"it simply retrieves the first 10 items. WhenarchiveListUsetype="page"the mode,limitthe parameter indicatesThe number of items displayed per pageIn this mode, the system calculates the total number of pages, and based on the current page number requested, returns the content that should be displayed on that page, while also preparingpaginationThe pagination context data used by the tag. In short,type="list"Is 'get a fixed quantity,'type="page"Is 'get a fixed quantity per page.'
Q2: If my content list needs to support search functionality,archiveListandpaginationHow to cooperate?
A2: AnQiCMS has already considered this point for you. WhenarchiveListUsetype="page"the pattern, it will automatically identify the URL in theqParameters (i.e., search keywords) and other custom filtering parameters. This means you just need to enter the keyword in the search form asqpass the parameters to the list page URL,archiveListIt will filter content based on keywords. Even better,paginationThe page link generated by the tag will automatically include these search and filter parameters, ensuring that users remain in the context of the search results when clicking on the pagination.You do not need to manually concatenate complex URL parameters for pagination links.
Q3: In usingarchiveListandpaginationAfter that, how can I ensure that my pagination content is SEO-friendly?
A3: Enabletype="page"mode 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:
- TDK SettingUtilize
tdkLabel, set a suitable page title (Title), keywords (Keywords), and description (Description) for the list page, and it can be dynamically adjusted according to the page number. - Canonical URLIf some page content is too similar, or you are worried about duplicate content issues, you can consider in
tdkSet in the labelCanonicalUrlPoint to the first page or a more authoritative page (but use with caution, not all pagination needs it). - Hreflang tag: If your website supports multiple languages, make sure to
headis usedhreflangTags correctly point to pagination versions for different languages and regions, AnQiCMS'languagesTags can help you achieve. - Clear navigation:
paginationLabel generated "Previous page", "Next page", and numeric page number links, which can help search engine spiders better discover and index all pagination content.