ピン留めされたアイテム

Hi everyone.

This PR is now merged, but it's not the end of the story.
We'll test this code on Docusaurus + Jest, before advertising and documenting the i18n support.

In the meantime, you can still use the doc of this PR to figure out how it works, but keep in mind that until the official announcement, it's likely there will be a few breaking changes.

feat(v2): core v2 i18n support + Docusaurus site Crowdin integration by slorber · Pull Request #3325 · facebook/docusaurus

2021 年初頭にリリースされるようです。alpha.71 で正式発表？

i18n is a new feature (released early 2021), please report any bug you find.

RFC (Issue)

Pull Request

Merged / Released 2.0.0-alpha.70

Docs Preview

i18n - Introduction | Docusaurus

すばる

docusaurus config

i18n

docusaurus.config.js

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

docusaurus.config.js

  themeConfig: {
    navbar: {
      items: [
        {
          type: 'localeDropdown',
          position: 'right',
        },
      ],
    },
  },

すばる

翻訳コンテンツ

docusaurus write-translations で i18n/ja/ などが生成されます。

current.json

key に対して value を指定する方式で sidebar などの翻訳を指定できます。

その他

あとはこんな感じで各ロケールディレクトリ内に <pluginName><-pluginId> 形式でディレクトリを作り、コンテンツを配置していけば OK 👌

docs/
  hoge1/
    fuga1.md
    piyo1.md
  hoge2/
    fuga2.md
    piyo2.md
  hoge.md
i18n/
  en/
    .gitkeep
  ja/
    docusaurus-plugin-content-docs/
      hoge1/
        fuga1.md
        piyo1.md
      hoge2/
        fuga2.md
        piyo2.md
      hoge.md
    current.json

en については docs/ そのままにすべきなのか i18n/en/ に書くべきなのかよくわかっていません。
既存コンテンツの他ロケールを用意するという考えで行くと、defaultLocale は docs/ に置くべきなのかもしれません。

すばる

(今のところ) 開発サーバーはうまく動かない

docusaurus start で建てられる開発サーバーでは localeDropdown がおかしな挙動をします。
これはそれぞれのロケールが SPA になっているので複数ロケールを同時に起動できないからです。

ちなみに --locale ja or -l ja などとしてロケールを指定すると特定のロケールで立ち上げることができます。

Note: each locale leads to a single independent SPA site. It's not one SPA site containing all locales, that's why you can't start a Docusaurus site with all locales at once (but we may add this later).
feat(v2): core v2 i18n support + Docusaurus site Crowdin integration by slorber · Pull Request #3325 · facebook/docusaurus

💡 solution

docusaurus build で全ロケールを（ja などは build/ja/ に）ビルドできるので、あとは適当にサーバーを立ち上げます（別に php である必要はないです）。

$ cd build
$ php -S localhost:3000

デメリットとして、更新したら毎回自分で build してリロードする必要があります。
時間かかる上にめんどい。

すばる

コード中での翻訳

Translate コンポーネント・translate 関数を使用して翻訳箇所を埋め込めます。

import Translate, { translate } from "@docusaurus/Translate";

const Examples = {
  // component API: useful for regular JSX translations
  content: (
    <Translate
      id="homepage.quotes.christopher-chedeau"
      description="Quote of Christopher Chedeau on the home page"
    >
      Default quote message of Christopher Chedeau
    </Translate>
  ),

  // imperative API: useful for placeholders, alt or regular string props...
  title: translate({
    id: "homepage.quotes.christopher-chedeau.title",
    message: "Lead Prettier Developer",
    description: "Title of quote of Christopher Chedeau on the home page"
  })
};

これらは docusaurus write-translations で ./i18n/<locale>/code.json に抽出されます。