言語セレクターを作成する

サイトのロケール間を効率的に移動できるように、カスタム ロケール スイッチャーを設計します。

多言語ウェブサイトを公開した後は、訪問者が好みに応じて適切な言語を選択できる方法を考案する必要があるかもしれません。 言語リスト コンポーネントを使用すると、言語セレクターを設定できます。このコンポーネントはコレクション リスト コンポーネントと同様に動作し、公開可能なすべての言語を表示します。

外観は必要に応じて自由に変更できますが、このガイドでは、ドロップダウンの内容に現在の言語が反映される、ナビゲーション バーの言語選択ドロップダウンの作成に重点を置きます。

開始前に: ローカリゼーションの概要を調べて、ローカリゼーションについて理解を深めてください。言語セレクターを設定するときに、主言語で作業していることを確認します (つまり、言語オプションのドロップダウンから主言語を選択したことを確認します)。ナビゲーション バーを Web サイトに統合し、ナビゲーション バー内にドロップダウン コンポーネントを配置します。

言語セレクターを作成する手順:

  1. 起動する ナビゲーションパネル
  2. 横にある矢印をタップします 落ちる コンポーネントの子コンポーネントを表示する
  3. 訪問 パネルを追加 > 高度な
  4. ドロップする 言語リスト コンポーネントをナビゲーションバーに組み込む 
  5. 挿入する 落ちる コンポーネント内の 言語ラッパー コンポーネント(ナビゲーションパネルを使用してコンポーネントを正確に移動できます)
  6. 配置する 言語リスト 内部の 落ちるリスト 成分 
  7. 消去する ドロップダウンリンク コンポーネント
  8. を選択 テキストブロック コンポーネントの内部 ドロップダウン切り替え 成分
  9. アクセス 要素設定パネル > テキストブロックの設定
  10. 紫色の「ドット” アイコン 
  11. 選ぶ 言語名 
  12. あなたのデザイン 落ちる 好みに応じてコンポーネントとそのサブコンポーネント

言語セレクターにイラストを追加して、各言語の視覚的な表現 (アイコンや国旗など) を言語名の横に表示することもできます。

  1. 訪問 パネルを追加 > メディア
  2. 添付 画像 コンポーネントの内部 ドロップダウン切り替え 成分
  3. へ移動 要素設定パネル > 画像設定
  4. 紫色の「ドット” アイコン
  5. 選択する 言語イメージ
  6. パーソナライズ 画像 あなたの好みに基づいて

今後、言語選択ドロップダウンには、利用可能なすべての言語が表示されます。 このサブディレクトリで公開するために有効化されました設定パネル > ローカリゼーション、ドロップダウン コンテンツと画像は現在の言語 (例: 「英語 (米国)」) に合わせて配置されます。公開を有効にすると、言語は公開された言語リストと言語セレクターに自動的に組み込まれます。公開言語に関する詳細情報は、こちらで確認できます。

ユアン・マック