上一页/下一页

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="Page navigation">
			{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>
		</>
	)
}

注意事项