How to get and display all articles under a specific category?
In website content management, effectively organizing and displaying articles is the key to improving user experience and the clarity of the website structure.AnQi CMS provides a powerful and flexible template tag feature, allowing you to easily retrieve and display all articles under a specific category.
Ensure the content structure is clear: the cornerstone of backend category settings
Before starting the operation on the template level, we must first ensure that the content structure of the background is clear and reasonable.The AnQi CMS category management feature is located under the "Content Management" module, where you can create and manage various article categories such as "Company News", "Industry Dynamics", or "Technical Tutorials" and so on.
When publishing or editing an article, you will find an option for 'Category', which is used to assign the article to a specific category.When you need to get a list of articles in a certain category, the system will filter according to the category information you specify in the background.
Core feature: usearchiveListTagging to retrieve article list
archiveListThe tag is a core tool in Anqi CMS template used to retrieve article lists. It is powerful and can accurately control the range and display style of the articles to be retrieved through various parameters.
To get articles under a specific category, the key is to usecategoryIdthis parameter. You can find the corresponding ID for each category in the "Content Management" -> "Document Category" section in the background.
In addition, you need to pay attention to several important parameters:
type:This parameter determines the form in which you want to display the list of articles.- is set to
list(type="list"When it is time, it will display according to the number you specify (vialimitParameters) list articles, commonly used for sidebar recommendations or homepage article blocks. - is set to
page(type="page"When it creates pagination for the article list, which is very useful in scenarios where a large number of articles need to be displayed, such as category pages or search result pages.
- is set to
limit:Used to control the number of articles displayed per page or per request. For example,limit="10"It will display 10 articles. It also supports offset mode, such as,limit="2,10"It means starting from the second article and getting 10 articles.order:The order of the articles displayed is also important. You can set different sorting rules according to your needs:order="id desc": Sort by article ID in descending order, which usually means the most recently published articles are at the top.order="views desc": Sort by article views in descending order, with popular articles at the top.order="sort desc": Sort by custom order in the backend, allowing you to manually adjust the article order.
moduleId:If you are managing multiple content models (such as having both "article model" and "product model"), make sure to specify the correct one.moduleIdThis can avoid confusion. The article model is usually set to 1 by default.
InarchiveListWithin the tag, you will use aforloop to iterate over each article obtained. Each article within the loop is represented by aitemvariable, you can use toitem.字段名In order to obtain various information about articles, such as:item.Title(Title),item.Link(Link),item.Description(Summary),item.Thumb(thumbnail),item.CreatedTime(Publishing time) anditem.Views(Views) and so on.
Build template code: from simple list to pagination display
After understanding these parameters, let's see how to apply them in the template.
Example 1: Get the latest 5 articles under a specific category (without pagination)
If you want to display several of the latest articles under a category on the homepage or sidebar, you can usetype="list". Suppose we want to get the latest 5 articles under the category1of 'Company News':
{# 获取ID为1的分类（例如“公司新闻”）下最新的5篇文章 #}
<div class="category-articles">
<h2>公司新闻</h2>
<ul>
{% archiveList articles with categoryId="1" type="list" limit="5" order="id desc" %}
{% for item in articles %}
<li>
<a href="{{ item.Link }}" title="{{ item.Title }}">
{# 如果有缩略图，则显示 #}
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">
{% endif %}
<h3>{{ item.Title }}</h3>
<p class="article-desc">{{ item.Description|truncatechars:80 }}</p> {# 截取简介，避免过长 #}
<span class="article-date">{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</a>
</li>
{% empty %}
{# 当该分类下没有文章时显示 #}
<li>该分类下暂无文章。</li>
{% endfor %}
{% endarchiveList %}
</ul>
</div>
In this example, we also used{{ stampToDate(item.CreatedTime, "2006-01-02") }}a filter to format timestamps into readable dates.truncatechars:80which is used to truncate the article summary so that it does not exceed 80 characters.
Example two: Retrieve all articles under a specific category with pagination
When you need to display all articles under a category on the category details page, and provide pagination functionality,typethe parameter topage，and cooperatepaginationlabel usage
`twig {# Assuming we are on a category detail page, the current category ID will be automatically retrieved #} {# If you need to specify a category, you can manually add categoryId=“Your category ID” #} {% archiveList articles with type=“page” limit=“10” order=“id desc” %}
{# 列表头部可以显示当前分类的名称和描述 #}
<div class="category-header">
<h1>{% categoryDetail with name="Title" %}</h1>
<p>{% categoryDetail with name="Description" %}</p>
</div>
<div class="articles-list">
{% for item in articles %}
<div class="article-card">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
{% if item.Thumb %}
<a href="{{ item.Link }}"><img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-card-thumb"></a>
{% endif %}
<p>{{ item.Description }}</p>
<div class="article-meta">
<span>发布时间：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
<span>浏览量：{{ item.Views }}</span>
</div>
</div>
{% empty %}
<p>该分类下暂无文章。</p>
{%