跳到正文

PageNav 翻页导航

PageNav 是文档或文章底部的“上一页 / 下一页”:一个 <nav>,里面最多两张链接卡片。每张卡片有一行小字说明、页面标题和一个箭头。

演示

基础用法

prev 在开头,next 在末尾。链接带有 rel="prev" 和 rel="next"。

描述

description 在标题下面加一行说明。

只有一侧

第一页只有 next,最后一页只有 prev。单独的 next 仍然在末尾。

窄容器

nav 窄于 480px 时卡片上下堆叠。这是容器查询,看的是 nav 自己的宽度,而不是窗口宽度。

说明文字

prevLabel、nextLabel 替换语言包里的“上一页”“下一页”。aria-label 重命名整个 nav。

路由链接

renderLink 用你的路由链接渲染每张卡片。把收到的 props(href、className、rel、children,可能还有 aria-label)展开到链接上;第二个参数是 "prev" 或 "next"。

名称类型默认值说明版本
prev{ title: ReactNode; href: string; description?: ReactNode }undefined上一页,显示在开头。未发布
next{ title: ReactNode; href: string; description?: ReactNode }undefined下一页,显示在末尾。未发布
prevLabelReactNode语言包“上一页”上一页标题上方的小字。未发布
nextLabelReactNode语言包“下一页”下一页标题上方的小字。未发布
renderLink(props: PageNavLinkRenderProps, direction: "prev" | "next") => ReactNode渲染 <a>渲染每个链接,比如换成路由的 Link。未发布
aria-labelstring语言包“上一页和下一页”nav 的无障碍名称。未发布

说明文字和标题都是字符串时,链接的名称是“说明: 标题”(例如“上一页: 安装”),屏幕阅读器不会读出描述。prev、next 都没有时不渲染任何内容。

API 参考 VitePress 和 RsPress 的文档页脚。