言語

CLUAR がウェブサイトの言語と多言語コンテンツを管理する方法。

はじめに

CLUAR はデフォルトで多言語対応です。各ページは言語に関連付けられ、ウェブサイトには訪問者が利用可能な言語を切り替えるためのセレクターが表示されます。

言語はバックオフィスの言語フォームで管理されます。

フィールド	説明
コード (`code`)	言語の国際コード（例：`JA`、`EN`）。この言語にコンテンツ（ページ、辞書、設定）を関連付けるために使用される値です。
ロケール (`locale`)	完全なロケール（例：`ja`、`en`）。ページのリンクやコードによる言語切り替えで使用される値です。
デフォルト (`default`)	この言語をウェブサイトの優先言語としてマークします — 省略時に読み込まれる言語です。
説明 (`description`)	訪問者に表示される言語名（例：「日本語」）。

現在、プロジェクトには 2 つの言語セレクターがあります。

公開サイトのヘッダー (website/src/base/Header) — 従来のセレクターで、Ant Design の Menu を使用しています。言語を切り替えると /{locale}/ に移動します。空のオプションを表示しないよう、公開済みページが既にある言語のみを一覧表示します（Cluar.pages() 経由）。
LanguageSwitch (website/src/components/LanguageSwitch) — 予約エリア（ReservedArea）内で使用されます。よりシンプルなドロップダウンで、アクティブな言語を切り替えて現在のページを再読み込みし、別のルートには移動しません。

website/src/common/Cluar.js クラスは、言語を扱うための関数を提供します。

Cluar.defaultLanguage() — デフォルトとしてマークされた言語を取得します。
Cluar.currentLanguage() — 現在アクティブな言語を取得します。
Cluar.changeLanguage(codeOrLocale) — 別の言語をプログラムから有効化します（code と locale のどちらも受け付けます）。
Cluar.languages() — すべての言語のリストを取得します。

各言語のコンテンツがページでどのように整理されるかを確認しましょう。