Skip to main content

Translate your site

Let's translate docs/intro.md to zh-Hans.

Configure i18n​

Modify docusaurus.config.js to add support for the zh-Hans locale:

docusaurus.config.js
export default {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'zh-Hans'],
  },
};

Translate​

Copy the docs/**.md file to the i18n/zh-Hans folder:

mkdir -p i18n/zh-Hans/docusaurus-plugin-content-docs/current
cp -r docs/** i18n/zh-Hans/docusaurus-plugin-content-docs/current

Translate i18n/zh-Hans/docusaurus-plugin-content-docs/current/**.md in zh-Hans.

Copy the blog/**.md file to the i18n/zh-Hans folder:

mkdir -p i18n/zh-Hans/docusaurus-plugin-content-blog
cp -r blog/** i18n/zh-Hans/docusaurus-plugin-content-blog

Translate i18n/zh-Hans/docusaurus-plugin-content-blog/**.md in zh-Hans.

Copy the pages/**.mdx file to the i18n/zh-Hans folder:

mkdir -p i18n/zh-Hans/docusaurus-plugin-content-pages
cp -r src/pages/**.md i18n/zh-Hans/docusaurus-plugin-content-pages
or
mkdir -p i18n/zh-Hans/docusaurus-plugin-content-pages
cp -r src/pages/**.mdx i18n/zh-Hans/docusaurus-plugin-content-pages

Translate i18n/zh-Hans/docusaurus-plugin-content-pages/**.md in zh-Hans.

Start your localized site​

Start your site on the French locale:

npm run start -- --locale zh-Hans

Your localized site is accessible at http://localhost:3000/zh-Hans/ and the Getting Started page is translated.

caution

In development, you can only use one locale at a time.

Add a Locale Dropdown​

To navigate seamlessly across languages, add a locale dropdown.

Modify the docusaurus.config.js file:

docusaurus.config.js
export default {
  themeConfig: {
    navbar: {
      items: [
        {
          type: 'localeDropdown',
          position: 'right',
        },
      ],
    },
  },
};

The locale dropdown now appears in your navbar:

Locale Dropdown

Build your localized site​

Build your site for a specific locale:

npm run build -- --locale zh-Hans

Or build your site to include all the locales at once:

npm run build