渲染导航

Methanol 通过 ctx.pagesTree 提供层级化的导航树。该树会自动根据当前导航根节点（isRoot）进行范围限定，并遵循所有 hidden 和 exclude 规则。

树中的每个节点包含以下结构：

{
	type: 'page' | 'directory',
	title: '...',
	name: '...',
	routePath: '/guide/',
	routeHref: '/docs/guide/', // 兼容基路径的 URL
	children: []
}

侧边栏实现示例

以下是一个递归实现的侧边栏组件示例：

const NavTree = ({ nodes, currentHref }) => (
	<ul>
		{(nodes || []).map((node) => {
			const label = node.title || node.name || node.routePath
			if (node.type === 'directory') {
				return (
					<li>
						{node.routeHref ? <a href={node.routeHref}>{label}</a> : <span>{label}</span>}
						{node.children?.length ? <NavTree nodes={node.children} currentHref={currentHref} /> : null}
					</li>
				)
			}
			const isActive = node.routeHref === currentHref
			return (
				<li>
					<a href={node.routeHref} aria-current={isActive ? 'page' : null}>
						{label}
					</a>
				</li>
			)
		})}
	</ul>
)

export default function PageTemplate({ PageContent, ExtraHead, ctx }) {
	return (
		<>
			<html>
				<head>
					<ExtraHead />
				</head>
				<body>
					<aside>
						<NavTree nodes={ctx.pagesTree} currentHref={ctx.page.routeHref} />
					</aside>
					<main>
						<PageContent />
					</main>
				</body>
			</html>
		</>
	)
}

最佳实践