In website operation, the content classification page carries the important responsibility of organizing information and guiding users to browse.A well-designed and content-rich category page can not only improve user experience but also optimize search engine crawling efficiency.For users of AnQiCMS, it is a very basic and commonly used feature to display the list of articles under the category page in a nested manner.This article will introduce you in detail on how to take advantage of the powerful template tags of AnQi CMS to easily achieve this goal.
Understanding the category page and content model
Before we begin, let's briefly review the two core concepts of content organization in AnQi CMS:Content modelandCategory.
- Content Model:It is the skeleton of the content on your website, such as "article model", "product model", and so on.Each model can define its own fields (such as articles have "author", "source", products have "price", "inventory", etc.).All content you post must belong to a specific content model.This is passed through the article list call later
moduleIdThe parameter used to specify the model is particularly important. - Category:This is a way to classify and organize content. You can create an independent classification system for each content model, for example, under the 'Article' model there are 'News Dynamics', 'Industry Information', and under the 'Product' model there may be 'Mobile Products', 'Computer Products', etc.
When a user visits a category page, they expect to see a list of all relevant articles or product listings under that category.AnQi CMS provides a flexible template mechanism, allowing us to customize the display style of category pages.
Prepare your category list template file
The AnQi CMS template system is very flexible. Usually, the template files for the category list page are stored in/template/您的模板目录/{模型table}/below.
- Default category list template:It is usually
{模型table}/list.htmlFor example, if your category belongs to the "Article" model, the default template may bearticle/list.html. - Custom category template: If you want a specific category (such as "Company News") to have a unique layout, you can specify a custom template for the category in the background, for example
article/list-news.htmlorarticle/list-10.htmlwhere 10 is the category ID.
No matter which template file you use, the next steps will be performed in this file.
Core implementation: Displaying the article list on the category page.
To display the list of articles under the category on the category page, we will mainly use the following security CMS template tags:
categoryDetailTags:Used to obtain the detailed information of the current category page, the most important thing is to obtain the ID of the current category.archiveListTags:This is the core tag for retrieving the list of articles, which can filter and list articles based on various conditions (including category ID, model ID, etc.).paginationTags:If the number of articles is large, pagination is essential, this tag can help us quickly generate pagination navigation.
We will demonstrate how to combine these tags using a detailed code example. Suppose we want to categorize an article page (such asarticle/list.htmlThe list of articles under this category is displayed, and pagination is supported.
Practical code examples:
{# 假设这是您的文章分类列表页面模板文件：/template/default/article/list.html #}
{% extends 'base.html' %} {# 继承基础布局，如包含头部、底部等公共部分 #}
{# 获取当前分类的详细信息，这里将分类信息存储在名为 'category' 的变量中 #}
{% categoryDetail category %}
{% set currentCategoryId = category.Id %} {# 提取当前分类的ID，方便后续使用 #}
{% set currentModuleId = category.ModuleId %} {# 提取当前分类所属的模型ID #}
{% block title %}
<title>{{ category.Title }} - 文章列表</title> {# 设置页面标题为分类名称 #}
{% endblock %}
{% block content %}
<div class="category-header">
<h1>{{ category.Title }}</h1> {# 显示分类名称 #}
<p>{{ category.Description }}</p> {# 显示分类描述 #}
{# 您也可以在此处显示分类的Banner图或缩略图 #}
{% if category.Logo %}
<img src="{{ category.Logo }}" alt="{{ category.Title }}">
{% endif %}
</div>
<div class="article-list-section">
<h2>最新文章</h2>
{# 使用 archiveList 标签获取当前分类下的文章列表 #}
{# type="page" 表示启用分页，limit="10" 表示每页显示10篇文章 #}
{# categoryId 使用我们之前获取到的 currentCategoryId #}
{# moduleId 使用我们之前获取到的 currentModuleId #}
{% archiveList archives with type="page" categoryId=currentCategoryId moduleId=currentModuleId limit="10" %}
{% if archives %} {# 判断是否有文章 #}
<ul class="article-list">
{% for item in archives %}
<li class="article-item">
<a href="{{ item.Link }}">
<h3>{{ item.Title }}</h3>
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">
{% endif %}
<p class="article-description">{{ item.Description }}</p>
<div class="article-meta">
<span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
<span>阅读量: {{ item.Views }}</span>
</div>
</a>
</li>
{% endfor %}
</ul>
{# 插入分页导航 #}
<div class="pagination-area">
{% pagination pages with show="5" %} {# 最多显示5个页码按钮 #}
<ul>
{# 首页链接 #}
<li {% if pages.FirstPage.IsCurrent %}class="active"{% endif %}><a href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a></li>
{# 上一页链接 #}
{% 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 %}
{# 尾页链接 #}
<li {% if pages.LastPage.IsCurrent %}class="active"{% endif %}><a href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a></li>
</ul>
{% endpagination %}
</div>
{% else %}
<p class="no-content">当前分类下暂无文章。</p> {# 没有文章时显示提示信息 #}
{% endif %}
{% endarchiveList %}
</div>
{% endblock %}
{% endcategoryDetail %}
Code analysis:
{% categoryDetail category %}:This tag retrieves the category information corresponding to the current URL and assigns it tocategoryVariable. This way, we can access various attributes of the category in the template throughcategory.Title/category.Descriptionetc.{% set currentCategoryId = category.Id %}:Here we extract the category'sIdbecausearchiveListThe tag needs this ID to accurately filter articles. At the same time,category.ModuleIdAlso provided is the content model ID of the current category.{% archiveList archives with ... %}:archives: This is the name we give to the article list data, you can use it in the loop.itemTo represent each article.type="page":Very important!Only set to"page",archiveListWill return all the data required for pagination and allowpaginationThe tag is working normally. If you just want to list a few articles without pagination, you can usetype="list".categoryId=currentCategoryIdPass the current category ID obtained earlier to the article list tag to ensure that only articles in this category are displayed.moduleId=currentModuleIdSpecify the content model ID of the article. This is the key to ensuring the correct content is called in a multi-content model website.limit="10": Set the number of articles displayed per page. You can adjust this number as needed.
{% for item in archives %}:Loop througharchiveListThe returned array of articles,itemrepresents each article object.- **
{{ item.Link }}/{{ item.Title }}、`{{ item.