语言切换

Methanol 采用“按目录”组织多语言结构：若某目录的 index.mdx 配置了 lang 属性，该目录即被识别为独立的语言入口。

模板中可获取以下上下文：

每个入口包含 routePath, routeHref, label, code。

基于 <select> 的简单切换器

const LanguageSwitch = ({ ctx }) => {
	const languages = Array.isArray(ctx.languages) ? ctx.languages : []
	if (!languages.length) return null
	const currentHref = ctx.language?.routeHref || null
	return (
		<select
			aria-label="Select language"
			onchange="location.href=this.value"
			value={currentHref || undefined}
		>
			{languages.map((lang) => (
				<option value={lang.routeHref} selected={lang.routeHref === currentHref ? true : null}>
					{lang.label}
				</option>
			))}
		</select>
	)
}

基于链接列表的切换器

const LanguageLinks = ({ ctx }) => {
	const languages = Array.isArray(ctx.languages) ? ctx.languages : []
	if (!languages.length) return null
	const currentHref = ctx.language?.routeHref
	return (
		<nav aria-label="Languages">
			{languages.map((lang) => (
				<a href={lang.routeHref} aria-current={lang.routeHref === currentHref ? 'page' : null}>
					{lang.label}
				</a>
			))}
		</nav>
	)
}

注意事项