iCMS 分页调用说明

iCMS 分页调用说明

在 iCMS 系统中,可以通过标签 <!--{iCMS:pages}--> 来生成分页导航。通过设置不同的参数,可以灵活控制分页的样式和结构。

基本语法

<!--{iCMS:pages [参数列表]}-->
<ul class="pagination justify-content-center flex-wrap">
    <!--{$iCMS.PAGE.NAV}-->
</ul>

可用参数详解

参数名 类型 必填 说明
page_style int 指定分页样式编号(0~10),默认为 0(即默认样式)
item string 自定义分页项的 HTML 模板
link string 自定义链接的 HTML 模板

高级参数说明

item 参数

用于自定义每个分页项(如页码、上一页、下一页等)的外层 HTML 结构。

默认值:

<li class="page-item %s">%s</li>

参数占位符:

  • 第一个 %s:CSS 类名(如 active、disabled 等状态类)
  • 第二个 %s:内部内容(通常是链接或文本)

link 参数

用于自定义分页链接的 HTML 结构。

默认值:

<a class="page-link" href="%s" data-pageno="%d" %s>%s</a>

参数占位符:

  • 第一个 %s:链接地址(URL)
  • 第二个 %d:页码数字
  • 第三个 %s:额外属性(如 onclick 事件等)
  • 第四个 %s:链接显示文本(如 1, 2, 3 或 « »

示例调用

1. 使用预设样式

<!--{iCMS:pages page_style='3'}-->
<ul class="pagination justify-content-center flex-wrap">
    <!--{$iCMS.PAGE.NAV}-->
</ul>

2. 自定义分页结构

<!--{iCMS:pages 
    page_style='3'
    item='<li class="page-item %s">%s</li>'
    link='<a class="page-link" href="%s" data-pageno="%d" %s>%s</a>'
}-->
<ul class="pagination justify-content-center flex-wrap">
    <!--{$iCMS.PAGE.NAV}-->
</ul>

3. 完全自定义样式示例

<!--{iCMS:pages 
    item='<div class="my-page-item %s">%s</div>'
    link='<span class="my-page-link" onclick="goToPage(%d)">%s</span>'
}-->
<div class="my-pagination">
    <!--{$iCMS.PAGE.NAV}-->
</div>

预设样式说明

样式编号 说明
page_style='0' 默认样式
page_style='1' ~ page_style='10' 预设的 10 种不同视觉风格

输出变量

在分页标签内部,使用如下变量来输出分页内容:

变量名 描述
`` 输出完整的分页导航 HTML

常见使用场景

1. 基础分页(默认样式)

<!--{iCMS:pages}-->
<ul class="pagination justify-content-center flex-wrap">
    <!--{$iCMS.PAGE.NAV}-->
</ul>

2. 使用样式3

<!--{iCMS:pages page_style='3'}-->
<ul class="pagination justify-content-center flex-wrap">
    <!--{$iCMS.PAGE.NAV}-->
</ul>

3. 自定义带 AJAX 的分页

<!--{iCMS:pages 
    item='<li class="page-item %s">%s</li>'
    link='<a class="page-link" href="javascript:;" onclick="loadPage(%d)" data-pageno="%d">%s</a>'
}-->
<ul class="pagination justify-content-center flex-wrap">
    <!--{$iCMS.PAGE.NAV}-->
</ul>

所有样式


默认样式:<!--{$iCMS.PAGE.NAV}-->

    ----

    样式1:
    <!--{iCMS:pages page_style='1'}-->

    <!--{$iCMS.PAGE.NAV}-->

    ----

    样式2:
    <!--{iCMS:pages page_style='2'}-->

    <!--{$iCMS.PAGE.NAV}-->

    ----

    样式3:
    <!--{iCMS:pages page_style='3'}-->

    <!--{$iCMS.PAGE.NAV}-->
    ----

    样式4:
    <!--{iCMS:pages page_style='4'}-->

    <!--{$iCMS.PAGE.NAV}-->
    ----

    样式5:
    <!--{iCMS:pages page_style='5'}-->

    <!--{$iCMS.PAGE.NAV}-->
    ----

    样式6:
    <!--{iCMS:pages page_style='6'}-->

    <!--{$iCMS.PAGE.NAV}-->

---

样式7:
<!--{iCMS:pages page_style='7'}-->

<!--{$iCMS.PAGE.NAV}-->

---

样式8:
<!--{iCMS:pages page_style='8'}-->

<!--{$iCMS.PAGE.NAV}-->


---

样式9:
<!--{iCMS:pages page_style='9'}-->

<!--{$iCMS.PAGE.NAV}-->


---

样式10:

<!--{iCMS:pages page_style='10'}-->

    <!--{$iCMS.PAGE.NAV}-->

20250731223609.jpg

注意事项

  1. 优先级itemlink 参数的优先级高于 page_style,如果同时设置,会使用自定义模板
  2. 兼容性:自定义模板需要确保 HTML 结构合理,避免破坏页面布局
  3. 数据依赖:分页功能依赖于数据查询时传入的总页数、当前页码等参数
  4. CSS 支持:自定义类名需要相应的 CSS 样式支持

调试建议

  • 如果分页不显示,检查数据源是否正确传递了分页参数
  • 如果样式异常,确认 CSS 类名是否正确定义
  • 使用浏览器开发者工具检查生成的 HTML 结构是否符合预期