渲染目录（ToC）

Methanol 在编译阶段自动提取标题生成目录结构，并注入 ctx.page.toc。

条目数据结构如下：

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

基础 TOC 渲染器实现

const Toc = ({ toc }) => {
	if (!toc?.length) return null
	return (
		<nav aria-label="On this page">
			<div>On this page</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>
		</>
	)
}

开发提示