纯HTML响应式模板需JS实现分页，通过display切换section并用nav+aria-current语义化导航，结合Math.ceil计算页数、限制页码显示数量以适配移动端。
纯 HTML 响应式模板本身不支持分页逻辑，必须靠 JavaScript 控制内容切换或导航跳转；CSS 只能辅助布局和状态样式，display: none 和 flex 布局是常见手段，但无法自动计算页码或响应数据变化。
用 display 切换多个 section 实现静态多页
适合内容固定、页数少（比如 3–5 页）的摄影集、作品展示页。核心是把每页内容包进独立 section，用 JS 切换 display 状态。
- 每个
section加唯一id，如section-1、section-2 - 默认只让
section-1的style="display: block"，其余设为display: none - 导航按钮绑定
onclick，例如：<button onclick="showPage(2)">第二页</button> - JS 函数里遍历所有
section，统一设display: none，再对目标id设display: block - 记得在
@media查询中检查display切换后是否仍保持响应式断点行为（比如移动端flex-direction: column是否被意外覆盖）
nav + aria-current 实现语义化分页导航
搜索引擎和屏幕阅读器依赖正确的语义结构识别分页，光靠 div + onclick 不够。
- 必须用
<nav aria-label="分页导航"></nav>包裹整个分页区域 - 页码用
<ul><li><a href="#" data-page="3">3</a></li></ul>，不要用button（除非是 SPA 且禁用链接跳转） - 当前页链接必须同时带
class="active"和aria-current="page"，缺一不可 - CSS 中用
.active { background-color: #007bff; color: white; }等样式突出，别只靠颜色——加font-weight: bold或border-bottom: 2px solid - 如果模板已用
flex布局排页码，注意在小屏下加flex-wrap: wrap，避免溢出容器
前端分页 JS 逻辑怎么对接响应式模板
响应式模板通常已有 container、row、col 类，直接塞分页 JS 容易破坏原有栅格流。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 不要把分页 DOM 插入到
.row内部——它该是独立区块，建议放在<footer></footer>或单独<section class="pagination-section"></section> - 计算总页数时用
Math.ceil(totalItems / itemsPerPage)，别用parseInt截断，否则最后一页可能漏数据 - 页码生成要限制显示数量（比如最多显示 5 个连续数字），否则 100 页会撑爆移动端宽度；可用逻辑：
if (i >= start && i 控制渲染范围 - 点击页码后，除了更新内容，必须调用
scrollIntoView({ behavior: 'smooth' })滚动到分页区域顶部，否则用户看不到变化 - 若模板用了 CSS 自定义属性（如
--primary-color），分页按钮的active状态应复用它，保持视觉统一
为什么 Pagination.js 在响应式模板里容易出问题
第三方库默认假设你有完整控制权，而响应式模板常带预设 CSS 优先级、栅格类名、甚至内联样式，容易冲突。
-
Pagination.js默认生成的<ul></ul>会被模板的.pagination ul规则覆盖，导致间距/对齐错乱 - 它内置的
active类名可能和模板已有的.active（比如轮播图用的）样式冲突，必须用className: { active: 'pg-active' }重命名 - 响应式模板若用
rem或clamp()设置字体大小，Pagination.js生成的按钮文字可能过小，需额外加.pagination .pg-active { font-size: 1rem !important; } - CDN 引入的版本（如
paginationjs@2.1.5）不支持 ESM，若模板用type="module"就会报ReferenceError - 最稳妥的做法：只抄它的页码生成逻辑，不用它的 DOM 渲染——自己写
renderPagination()，完全受控
真正难的不是写出页码按钮，而是让它们在 max-width: 480px 下依然可点、可读、不重叠，且焦点状态符合 WCAG 2.1 标准。很多响应式模板只顾“看起来像”，却忘了 aria-current 和键盘 Tab 流的连贯性。
