HTML 和 CSS 分页生成器

HTML 和 CSS 分页生成器: 用途

为博客、商店或结果列表创建分页：填写总页数、当前页、显示多少相邻页，以及地址格式，如 /blog/page/{n} 或 ?page={n}。可选择方形、圆形和极简样式以及强调色。

代码使用带 aria-label 的 nav、当前页上的 aria-current="page"，以及真实的 a href 链接，谷歌可以跟踪它们来找到后续页面的条目。每个页码的触控区域为 44 px，在手机上，上一页和下一页的文字只显示为箭头。

使用方法

1. 填写总页数和当前页。
2. 选择地址、样式和颜色。
3. 把代码复制到网站中。

使用场景

• 文章很多的博客。
• 商店的商品列表。
• 搜索结果。

常见问题

为什么用链接而不是按钮？

列表的每一页都需要有自己的地址，如 /blog/page/2 或 ?page=2，放在普通的 a href 链接中。这样谷歌才能跟踪链接并找到后续页面的条目，用户也可以在新标签页中打开某一页，或分享其地址。

省略号是怎么工作的？

页数很多时，分页会显示第一页、最后一页和当前页附近的几页，并用 … 代替被省略的页。你可以选择当前页两侧各显示多少相邻页。

需要加上 rel="prev" 和 rel="next" 吗？

对谷歌不需要，它已在 2019 年停止使用这些标记。它们没有坏处，其他系统可能仍会读取，因此工具会在上一页和下一页的链接上加上 rel。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具