AnQi CMS: Efficiently display the latest content on the homepage and implement pagination**Practice
The homepage is an important entry point for visitors to understand the site content and obtain the latest information, it is crucial to clearly and effectively display the latest articles or products.The Anqi CMS provides powerful and flexible template tags, helping us easily achieve this goal, and can also finely control pagination of content, ensuring a smooth user experience.
Overview of core features: archiveListwithpagination
We mainly use two core template tags of Anqi CMS to display the latest content on the homepage:archiveListandpagination.
archiveListThe label is responsible for retrieving the list of content we need from the database, whether it is articles or products, it can be queried through it.It supports various parameters for filtering, sorting, and limiting the number of content items, which is the foundation for us to obtain the latest content.
AndpaginationTags are inarchiveListBased on this, provide pagination functionality for the content list.When the amount of content is large, pagination can effectively improve page loading speed and user browsing experience, avoiding the loading of too much information at once.These tags usually work together to build a complete content display area.
Step 1: Determine the type and quantity of content to be displayed
In Anqi CMS, articles and products are considered different 'content models'.In the background "Content Management" under "Content Model", it is usually default to have "Article Model" (ModuleId=1) and "Product Model" (ModuleId=2).You need to determine according to your needs whether you want to display the latest articles, the latest products, or both.
In addition, you also need to decide how many of the latest contents should be displayed on the homepage by default without pagination, as well as how many per page in pagination mode.
Step two: Call the latest content in the homepage template (no pagination)
Suppose we want to display the latest 5 articles on the homepage. We can edit the current template we are using (usuallytemplate/你的模板目录/index/index.htmlortemplate/你的模板目录/index.html），and usearchiveList.
<section class="latest-articles">
<h2>最新文章</h2>
<div class="article-list-container">
{% archiveList latestArticles with moduleId="1" type="list" limit="5" order="id desc" %}
{% for item in latestArticles %}
<article class="article-summary">
<a href="{{ item.Link }}">
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">
{% endif %}
<h3>{{ item.Title }}</h3>
<p>{{ item.Description|truncatechars:100 }}</p>
<div class="article-meta">
<span>发布于：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
<span>浏览量：{{ item.Views }}</span>
</div>
</a>
</article>
{% empty %}
<p>暂无最新文章，敬请期待！</p>
{% endfor %}
{% endarchiveList %}
</div>
</section>
This code explanation is as follows:
{% archiveList latestArticles with moduleId="1" type="list" limit="5" order="id desc" %}: This is the core content acquisition tag.latestArticles: We define a variable name for the article list obtained, convenient for subsequent use in the loop.forLoop usage.moduleId="1": Specify the content we want to obtain for the "article model" (if you want to obtain products, change tomoduleId="2")type="list": Indicates that we only retrieve a fixed number of lists without pagination.limit="5": Limit to retrieve the latest 5 items only.order="id desc": Sort by content ID in descending order, as IDs are typically incremented, which means the latest released content is obtained.
{% for item in latestArticles %}：TraverselatestArticlesEach item in the variable.item.Link,item.Title,item.Description,item.Thumb,item.CreatedTime,item.ViewsThese are:archiveListin the tagitemThe available fields represent the link, title, description, thumbnail, creation time, and views of the article. You can choose to display as needed.{{ stampToDate(item.CreatedTime, "2006-01-02") }}:stampToDateIs an Anqi CMS provided practical filter, used to format timestamps into readable date formats."2006-01-02"Is the special formatting syntax for date formatting in Go language.{{ item.Description|truncatechars:100 }}:truncatecharsThe filter is used to truncate the article description, limiting it to 100 characters and adding an ellipsis to keep the page neat.{% empty %}: This is a very friendly design, whenlatestArticlesThe list will be automatically displayed when it is empty{% empty %}Content within the block, avoid blank pages.
Step 3: Add pagination control
When the amount of content increases, we no longer satisfy ourselves with simply displaying a fixed number of contents. We need to introduce pagination functionality. This only requires a little modification ofarchiveListlabel'stypethe parameters and combine withpagination.
`twig
<h2>最新产品</h2>
<div class="product-list-container">
{% archiveList paginatedProducts with moduleId="2" type="page" limit="10" order="id desc" %}
{% for item in paginatedProducts %}
<article class="product-item">
<a href="{{ item.Link }}">
{% if item.Logo %} {# 产品通常使用Logo作为主图 #}
<img src="{{ item.Logo }}" alt="{{ item.Title }}" class class="product-logo">
{% endif %}
<h3>{{ item.Title }}</h3>
<p class="product-price">价格：￥{{ item.Price }}</p> {# 假设产品模型有价格字段 #}
<div class="product-meta">
<span>更新于：{{ stampToDate(item.UpdatedTime, "2006-01-02") }}</span>
</div>
</a>
</article>
{% empty %}
<p>暂无产品上架，敬请期待！</p>
{% endfor %}
{# 分页导航区域 #}
<nav class="pagination-controls">
{% pagination pages with show="5" %}
<ul class="pagination-list">
<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a href="{{ pages.FirstPage.Link }}">首页</a>
</li>
{% if pages.PrevPage %}
<li class="page-item">
<a href="{{ pages