前後ページへのリンク

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

ポイントと注意点