渲染目录 (ToC)

Methanol 会在编译过程中自动提取标题，并通过 ctx.page.toc 提供结构化数据。

目录中的每个条目包含以下结构：

{
	depth: 2,
	id: 'my-heading',
	value: 'My heading',
	children: []
}

ToC 渲染器实现示例

以下是一个标准递归实现的示例：

const Toc = ({ toc }) => {
	if (!toc || toc.length === 0) return null

	return (
		<nav aria-label="页面目录">
			<div>本页目录</div>
			<ul>
				{toc.map((item) => (
					<li>
						<a href={`#${item.id}`}>{item.value}</a>
						{item.children?.length ? <Toc toc={item.children} /> : null}
					</li>
				))}
			</ul>
		</nav>
	)
}

export default function PageTemplate({ PageContent, ExtraHead, ctx }) {
	return (
		<>
			<html>
				<head>
					<ExtraHead />
				</head>
				<body>
					<main>
						<PageContent />
					</main>
					<aside>
						<Toc toc={ctx.page.toc} />
					</aside>
				</body>
			</html>
		</>
	)
}

最佳实践