正在加载文档...
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}-->
注意事项
- 优先级:
item
和link
参数的优先级高于page_style
,如果同时设置,会使用自定义模板 - 兼容性:自定义模板需要确保 HTML 结构合理,避免破坏页面布局
- 数据依赖:分页功能依赖于数据查询时传入的总页数、当前页码等参数
- CSS 支持:自定义类名需要相应的 CSS 样式支持
调试建议
- 如果分页不显示,检查数据源是否正确传递了分页参数
- 如果样式异常,确认 CSS 类名是否正确定义
- 使用浏览器开发者工具检查生成的 HTML 结构是否符合预期