In website operation, the content classification page carries the important responsibility of organizing information and guiding user browsing.An appropriately designed and content-rich category page can not only enhance user experience but also optimize the efficiency of search engine crawling.For users of AnQiCMS, displaying the list of articles under the category on the category page is a very basic and commonly used feature.This article will introduce you in detail on how to easily achieve this goal with the powerful template tags of Aqee CMS.
Understanding the category page and content model
Before we start, let's briefly review the two core concepts of content organization in the Anqi CMS:Content ModelandCategory.
- Content model:It is the framework of the content on your website, such as "article modelEach model can define its own fields (such as articles have 'author', 'source', products have 'price', 'stock', etc.).All the content you post must belong to a specific content model.
moduleIdParameters are particularly important for specifying the model. - Category:This is the way to classify and organize content.You can create independent classification systems for each content model, for example, under the 'Article' model there are 'News Updates' and 'Industry Information', and under the 'Product' model there may be 'Mobile Products' and 'Computer Products', etc.
When users visit a category page, they expect to see a list of all related articles or products under that category.The auto CMS provides a flexible template mechanism, allowing us to customize the display of category pages.
Prepare your classification list template file
The template system of Anqi CMS is very flexible. Usually, the template files for classification list pages are stored in/template/您的模板目录/{模型table}/.
- Default classification list template:It is usually
{模型table}/list.html. For example, if your category belongs to the "article" model, the default template may bearticle/list.html. - Custom classification template:If you want a specific category (such as "Company News") to have a unique layout, you can specify a custom template for that category in the backend, for example
article/list-news.htmlorarticle/list-10.htmlEnglish version: (where 10 is the category ID).
Regardless of which template file you use, the next steps will be performed in this file.
Core implementation: Display the list of articles on the category page.
To display the article list nested within the category page, we will mainly use the following security CMS template tags:
categoryDetailTags:Used to obtain detailed information of the current category page, the most important is to obtain the ID of the current category.archiveListTags:This is the core tag for retrieving article lists, 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.
Below we demonstrate how to combine these tags using a detailed code example. Suppose we want to use them on an article classification page (for examplearticle/list.htmlThis category displays the list of articles under this category, and supports pagination.
Practical code example:
{# 假设这是您的文章分类列表页面模板文件：/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 gets the category information corresponding to the current URL and assigns it tocategoryVariables. This way, we can access various attributes of categories in the template.category.Title/category.Descriptionetc. to access various attributes of categories.{% set currentCategoryId = category.Id %}:Here we extract the categories'IdbecausearchiveListTags need this ID to accurately filter articles. At the same time,category.ModuleIdAlso provides the content model ID of the current category.{% archiveList archives with ... %}:archivesThis 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 when set to"page",archiveListThe page will return all the data required for pagination and allowpaginationThe tag works normally. If you just want to list a few articles without pagination, you can usetype="list".categoryId=currentCategoryId：Pass the current category ID obtained previously to the article list tag to ensure that only articles in this category are displayed.moduleId=currentModuleIdEnglish: Specify the content model ID of the article. This is the key to ensure that the correct content is called in a multi-content model website.limit="10"：Set the number of articles displayed per page to 10. You can adjust this number as needed.
{% for item in archives %}:to iteratearchiveListThe array of articles returned,itemRepresents each article object.- **
{{ item.Link }}/{{ item.Title }}、`{{ item.