Docusaurus V3で言語切替のタブ設定を入れる

Docusaurus V3で言語切替のタブ設定を入れる

Docusaurus V3の言語切替タブ設定を触っていたものの、公式ドキュメントによる解説ではラベル表記等がなかなかうまく行かない状態でした。V2と互換性がある前提にて行った設定を記載しています。
Clock Icon2023.11.14

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Docusaurus V3のローカル検索を動作できましたが、もう一つ重要な要件が上手く動いていませんでした。言語切替指定です。

V2のプロジェクトではないため、インテグレーションはなしで最初からV3の設定を行っていましたが、公式ドキュメントを通して読んでもタブ表示等が期待した通りの動作となっていませんでした。V2での設定記事を元に修正しては起動を繰り返した結果、ようやくの期待動作に。一通り修正したファイルを含めて手順を記載します。

対応手順

docusaurus.config.jsへの修正をいれますが、公式ドキュメントの手順では期待した表示にはなりませんでした。特に日本語絡み。

i18n: {
    defaultLocale: "en",
    locales: ["en", "ja"],
    localeConfigs: {
      en: {
        label: 'English',
      },
      ja: {
        label: '日本語',
      },
    },
  },

V2の設定そのものですが、互換性は保たれているようで問題ありません。

あとがき

翻訳設定は開発設定のstartでも動作しますが、検索設定は本番設定、つまりserveでの起動が必要です。両方を有効にした状態での確認を行いたい場合には気をつけましょう。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.