安企CMS的文档列表页如何实现根据指定分类ID筛选并分页显示?

在安企CMS中管理和展示大量内容,特别是需要按特定分类组织并进行分页显示时,了解其模板标签和结构是至关重要的。安企CMS凭借其灵活的模板引擎,让内容运营者能够轻松实现这些需求,为用户提供清晰、高效的浏览体验。

为何需要按分类筛选并分页显示?

想象一下一个拥有数百篇甚至数千篇文档的网站,如果所有内容都堆积在一个页面上,用户会感到无从下手,网站加载速度也会受到影响。通过按分类筛选,我们可以帮助用户快速定位到他们感兴趣的内容领域;而分页显示则能有效控制单个页面的内容量,提升加载速度,同时引导用户逐步浏览更多内容。这不仅优化了用户体验,对于搜索引擎优化(SEO)也大有裨益,有助于提高网站的抓取效率和权重分配。

安企CMS的核心标签与机制

安企CMS的模板系统借鉴了Django模板引擎的语法,使用{{变量}}输出数据,{% 标签 %}进行逻辑控制。对于文档列表的筛选和分页,主要会用到以下几个核心标签:

  1. archiveList 标签:这是获取文档列表的核心标签。它允许我们根据多种条件(如分类ID、模型ID、推荐属性等)来筛选文档,并设置返回列表的类型(是普通列表还是为分页准备的列表)。
  2. pagination 标签:专门用于生成分页导航的标签。它会基于archiveList标签生成的分页数据,构建出“上一页”、“下一页”、“首页”、“尾页”以及页码数字等导航链接。
  3. categoryDetail 标签:在需要显示分类名称、链接等详细信息时,此标签能帮助我们获取指定或当前分类的各项属性。

了解这些标签的功能和用法,是构建灵活文档列表页的基础。

实战:根据指定分类ID筛选并分页显示文档列表

接下来,我们将通过具体步骤和代码示例,展示如何实现根据指定分类ID筛选并分页显示文档列表。

第一步:确定模板文件位置

首先,你需要明确你的文档列表页将使用哪个模板文件。根据安企CMS的模板约定(参考 design-director.md),通常文档列表页的模板文件位于:

  • {模型table}/list.html:这是该模型下所有分类的通用列表页。
  • {模型table}/list-{文档分类ID}.html:这是针对特定分类的定制化列表页。

例如,如果你要为文章模型(假设模型table为 article)下ID为 10 的分类创建一个专属列表页,你可以在 template/default/article/ 目录下创建一个名为 list-10.html 的文件。如果只是想为所有文章分类创建一个通用列表页,则使用 list.html。为了示例的通用性,我们假设是在 article/list.html 中进行操作。

第二步:使用 archiveList 标签获取文档列表

在你的列表模板文件中,使用archiveList标签来获取需要展示的文档。这里有几个关键参数:

  • type="page"这是实现分页显示的关键指令。 它告诉安企CMS不仅返回文档数据,还要准备好分页所需的所有信息。
  • categoryId="X":用于指定你想要筛选的分类ID。例如,categoryId="10" 将只显示ID为10的分类下的文档。如果你想在当前分类页面(例如通过点击导航进入的分类列表页)动态获取当前分类ID,通常不需要显式设置categoryIdarchiveList会尝试自动读取当前页面的分类ID。如果你需要手动指定或从其他地方获取,例如在循环分类时,可以将其设置为 categoryId=item.Id
  • moduleId="Y":确保我们获取的是正确内容模型下的文档。例如,文章模型的moduleId通常是1,产品模型可能是2。你可以通过后台“内容模型”管理界面查看具体的ID。
  • limit="10":指定每页显示多少条文档。
{% archiveList archives with type="page" categoryId="10" moduleId="1" limit="10" %}
    {# 文档列表内容将在这里循环展示 #}
{% endarchiveList %}

上述代码中,archives 是一个变量,它包含了根据指定条件筛选出的文档数组。

第三步:循环展示文档内容

获取到archives数组后,你需要使用for循环来遍历并展示每篇文档的详细信息。

在循环体内,item变量代表当前文档对象,你可以通过item.Titleitem.Linkitem.Description等属性来获取文档的各项数据。

{% archiveList archives with type="page" categoryId="10" moduleId="1" limit="10" %}
    {% for item in archives %}
        <div class="document-item">
            <a href="{{item.Link}}">
                <h3 class="document-title">{{item.Title}}</h3>
                {% if item.Thumb %}<img src="{{item.Thumb}}" alt="{{item.Title}}" class="document-thumb">{% endif %}
                <p class="document-description">{{item.Description}}</p>
            </a>
            <div class="document-meta">
                {# 获取文档所属分类的名称和链接 #}
                <span>分类:<a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{% categoryDetail with name='Title' id=item.CategoryId %}</a></span>
                <span>发布时间:{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>浏览量:{{item.Views}}</span>
            </div>
        </div>
    {% empty %}
        <p class="no-content-message">当前分类下暂无文档。</p>
    {% endfor %}
{% endarchiveList %}

请注意{% empty %}区块,当archives列表为空时,它会显示自定义的无内容消息,而不是空白。stampToDate过滤器用于将时间戳格式化为可读日期。

第四步:集成页面导航(分页)

archiveList标签的endarchiveList之后,使用pagination标签来生成分页导航。pagination标签会自动关联最近的type="page"archiveList生成的分页数据。

pagination标签常用的参数是show,它决定了在页码导航中最多显示多少个页码数字。

”`twig {% archiveList archives with type=“page” categoryId=“10” moduleId=“1” limit=“10” %}

{# 文档列表内容如上所示 #}
{% for item in archives %}
    <div class="document-item">
        {# ... 文档内容 ... #}
    </div>
{% empty %}
    <p class="no-content-message">当前分类下暂无文档。</p>
{% endfor %}

{% endarchiveList %}

{% pagination pages with show="5" %}
    <ul class="pagination-list">
        {# 首页链接 #}
        <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 %}
        {# 下