如何在一个分类页面中同时显示子分类和该分类下的文章列表？
📅
👁️ 67
运营AnQiCMS网站时，我们经常遇到这样的需求：在一个分类页面中，我们不仅希望展示该分类下的文章列表，还希望能够清晰地列出它的所有子分类，方便用户进行更细致的导航。安企CMS凭借其灵活的模板引擎和丰富的内置标签，完全能够帮助我们轻松实现这一目标。
理解安企CMS的分类页面与模板机制
在安企CMS中，每个分类（无论是文章分类还是产品分类）都可以关联一个独立的模板文件。通常情况下，这个模板文件会命名为{模型table}/list.html，或者更精确地，{模型table}/list-{分类ID}.html。这意味着，当用户访问某个分类页面时，系统会自动加载对应的模板文件来渲染页面内容。
实现子分类和文章列表并存的关键，在于巧妙地运用安企CMS提供的categoryList标签来获取子分类，以及archiveList标签来获取该分类下的文章。
核心思路：灵活运用categoryList和archiveList标签
要在同一个分类页面中同时展示子分类和文章列表，我们的核心策略是：
- 确定当前分类： 在分类页面中，当前访问的分类信息（例如ID、名称等）通常已经作为上下文变量可用，比如可以通过
{{category.Id}}直接获取。 - 获取并展示子分类： 使用
categoryList标签，并指定parentId参数为当前分类的ID，即可获取其直接子分类。 - 获取并展示文章列表： 使用
archiveList标签，并指定categoryId参数为当前分类的ID，即可获取该分类下的所有文章。为了更好地用户体验，文章列表通常还会结合pagination标签实现分页显示。
接下来，我们将详细介绍如何在模板中一步步实现这一功能。
详细步骤与代码实现
假设我们要为“文章”模型（其模型表名为 article）的分类页面实现这个功能。您需要在当前使用的模板主题目录下找到或创建 article/list.html 文件。如果希望特定分类使用独立模板，也可以在后台分类设置中指定对应的模板文件。
1. 获取当前分类的子分类列表
在 article/list.html 模板中，我们可以首先获取当前分类的子分类。categoryList 标签的 parentId 参数是关键，它能够指定我们要获取哪个父分类下的子分类。
{# 获取当前分类的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 %}
在这段代码中：
- 我们首先获取了当前分类的
Id。 {% categoryList subCategories with parentId=currentCategoryId %}会根据当前分类的ID获取其所有直接子分类，并将结果存储在subCategories变量中。- 我们使用
{% if subCategories %}来判断是否有子分类，避免在没有子分类时显示空列表。 - 在
for循环中，item.Link和item.Title分别提供了子分类的链接和标题。item.Thumb可用于显示子分类的缩略图（如果在后台设置了）。
2. 获取并展示该分类下的文章列表
在展示完子分类之后，紧接着可以展示当前分类下的文章列表。这里我们将使用 archiveList 标签，并开启分页功能。
{# 使用 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 %}
在这段代码中：
{% archiveList articles with categoryId=currentCategoryId type="page" limit="10" %}会获取当前分类下的文章，并设置每页显示10篇，同时开启分页模式。- 我们同样使用
{% if articles %}来判断是否有文章。 - 在
for循环中，展示了文章的标题、链接、描述（使用了truncatechars过滤器截取）、发布时间（使用了stampToDate过滤器格式化）、阅读量和缩略图。 - 文章列表后，紧接着使用了
pagination标签来生成分页导航，show="5"表示最多显示5个页码按钮。
将所有代码整合到一起（article/list.html 示例）
现在，我们将上述两部分代码合并到一个 `article