AnQiCMS如何获取指定分类下的文章列表并进行分页?

在网站内容运营中,我们常常需要展示特定分类下的文章,并为这些列表提供分页功能,以提升用户体验和网站加载效率。安企CMS(AnQiCMS)凭借其灵活的模板引擎和强大的标签系统,能够轻松实现这一需求。

AnQiCMS的模板系统采用了类似Django模板引擎的语法,使用双花括号 {{变量}} 引用变量,以及单花括号加百分号 {% 标签 %} 调用标签。这使得内容展示的定制化变得非常直观。要获取指定分类的文章列表并实现分页,主要会用到两个核心标签:archiveListpagination

核心标签解析

首先,我们来了解一下实现目标所需的两个关键标签:

  1. archiveList 文档列表标签 这个标签是获取文章、产品等文档数据的核心。它非常灵活,可以根据不同的参数筛选和排序文档。对于获取指定分类下的文章列表并进行分页,archiveList 扮演着数据源的角色。

    • categoryId:用于指定要获取哪个分类下的文章。你可以直接传入分类的ID,例如 categoryId="1"。如果你正在一个分类页面中,通常不需要显式指定,archiveList 标签会默认尝试获取当前页面的分类ID。如果需要从多个分类获取文章,可以用逗号 , 分隔多个分类ID。
    • moduleId:指定文档所属的内容模型ID,例如文章模型(通常ID为1)、产品模型(通常ID为2)。这有助于精确地筛选出所需类型的文档。
    • type="page":这是实现分页的关键参数。当 type 设置为 page 时,archiveList 不仅会返回当前页的文章列表,还会生成分页所需的所有数据,这些数据将与 pagination 标签配合使用。
    • limit:用于指定每页显示的文章数量,例如 limit="10" 表示每页显示10篇文章。
    • order:定义文章的排序方式,常见的有按最新发布 order="id desc" 或按浏览量 order="views desc"
    • 此外,还有 child(是否包含子分类文章)、flag(推荐属性)、q(搜索关键词)等参数,可以根据具体需求灵活运用。
  2. pagination 分页标签 这个标签负责生成页码导航。它会接收 archiveList 生成的分页数据,并将其渲染成用户友好的页码链接,包括首页、上一页、下一页和末页等。

    • show:控制分页导航中可见的页码数量,例如 show="5" 将最多显示5个页码。

实现步骤与示例代码

要将这些标签协同工作,通常遵循以下步骤:

第一步:确定分类ID和模型ID

在安企CMS后台的“内容管理”模块中,你可以查看到每个分类的ID以及内容模型的ID。例如,如果你的“新闻动态”分类ID是 10,并且它属于“文章模型”(模型ID为 1),那么在模板中你就可以使用这些信息。

第二步:使用 archiveList 标签获取文章数据

在你的分类列表页模板(例如 list.htmlarticle/list.html)中,可以使用 archiveList 标签来获取文章数据。

{# 假设当前页面是分类列表页,分类ID将自动获取。
   如果需要指定特定分类,可设置 categoryId="你的分类ID"。
   moduleId通常为文章模型ID,默认为1。
   type="page" 开启分页功能,limit="10" 每页显示10篇文章。 #}
{% archiveList archives with type="page" moduleId="1" limit="10" order="id desc" %}
    {# 遍历文章列表 #}
    {% for item in archives %}
    <div class="article-item">
        <a href="{{ item.Link }}">
            <h3>{{ item.Title }}</h3>
            <p>{{ item.Description|truncatechars:100 }}</p> {# 截取文章描述前100个字符 #}
        </a>
        <div class="meta">
            <span>发布时间:{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
            <span>浏览量:{{ item.Views }}</span>
            {# 可以在这里添加文章缩略图等 #}
            {% if item.Thumb %}
                <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">
            {% endif %}
        </div>
    </div>
    {% empty %}
    <p>该分类下暂无文章。</p>
    {% endfor %}
{% endarchiveList %}

在上述代码中,我们定义了一个名为 archives 的变量来存储获取到的文章列表。stampToDate 标签用于将时间戳格式化为可读的日期。truncatechars:100 是一个过滤器,用于截取文章描述,保持页面整洁。

第三步:整合分页导航

紧接着 archiveList 标签之后,我们可以使用 pagination 标签来显示分页导航。

{# 分页导航区域 #}
<div class="pagination-container">
    {% pagination pages with show="5" %}
    <ul>
        {# 首页链接 #}
        <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
            <a href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
        </li>

        {# 上一页链接 #}
        {% if pages.PrevPage %}
        <li class="page-item">
            <a href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a>
        </li>
        {% endif %}

        {# 中间页码列表 #}
        {% for page_item in pages.Pages %}
        <li class="page-item {% if page_item.IsCurrent %}active{% endif %}">
            <a href="{{ page_item.Link }}">{{ page_item.Name }}</a>
        </li>
        {% endfor %}

        {# 下一页链接 #}
        {% if pages.NextPage %}
        <li class="page-item">
            <a href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a>
        </li>
        {% endif %}

        {# 末页链接 #}
        <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
            <a href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a>
        </li>
    </ul>
    <p class="pagination-info">总计 {{ pages.TotalItems }} 篇文章,共 {{ pages.TotalPages }} 页,当前第 {{ pages.CurrentPage }} 页。</p>
    {% endpagination %}
</div>

这里,我们定义了一个名为 pages 的变量来接收 archiveList 标签传递过来的分页信息。通过遍历 pages.Pages 可以输出中间的页码,并利用 IsCurrent 属性高亮当前页。FirstPagePrevPageNextPageLastPage 提供了导航的便利性。

完整示例代码

将上述两部分代码结合,便能在安企CMS模板中实现指定分类文章的列表展示和分页功能。

”`twig {# 文章列表区域 #} {% archiveList archives with type=“page” moduleId=“1” limit=“10” order=“id desc” %}

{% for item in archives %}
<div class="article-item">
    <a href="{{ item.Link }}">
        <h3>{{ item.Title }}</h3>
        <p>{{ item.Description|truncatechars:100 }}</p>
    </a>
    <div class="meta">
        <span>发布时间:{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
        <span>浏览量:{{ item.Views }}</span>
        {% if item.Thumb %}
            <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">
        {% endif %}
    </div>
</div>
{% empty %}
<p>该分类下暂无文章。</p>
{% endfor %}

{% endarchiveList %}

{# 分页导航区域 #}

{% pagination pages with show="5" %}
<ul>
    <li class="page