语言切换

Methanol 的多语言支持基于目录结构。任何在其 index.mdx 的 Frontmatter 中定义了 lang 属性的目录，都会被识别为语言入口。

主题模板会接收到以下语言相关的属性：

每个入口包含 routePath、routeHref、label 和 code 属性。

下拉菜单切换器实现

使用 <select> 元素的标准实现：

const LanguageSwitch = ({ ctx }) => {
	const languages = ctx.languages || []
	if (languages.length === 0) return null

	const currentHref = ctx.language?.routeHref
	return (
		<select
			aria-label="选择语言"
			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 = ctx.languages || []
	if (languages.length === 0) return null

	const currentHref = ctx.language?.routeHref
	return (
		<nav aria-label="语言选择">
			{languages.map((lang) => (
				<a href={lang.routeHref} aria-current={lang.routeHref === currentHref ? 'page' : null}>
					{lang.label}
				</a>
			))}
		</nav>
	)
}

注意事项