iCMS 分页调用说明

# iCMS 分页调用说明 在 iCMS 系统中，可以通过标签 `<!--{iCMS:pages}-->` 来生成分页导航。通过设置不同的参数，可以灵活控制分页的样式和结构。 ## 基本语法 ```html <!--{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 结构。 **默认值：** ```html <li class="page-item %s">%s</li> ``` **参数占位符：** - 第一个 `%s`：CSS 类名（如 active、disabled 等状态类） - 第二个 `%s`：内部内容（通常是链接或文本） ### `link` 参数 用于自定义分页链接的 HTML 结构。 **默认值：** ```html <a class="page-link" href="%s" data-pageno="%d" %s>%s</a> ``` **参数占位符：** - 第一个 `%s`：链接地址（URL） - 第二个 `%d`：页码数字 - 第三个 `%s`：额外属性（如 onclick 事件等） - 第四个 `%s`：链接显示文本（如 1, 2, 3 或 « » ## 示例调用 ### 1. 使用预设样式 ```html <!--{iCMS:pages page_style='3'}--> <ul class="pagination justify-content-center flex-wrap"> <!--{$iCMS.PAGE.NAV}--> </ul> ``` ### 2. 自定义分页结构 ```html <!--{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. 完全自定义样式示例 ```html <!--{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. 基础分页（默认样式） ```html <!--{iCMS:pages}--> <ul class="pagination justify-content-center flex-wrap"> <!--{$iCMS.PAGE.NAV}--> </ul> ``` ### 2. 使用样式3 ```html <!--{iCMS:pages page_style='3'}--> <ul class="pagination justify-content-center flex-wrap"> <!--{$iCMS.PAGE.NAV}--> </ul> ``` ### 3. 自定义带 AJAX 的分页 ```html <!--{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> ``` ### 所有样式 ```html 默认样式：<!--{$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}--> ```  ## 注意事项 1. **优先级**：`item` 和 `link` 参数的优先级高于 `page_style`，如果同时设置，会使用自定义模板 2. **兼容性**：自定义模板需要确保 HTML 结构合理，避免破坏页面布局 3. **数据依赖**：分页功能依赖于数据查询时传入的总页数、当前页码等参数 4. **CSS 支持**：自定义类名需要相应的 CSS 样式支持 ## 调试建议 - 如果分页不显示，检查数据源是否正确传递了分页参数 - 如果样式异常，确认 CSS 类名是否正确定义 - 使用浏览器开发者工具检查生成的 HTML 结构是否符合预期