前後ページへのリンク

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>
		</>
	)
}

実装のポイント