Skip to main content

ローカライズ

上のメニュー (navbar) に言語選択のリンクを出す​

docusaurus.config.ts
navbar: {
  ...
  items: [
    ...
    {
        type: 'localeDropdown',
        position: 'right',
    },

言語設定​

docusaurus.config.ts
const config: Config = {
  ...

  i18n: {
    defaultLocale: 'en',      // ← ★ デフォルトは /en/ などが URLに入らないもの
    locales: ['en', 'ja'],    // ← ★ ここにローカライズしたい言語を追加
  },

ディレクトリ構成​

この設定では、以下のようなディレクトリ構成にする必要がある。

Localeパス
en (default)docs/test1.md
jai18n/ja/docusaurus-plugin-content-docs/current/test1.md

ja ⇔ en を 同階層に置いて比較といったことがしたくなるが、

URL​

このように出る

LocaleURL
en (default)https://sugoi-domain.com/docs/test1
jahttps://sugoi-domain.com/docs/ja/test1

その他の動作​

  • 自動生成の場合は、直下(デフォルトの Locale) の md ファイルを元にパスが生成される
  • ローカライズ版 (上で言う /ja/ 以下) に該当ファイルがない場合は、「ページが見つかりません」とデフォルトの言語で出る

→ エラーメッセージが日本語だと、外国ユーザは ちょっと敬遠するかも（中国語デフォルトだとそう感じるのと同様に）

→ こう考えると、 'ja' でなくて 'en' をデフォルトにしたほうが良さそうだな

あとは​

特にやることはないので、1回設定してしまえば、簡単なものである。

注意点: routeBasePath を '/' に設定することとは共存不可​

docusaurus.config.ts
docs: {
  routeBasePath: '/',

このように routeBasePath を 'docs/' から '/' に変更した場合、
言語切替のリンクで、パスが見つからないことになる。

最終的な方針 (割り切り)​

→ 元も子もない話ではあるが、以下の機能を使わないと割り切ってしまうことにした

  • メニューでの言語切替は使用しない
  • エラーメッセージは英語だけで良い

→ リンク元からはこのようにリンクを張ることにする

※ 要は、上の方に書いた設定は使わないことにした...