上一页/下一页
Methanol 提供了辅助函数来实现“上一页”和“下一页”导航，确保用户能够按预期的顺序浏览文档：
const { prev, next } = ctx.getSiblings() || {}
该函数返回的序列会自动根据当前导航根节点进行范围限定，并遵循侧边栏的显示顺序。
实现示例
const PrevNext = ({ ctx }) => {
const siblings = ctx.getSiblings()
const prev = siblings?.prev
const next = siblings?.next
if (!prev && !next) return null
return (
<nav aria-label="分页导航">
{prev ? <a href={prev.routeHref}>← {prev.title}</a> : <span />}
{next ? <a href={next.routeHref}>{next.title} →</a> : <span />}
</nav>
)
}
export default function PageTemplate({ PageContent, ExtraHead, ctx }) {
return (
<>
<html>
<head>
<ExtraHead />
</head>
<body>
<main>
<PageContent />
<PrevNext ctx={ctx} />
</main>
</body>
</html>
</>
)
}
注意事项
- 基路径适配: 务必在所有分页链接中使用
routeHref，以确保其在配置了site.base时仍能正常工作。 - 过滤机制: 标记为
hidden: true的页面会自动从相邻页序列中排除，从而维持清晰的导航流。