多言語対応(多言語ディレクトリ構造)
Methanol は、ディレクトリ内の index.mdx に lang プロパティが設定されている場合、そのディレクトリを独立した言語エントリとして識別します。これにより、複雑な i18n システムを導入することなく、ディレクトリ構造に基づいた軽量な多言語化を実現できます。
動作の仕組み
langを持つindex.mdxが配置されたディレクトリが 言語ルート となります。- 言語スイッチャーには、
langプロパティに指定された値がラベルとして表示されます。 - システムは現在の URL パスに最も近い言語ルートを自動的に検出し、アクティブな言語として設定します。
- HTML の
lang属性には、langCodeが定義されていればそれが優先的に適用され、未定義の場合はディレクトリ名がフォールバックとして使用されます。
ディレクトリ構成の例:
pages/
index.mdx # デフォルト言語のルート
zh/
index.mdx # 中国語の言語ルート
guide.mdx
ja/
index.mdx # 日本語の言語ルート
guide.mdx
フロントマターの設定例:
---
title: 日本語
lang: 日本語
langCode: ja
isRoot: true
hidden: true
---
言語スイッチャーの統合
デフォルトテーマは、lang プロパティを持つインデックスページを検出すると、自動的に言語スイッチャーを表示します。
- 表示ラベル:
langフィールドの値を使用。 - アクティブ状態:
ctx.languageの値に基づき判定。
ナビゲーションのスコープ設定
各言語のディレクトリにおいて isRoot: true を設定することで、サイドバーのナビゲーション範囲をその言語ディレクトリ内に限定することが可能です。
注意: isRoot が設定されたページはデフォルトで非表示となります。メニューに表示させたい場合は hidden: false を明示的に設定してください。
この設定により、言語ごとに完全に独立したナビゲーションツリーを構築できます。
ctx.languages のデータ構造
ctx.languages は、検知されたすべての言語エントリを格納した配列です。リンクを生成する際は、site.base が考慮された routeHref を使用してください。
{
routePath: '/ja/',
routeHref: '/ja/',
label: '日本語',
code: 'ja'
}
ルートパス(/)の index.mdx に lang が設定されている場合、そのエントリもリストに含まれます。
実装のアドバイス
isRootページはデフォルトでナビゲーションから隠蔽されます。必要に応じてhidden: falseを指定してください。/guideと/ja/guideのように、言語間でパス構造を対称に保つことで、サイト構成の管理が容易になります。- 言語ルートの
index.mdxにisRoot: trueを設定することで、デフォルト言語のリストが冗長に表示されるのを防ぎつつ、適切なナビゲーション範囲を確保できます。 drum