When operating the AnQiCMS website, we often encounter such needs: on a category page, we not only want to display the list of articles under the category but also clearly list all its subcategories for users to navigate more finely.The AnQi CMS can fully help us easily achieve this goal with its flexible template engine and rich built-in tags.
Understanding the category page and template mechanism of Anqi CMS
In the AnQi CMS, each category (whether it is an article category or a product category) can be associated with an independent template file. In most cases, this template file will be named{模型table}/list.html, or more accurately,{模型table}/list-{分类ID}.html. This means that when a user visits a category page, the system will automatically load the corresponding template file to render the page content.
The key to having subcategories and article lists coexist is to cleverly use the security CMS provided.categoryListto obtain subcategories by tags.archiveListto obtain articles under the category by tags.
核心思路：灵活运用categoryListandarchiveListtags
要在同一个分类页面中同时展示子分类和文章列表，我们的核心策略是：
- 确定当前分类：In the category page, the current visited category information (such as ID, name, etc.) is usually already available as a context variable, for example, it can be accessed through
{{category.Id}}directly. - Get and display subcategories:Use
categoryListTag, and specifyparentIdThe parameter is the ID of the current category, which can obtain its direct subcategories. - Get and display the list of articles:Use
archiveListTag, and specifycategoryIdThe parameter is the ID of the current category, which can retrieve all articles under this category. To provide a better user experience, the article list is usually combined withpaginationtags for pagination display.
Next, we will introduce step by step how to implement this feature in the template.
Detailed steps and code implementation
Suppose we want to implement for the 'article' model (whose table name isarticleThe classification page implementation of this feature. You need to find or create it under the directory of the current template theme being used.article/list.htmlFile. If you want to use an independent template for a specific category, you can also specify the corresponding template file in the background category settings.
1. Get the list of subcategories of the current category.
Inarticle/list.htmlTemplate, we can first obtain the subcategories of the current category.categoryListTagsparentIdThe parameter is crucial, as it specifies which parent category's subcategories we want to obtain.
{# 获取当前分类的ID，假设当前分类对象已在页面上下文中可用为 'category' #}
{% set currentCategoryId = category.Id %}
{# 使用 categoryList 标签获取当前分类下的所有子分类 #}
{% categoryList subCategories with parentId=currentCategoryId %}
{% if subCategories %} {# 判断是否有子分类 #}
<div class="sub-categories-section">
<h2 class="section-title">子分类</h2>
<ul class="sub-categories-list">
{% for item in subCategories %}
<li class="sub-category-item">
<a href="{{ item.Link }}" title="{{ item.Title }}">
{{ item.Title }}
{% if item.Thumb %}<img src="{{ item.Thumb }}" alt="{{ item.Title }}"/>{% endif %}
</a>
</li>
{% endfor %}
</ul>
</div>
{% else %}
<p>当前分类下暂无子分类。</p>
{% endif %}
{% endcategoryList %}
In this code block:
- We first obtained the subcategories of the current category.
Id. {% categoryList subCategories with parentId=currentCategoryId %}The result of all direct child categories of the current category ID will be obtained and stored insubCategoriesthe variable.- We use
{% if subCategories %}to determine if there are any child categories, in order to avoid displaying an empty list when there are no child categories. - In
forin the loop,item.Linkanditem.TitleProvided links and titles for subcategories.item.ThumbCan be used to display thumbnails for subcategories (if set in the background).
2. Retrieve and display the list of articles under the category.
After displaying the sub-categories, the list of articles under the current category can be displayed next. Here we will usearchiveListtags and enable pagination.
{# 使用 archiveList 标签获取当前分类下的文章列表 #}
{# type="page" 开启分页功能，limit="10" 设置每页显示10篇文章 #}
{% archiveList articles with categoryId=currentCategoryId type="page" limit="10" %}
{% if articles %} {# 判断是否有文章 #}
<div class="article-list-section">
<h2 class="section-title">本分类最新文章</h2>
<ul class="article-items">
{% for item in articles %}
<li class="article-item">
{% if item.Thumb %}
<a href="{{ item.Link }}" class="article-thumb-link">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb"/>
</a>
{% endif %}
<div class="article-info">
<h3><a href="{{ item.Link }}" title="{{ item.Title }}">{{ item.Title }}</a></h3>
<p class="article-description">{{ item.Description|truncatechars:120 }}</p>
<div class="article-meta">
<span>发布于：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
<span>阅读量：{{ item.Views }}</span>
</div>
</div>
</li>
{% endfor %}
</ul>
{# 添加分页导航 #}
<div class="pagination-section">
{% pagination pages with show="5" %}
<ul>
{% if pages.PrevPage %}
<li><a href="{{ pages.PrevPage.Link }}">上一页</a></li>
{% endif %}
{% for item in pages.Pages %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Name }}</a>
</li>
{% endfor %}
{% if pages.NextPage %}
<li><a href="{{ pages.NextPage.Link }}">下一页</a></li>
{% endif %}
</ul>
{% endpagination %}
</div>
</div>
{% else %}
<p>当前分类下暂无文章。</p>
{% endif %}
{% endarchiveList %}
In this code block:
{% archiveList articles with categoryId=currentCategoryId type="page" limit="10" %}It will fetch articles under the current category, set 10 articles per page, and enable pagination.- We also use
{% if articles %}to determine if there are articles. - In
forIn the loop, the title, link, and description (usingtruncatecharsfilter to extract), publish time (usingstampToDatefilter to format), read count, and thumbnail are displayed. - After the article list, it is followed by
paginationtags to generate page navigation,show="5"Indicates that up to 5 page number buttons are displayed.
Integrate all the code together(article/list.html)example)
Now, we will merge the above two parts of code into a `article